[JS] 자바스크립트의 여러가지 배열 생성 방법

JS를 사용하며 배열을 자연스럽게 써왔지만, 배열에 대해 자세히 공부해본 적이 없었다. JS 문법을 기초부터 공부할 기회가 생겨 배열 생성 방법과 배열 메소드들을 정리해보고자 한다.

 

자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다.

 

1. 배열 리터럴

가장 단순하고 직관적인 배열 생성 방식이며 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다.

const a = [];
const b = [1, 2, 3];

배열 내부에서 spread 문법을 사용하여 기존의 배열을 활용한 새로운 배열을 생성할 수 있다.

또한 spread 문법은 이터러블을 대상으로 사용할 수 있으므로, 배열이 아닌 이터러블을 활용하여 배열을 생성할 수 있다.

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

const d = 'Hello World';
const e = [...a]; // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

---

2. Array 생성자 함수

 

length 값을 인수로 전달받아 해당 길이의 배열을 생성한다.

const a = new Array(10);

length의 값과 상관없이 빈 배열을 생성하며, 전달된 length 프로퍼티 값이 0이라면 빈 배열 리터럴([])과 동일하다.

또는 인수를 아예 전달하지 않아도 legnth가 0인 빈 배열을 생성한다.

const a = new Array(3); // a.length = 3인 빈 배열
const b = new Array(0); // b.length = 0인 빈 배열
const c = new Array(); c.length = 0인 빈 배열

 

인수를 2개 이상 전달하면 Array.of 메소드와 동일하게 동작한다. 즉, 인수들을 요소로 갖는 배열을 생성한다.

const a = new Array(1,2,3); // [1,2,3]

참고로 new 연산자를 생략해도 동일하게 동작한다.

---

3. Array.of 메소드

전달된 인수를 요소로 갖는 배열을 생성한다.

Array 생성자 함수와의 차이점은 인수가 1개일 때도 해당 요소를 갖는 배열을 생성한다는 점이다.

const a = Array.of(1, 2, 'abc', {}); // [1, 2, 'abc', {}]
const b = Array.of(10); // [10];

---

4. Array.from 메소드

유사 배열 객체 (array-like object) 또는 이터러블을 인수로 받아 배열을 생성한다.

const a = {length: 3, 0: 1, 1: 2, 2: 3}; // 유사 배열 객체
const b = Array.from(a); // [1, 2, 3]
const c = Array.from('abc'); // ['a', 'b', 'c']

두 번째 인수로 배열의 모든 요소에 대해 호출할 콜백 함수를 전달받을 수 있다.

const a = 'Hello World';
const b = Array.from(a, v => v.toLowerCase()); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

---

배열 생성 활용

1. 규칙성 있는 배열 생성

// Array 생성자 함수
const a = [...new Array(10)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Array.from 메서드
const b= Array.from({length: 10}, (_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

위 코드에서 new Array(10)에 바로 map을 사용하지 않고 배열 내부에 spread 연산자를 사용한 이유는 new Array(10)은 length 값만 10이고 실제로 내부에 든 요소가 없기 때문이다. [...new Array(10)] 를 하게되면 undefined 요소 10개를 가진 배열이 만들어지게 되고 map 함수를 통해 i + 1을 대입하면서 1부터 10까지의 배열이 만들어지게 된다.

 

위 코드의 콜백 함수를 변경함으로써 다양한 형태의 규칙적인 수를 나열하는 배열을 생성할 수 있다.

const a = [...Array(5)].map((_, i) => 2 * i + 1); // [1, 3, 5, 7, 9]
const b = [...Array(5)].map((_, i) => 2 * i + 2); // [2, 4, 6, 8, 10]
const c = [...Array(5)].map((_, i) => i * i); // [0, 1, 4, 9, 16]
const d = [...Array(5)].map((_, i) => 1 << i); // [1, 2, 4, 8, 16]
const e = [...Array(5)].map((_, i) => i % 2); // [0, 1, 0, 1, 0]

 

 

2. 같은 요소로 채워진 배열 생성

배열 메소드 중 하나인 fill 메소드를 사용하면 전달받은 인수로 배열을 채울 수 있다.

const a = new Array(5).fill(0); // [0, 0, 0, 0, 0]
const b = [1, 2, 3, 4, 5].fill(0); // [0, 0, 0, 0, 0]

---

참고 및 출처: https://tesseractjh.tistory.com/103