[js] 배열을 생성하는 법

js에서 빈 배열을 생성하는 방법에 대해서 알아보고자 합니다.
자바스크립트 내에서 배열을 생성하는 방법에는 2가지가 있습니다.

 

1. 대괄호를 이용한 배열 생성

2. Array를 이용한 배열 생성

 

대괄호를 이용한 배열 생성

가장 쉽게 사용하는 배열 선언 방식입니다.

const arr = []; // []

 

Array를 이용한 배열 생성

Array의 생성자와 정적 메소드를 이용해서 생성할 수 있습니다.

 

1. new Array() - 생성자 사용

new Array() 로 사용해도 되고 new를 제외한 Array() 로도 사용됩니다.
두가지 방식 모두 배열을 생성하는 동일한 방식이지만 저는 생성자라는 의미로 new Array() 를 더 선호합니다.

// 빈 배열 생성하기
const arr1 = new Array(); // []

// 크기가 4인 배열 생성하기
const arr2 = new Array(4); // [][ <4 empty items> ]

// 인수를 전달하여 배열 생성하기
const arr3 = new Array(0, 1, 2, 3, 4); // [ 0, 1, 2, 3, 4 ]

하나의 인수가 단일 숫자일 경우 배열의 크기로 설정되어 해당 숫자만큼의 크기를 가진 빈 배열이 생성됩니다.
여러개의 인수를 전달할 경우 입력 순서대로 배열의 값으로 할당됩니다.

 

배열의 크기만 지정해주는 경우 내부 값이 비어있기 때문에 fill() 을 사용하여 채워주거나 각각의 인덱스를 선언하여 값을 할당해주어야 합니다.

ar2[2] = 3; // [ <2 empty items>, 3, <1 empty item> ]
ar2.fill(0); // [ 0, 0, 0, 0 ]

 

그러나 fill() 을 사용할 때 주의할 점이 있습니다.
fill 메서드는 배열의 모든 요소를 같은 객체(참조값)로 채웁니다.
예제로 확인해보겠습니다.

const arr4 = new Array(4).fill(new Array(4).fill(0));
arr4[0][0] = 1;
arr4[0][1] = 2;

// 결과 : [ [ 1, 2, 0, 0 ], [ 1, 2, 0, 0 ], [ 1, 2, 0, 0 ], [ 1, 2, 0, 0 ] ]

fill로 채워준 값이 참조값으로 할당되기 때문에 0번 인덱스의 배열에만 값을 설정하더라도 모든 배열에 동일한 값이 할당되게 됩니다. 이런 경우 정적 메서드를 사용하여 생성하면 각 인덱스마다 다른 배열을 가진 배열을 생성할 수 있습니다.

 

2. Array.from() - 정적 메서드 사용

이 정적 메서드는 다음과 같은 인수로 사용됩니다.

Array.from(배열로 변환할 순회 가능한 값, 배열의 모든 요소를 순회할 map함수, 함수 실행시 사용될 this값)

// 0으로 채워진 4*4 정사각형 이중 배열 생성하기
const arr5 = Array.from(new Array(4), () => new Array(4).fill(0));
// [ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]

arr5[0][0] = 1;
arr5[0][1] = 2;
// 결과 : [ [ 1, 2, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]

이렇게 정적메서드를 사용하면 map함수를 통해 각각의 요소에 접근하여 새로운 값을 주입할 수 있습니다.

 

 

이외에도 정적 메서드를 사용하여 이미 생성되어 있는 배열의 값을 가공하거나 문자열을 배열로 생성하는 등의 경우에 사용될 수 있습니다.

// 배열의 값 가공하기
const arr5 = Array.from([1, 2, 3], (n) => n + n); // [ 2, 4, 6 ]

// 문자열을 배열로 생성하기
const arr6 = Array.from('hello'); // [ 'h', 'e', 'l', 'l', 'o' ]

 

 

오늘은 자바스크립트에서 배열을 생성하는 방법에 대해서 공부했습니다.
자주 사용하지만 fill 함수가 참조값을 주입하는 것인지 몰라 당황해서 새롭게 정리하게 되었습니다.
언제나 잘 알고 사용하도록 열심히 공부합시다-~!