[TIL] 배열 - (2). 배열 생성

1. 배열 - (1). 배열 생성 - 리터럴

배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다.

const arr = ['orange', 'melon', 'grape', 'lemon'];

배열 리터럴에 하나의 요소도 추가하지 않으면 length 프로퍼티 값이 0인 빈 배열이 된다.

const arr = [];
console.log(arr.length); // 0

1. 배열 - (2). 배열 생성 - Array 생성자 함수

Array 생성자 함수를 통해 배열을 생성할 수 있다. Array 생성자 함수는 전달된 인수에 개수에 따라 동작한다.

const arr = new Array(5);
console.log(arr); // [undefined, undefined, undefined, undefined, undefined]

이때 생성된 배열은 희소 배열이다. 배열의 길이는 존재하지만 배열의 요소는 존재하지 않는다.

new Array(); // []

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

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

전달된 요소가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.

1. 배열 - (3). 배열 생성 - Array.of

Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.

Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of('this is array'); // ['this is array']

위에서 살펴본 Array 생성자 함수와 다르게 전달된 인수의 개수가 1개 이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

1. 배열 - (4). 배열 생성 - Array.from

Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환한다.

Array.from({length: 2, 0: 'orange', 1: 'grape'});
// ['orange', 'grape']

유사 배열 객체를 변환하여 배열을 생성한다.

Array.from('hello');
// ["h", "e", "l", "l", "o"]

이터러블을 변환하여 배열을 생성한다.

2. 배열 끝에서 추가하기 - push()

const arr = ['orange', 'grape'];
arr.push('lemon'); // ['orange', 'grape', 'lemon']

3. 배열 끝에서 제거하기 - pop()

const arr = ['orange', 'grape', 'lemon'];
arr.pop(); // ['orange', 'grape']

4. 배열 앞에서 추가하기 - unshift()

const arr = ['orange', 'grape', 'lemon'];
arr.unshift(); // ["apple", "orange", "grape", "lemon"]

5. 배열 앞에서 제거하기 - shift()

const arr = ['orange', 'grape', 'lemon'];
arr.shift(); // ["grape", "lemon"]

참고자료 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리