자바스크립트 배열 초기화

jplendor·2022년 8월 11일

🎈 0, 1, 2, 3, 4 ... 증가하는 값으로 초기화하기

1) for 반복문 이용하기

let arr = [];
let length = 5;

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

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

2) Array() 생성자 + Array.prototype.map() 이용하기

let length = 5;
let arr = new Array(length);

arr = [...arr].map((value, index) => index);

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

✨ arr.map이 아닌 [...arr].map을 한 이유

let arr = new Array(5);
console.log(arr) // [ <5 empty items> ]
                 // 이렇게 생성한 배열은 arrayLength 만큼의 빈 슬롯을 가지는 것으로, 실제 undefined를 채우는 것이 아닙니다.

console.log([...arr]) // [ undefined, undefined, undefined, undefined, undefined ]

3) Array.from() 이용하기

let arr = Array.from({ length: 5 }, (v, i) => i);

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

✨ Array.from()
유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

[구문] Array.from(arrayLike[, mapFn[, thisArg]])

✨ {length: n}가 뭘까?
길이 n의 유사 배열 객체를 생성

let arr = Array.from({ length: 5 });
console.log(arr); // [ undefined, undefined, undefined, undefined, undefined ]

⏱ 소요 시간 비교

	방법	소요 시간
1	for 반복문 이용하기	0.105 seconds
2	Array() 생성자 + Array.prototype.map() 이용하기	0.104 seconds
3	Array.from() 이용하기	0.101 seconds

🎈 0, 0, 0, 0, 0 ... 동일한 값으로 초기화하기

1) for 반복문 이용하기

let arr = [];
let length = 5;

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

console.log(arr); // [ 0, 0, 0, 0, 0 ]

2) Array() 생성자 + Array.prototype.map() 이용하기

let length = 5;
let arr = new Array(length);

arr = [...arr].map((value, index) => 0);

console.log(arr); // [ 0, 0, 0, 0, 0 ]

3) Array.from() 이용하기

let arr = Array.from({ length: 5 }, (v, i) => 0);

console.log(arr); // [ 0, 0, 0, 0, 0 ]

4) Array() 생성자 + Array.prototype.fill() 이용하기

let length = 5;
let arr = new Array(length);

arr = arr.fill(0);

console.log(arr); // [ 0, 0, 0, 0, 0 ]

⏱ 소요 시간 비교

	방법	소요 시간
1	for 반복문 이용하기	0.107 seconds
2	Array() 생성자 + Array.prototype.map() 이용하기	0.115 seconds
3	Array.from() 이용하기	0.105 seconds
4	Array() 생성자 + Array.prototype.map() 이용하기	0.114 seconds