[JS][자료형] 배열(Array) 기본

배열이란?

여러 데이터를 순서대로 저장할 수 있는 객체타입의 데이터 구조입니다.

⇒ 박스 여러개를 일렬로 나열해 둔 것.

하나의 변수 안에 여러개의 데이터가 존재하며 각 데이터는 번호(index)로 접근 가능합니다. 

기본적으로 Javascript에서의 배열은 한 배열안에 여러개의 자료형을 모두 넣을 수 있습니다.

 

하나의 배열 변수 안에 6개의 데이터를 넣었을 때 추상적 이미지

선언 방법

배열을 선언하는 방식에는 대표적으로 리터럴 방식과 생성자를 이용하는 방식이 있습니다.

리터럴 방식으로 선언하기

리터럴 : 그 자체로 값을 의미하는 표현식

const arr = [1, 2, 3, 4, 5];

가장 많이 사용하는 방법이며 직관적입니다.

생성자를 이용하여 선언하기

const arr = new Array(1, 2, 3, 4, 5); // 생성자 방식 선언

특별한 경우에 많이 사용합니다.

(예시 : 길이가 있는 빈 배열 생성 등)

 

배열에 요소 삽입하기

배열에 요소를 넣을 때는 초기에 할당시에 넣을수도 있고,

선언 및 할당이 이루어진 다음에 요소를 추가해서 넣을 수 있습니다.

초기 할당

할당과 동시에 초기값으로 요소를 넣는 방식입니다.

const arr = [1, 2, 3, 4, 5]; // 리터럴 방식 선언
const arr2 = new Array(1, 2, 3, 4, 5); // 생성자 방식 선언

console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr2); // [1, 2, 3, 4, 5]

push

가장 기본적으로 값을 추가 하는 방법으로, 배열의 맨 끝에 값을 추가합니다.

한번에 여러개의 값을 추가 할 수도 있습니다.

const arr = [1, 2, 3, 4];
console.log(arr); // [1, 2, 3, 4]

// 배열의 끝에 요소를 추가합니다.
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

// 한번에 여러개의 요소를 추가할 수 있습니다.
arr.push(6, 7, 8);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]

특정 위치에 요소 삽입

맨 끝이 아닌 특정 인덱스에 요소를 삽입할 수 있습니다.

const arr = [];
// 0번째 인덱스에 2를 추가
arr[0] = 2;
console.log(arr); // [2]

 

해당 인덱스에 요소가 있었다면, 해당 요소를 덮어쓰게 됩니다.

const arr = [];
// 0번째 인덱스에 2를 추가
arr[0] = 2;
console.log(arr); // [2]
// 0번째 인덱스에 3을 덮어씌움
arr[0] = 3;
console.log(arr); // [3]

또한 순서대로 값을 넣지 않게 된다면 빈 공간이 생기게 됩니다.

const arr = [];

arr.push(1);
console.log(arr); // [1]

arr[10] = 10;

console.log(arr); // [1, empty x 9, 10]

배열 연결하기

concat 메서드를 사용하게 되면 두 개의 배열을 하나로 합쳐 하나의 새로운 배열을 만들어냅니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const result = array1.concat(array2);

console.log(result); // [1, 2, 3, 4, 5, 6]

배열에서 요소 제거하기

배열의 마지막 요소 제거 (pop)

pop()은 배열의 마지막 요소를 제거하고, 제거된 값을 반환합니다.

새로운 배열을 생성하는게 아닌 기존 배열이 변경됩니다.

const arr = [1, 2, 3, 4];
const lastItem = arr.pop();

console.log(arr); // [1, 2, 3]
console.log(lastItem); // 4

맨 앞에 있는 값 제거 (shift)

shift()는 배열의 첫 번째 요소를 제거하고, 제거된 값을 반환합니다.

마찬가지로 새로운 배열을 생성하는게 아닌 기존 배열이 변경됩니다

const arr = [1, 2, 3, 4];
const firstItem = arr.shift();

console.log(arr); // [2, 3, 4]
console.log(firstItem); // 1

특정 위치 값 제거 (splice)

splice(startIndex, deleteCount)를 사용하여 특정 위치의 요소를 제거할 수 있습니다

마찬가지로 새로운 배열을 생성하는게 아닌 기존 배열이 변경됩니다

제거된 값이 배열로 담아져 반환됩니다.

const arr = [10, 20, 30, 40, 50];
const removed = arr.splice(2, 1); // 2번 인덱스부터 1개 제거

console.log(arr); // [10, 20, 40, 50]
console.log(removed); // [30]