[JavaScript] 배열 생성, 배열 요소의 추가와 삭제

배열 생성

1. 배열 리터럴

let arr = [1, 2, 3];
let arr2 = []; // 빈 배열
let arr3 = [1, , 3]; // 희소 배열

2. Array 생성자 함수

전달된 인수가 숫자 하나인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.

let arr = new Array(10);

console.log(arr); // [empty x 10]
console.log(arr.length); // 10

전달된 인수가 없는 경우 빈 배열을 생성한다.

new Array(); // []

전달된 인수가 2개 이상이거나 숫자가 아닌 경우 요소로 갖는 배열을 생성한다.

new Array(1, 2, 3); // [1, 2, 3]
new Array({}); // [{}]

3. Array.of

ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다. Array.of는 Array 생성자와는 달리 전달된 인수가 숫자 하나이더라도 인수를 요소로 갖는 배열을 생성한다.

Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of('abc'); // ['abc']

4. Array.from

ES6에서 새로 도입된 Array.from 메서드는 유사 배열 객체또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

Array.from({length: 2, 0: 'a', 1: 'b'}); // ['a', 'b']
Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']

배열 요소 추가

let arr = [0];

arr[1] = 1;

console.log(arr); // [0, 1]
console.log(arr.length); // 2

만약 현재 배열의 length 프로퍼티보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.

arr[10] = 10;

console.log(arr); // [0, 1, empty x 8, 10]
console.log(arr.length); // 11

이미 요소가 존재하는 위치에 값을 재할당하면 요소 값이 변경된다.

arr[0] = 10;

배열 요소 삭제

배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.

let arr = [1, 2, 3];

delete arr[1];

console.log(arr); // [1, empty, 3]
console.log(arr.length); // 3 -> length 프로퍼티에 영향을 주지 않는다(희소 배열)

하지만 이때 배열은 희소배열이 되기 때문에 배열의 요소를 삭제하는 데는 delete 연산자를 사용하지 않는 것이 좋다.
배열의 요소를 완전히 삭제하려면 배열의 메서드를 사용해야 한다.(splice)