배열 초기값을 설정 방법과 대괄호 [] 로 초기화를 해야하는 이유

포스팅 목적

JavaScript 배열 초기값을 설정하는 방법과 초기화시에 new Array() 보다 [] 을 사용해야 하는 이유를 알아봅니다.

 

배열 초기화 방법

1. for 문

const arr = [];

for(let i = 0; i < 5; i++){
	arr.push(i);
}

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

2. Array.from()

const arr = Array.from({length : 5}, () => 0);
console.log(arr); // [0, 0, 0, 0, 0]

const arr = Array.from({length: 5}, (v, index) => index); // 이때 v는 undefined
console.log(arr); // [0, 1, 2, 3, 4]

3. Array.fill()

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

4. Array.map()

const arr = [...new Array(5)].map((v, index) => index);
console.log(arr); // [0, 1, 2, 3, 4]

 

그래서 어떤걸 쓰면 되는데?

실행시간도 빠른편이고 코드 길이도 짧고 (나에게) 익숙한 Array.fill 을 사용하는 것이 좋을 것 같습니다.

 

new Array() 보다 [] 을 사용해야 하는 이유

• 인자를 전달하지 않는 경우에는 동일하게 동작하지만 코드의 길이가 짧고 더 직관적입니다.
• new Array()에 인자값을 1개 전달하는 경우 값이 Number 인지 여부에 따라 다르게 동작합니다.

 

const a = new Array("3") // ["3"]
const b = new Array(3) // [empty x 3]
const c = ["3"] // ["3"]
const d = [3] // [3]

간단하게 선언을 할 경우에는 상관이 없지만 계산 결과를 변수로 받아서 Array 를 선언하는 경우에는 주의가 필요해 보입니다.

 

참고 자료

• Most efficient way to create a zero filled JavaScript array?
• [javascript] 배열 초기화
• [Javascript] 배열 초기화 시 new Array()보다는 []를 사용하자