배열의 생성
배열 리터럴
가장 일반적이고 간편한 배열 생성 방식은 배열 리터럴을 사용하는 것이다. 배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다. 배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재한다.
1
2
3
4
5
6
7
8
9
10
11
const arr_1 = [1, 2, 3];
console.log(arr_1.length); // 3
const arr_2 = [];
console.log(arr_2.length); // 0
const arr_3 = [1, , 3]; // 희소배열
console.log(arr_3.length); // 3
console.log(arr_3[1]); // undefined
Array 생성자 함수
Array 생성자 함수를 통해 배열을 생성할 수 있다. 단, Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다.
- 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다. 이때 생성된 배열은 희소 배열이다. length 프로퍼티 값은 0 이지만 실제로 배열의 요소는 존재하지 않는다.
1
2
3
4
5
6
const arr = new Array(10);
console.log(arr); // [ 비어있음 x 10 ]
console.log(arr.length); // 10
- 전달된 인수가 없는 경우 빈 배열을 생성한다.
1
2
3
new Array(); // []
- 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다. 또 Array 생성자 함수는 함수 내부에서 new.target을 확인하기 때문에 new 연산자 없이도 동작한다.
1
2
3
4
new Array(1, 2, 3); // [1, 2, 3]
new Array({}); // [{}]
Array(1, 2, 3); // [1, 2, 3]
Array.of
ES6에서 도입된 메서드로 전달된 인수를 요소로 갖는 배열을 생성한다. Array.of는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자라도 인수를 요소로 가진다.
1
2
3
Array.of(1); // [1]
Array.from
Array.of 와 마찬가지로 ES6에서 도입된 메서드이며, 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환해서 반환한다.
1
2
3
4
5
6
7
Array.from({ length: 2, 0: 'a', 1: 'b'}); // ['a', 'b']
Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']
Array.from({ length: 3 }); // [undefined, undefined, undefined]
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]
Array.from 메서드는 두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환한다.
요소의 참조
배열 요소를 참조할 때에는 대괄호를 사용한다. 대괄호 안에 인덱스를 넣어 참조할 수 있다. 인덱스는 객체의 프로퍼티 키와 같은 역할이다.
1
2
3
4
5
6
7
const arr = [1, 2];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // undefined
배열은 사실 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체다. 따라서 존재하지 않는 요소를 참조하면 객체와 마찬가지로 undefined를 반환한다.
배열 요소의 추가와 갱신
배열은 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 프로퍼티 값은 자동으로 갱신된다. 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 요소를 추가할 경우 희소 배열이 된다. 주의할 점은 값을 명시적으로 할당하지 않으면 요소는 생성되지 않는다. 이미 존재하는 요소에 값을 할당하면 요소값이 갱신된다.
1
2
3
4
5
6
7
8
9
10
11
12
const arr = [0];
arr[1] = 1; // 배열 요소의 추가
console.log(arr); // [0, 1]
console.log(arr.length); // 2
arr[1] = 10; // 요소값의 갱신
console.log(arr); // [0, 10]
인덱스는 요소에 접근할 때 항상 정수를 사용해야 한다. 정수 이외의 값을 인덱스처럼 사용할 경우 요소가 생성되는 것이 아니라 프로퍼티가 생성된다. 이때 추가된 프로퍼티는 length 프로퍼티값에 영향을 주지 않는다.
배열 요소의 삭제
배열은 객체이기 때문에 delete 연산자를 사용할 수 있다. 하지만 delete 연산자로 배열의 요소를 삭제할 경우 배열은 희소 배열이 되므로 delete 연산자는 사용하지 않는 것이 좋다.
희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.property.splice 메서드를 사용하면 된다. 이때 length 프로퍼티 값은 자동으로 갱신된다.
1
2
3
4
5
6
7
8
const arr = [1, 2, 3];
arr.splice(1, 1); // arr[1]부터 1개의 요소를 제거
console.log(arr); // [1, 3]
console.log(arr.length); // 2