배열 생성 심화: Array / Array.of / Array.from

 

Array()

사용 예시

// (1) 빈 배열 생성
const emptyArray = Array();
console.log(emptyArray); // []

// (2) 길이만 지정해 배열 생성
const arr2 = Array(5);
console.log(arr);        // [ , , , , ] (길이 5의 빈 슬롯 배열)
console.log(arr.length); // 5

// (3) 초기값을 가진 배열 생성
const arr3 = Array(1, 2, 3);
console.log(arr);        // [1, 2, 3]

 

문제점

console.log(Array(3));     // [ , , ] (길이 3의 빈 슬롯 배열)
console.log(Array(3, 5));  // [3, 5]

• 인자가 하나면 길이 n의 빈 배열을 생성
• 인자가 여러 개면 배열 요소로 사용

이러한 비일관성 때문에 `Array.of()`가 등장했습니다.

 

배열 초기화(빈 슬롯 처리)

`Array(n)`로 생성한 빈 슬롯 배열은 `map`으로 직접 초기화되지 않습니다.

const arr = Array(5).map((_, i) => i);  // 작동하지 않음
console.log(arr);                       // [ , , , , ] (그대로)

해결법으로 `fill`을 사용합니다.

const arr = Array(5).fill(0).map((_, i) => i);
console.log(arr);  // [0, 1, 2, 3, 4]

 

Array()를 사용하는 시점

• `Array()` 자체는 기본적인 배열 생성자로 여전히 사용됨
• 하지만 명확성이 중요한 경우 `Array.of()` 또는 `Array.from()`을 사용함

Array() 사용 적합 예시

// (1) 배열의 길이를 명시적으로 지정하고 초기화할 때
const arr = Array(5).fill(0);

// (2) 전개 연산자(...)와 함께 사용해 배열을 복사하거나 병합할 때
const arr1 = [1, 2, 3];
const arr2 = Array(...arr1);  // [1, 2, 3]

Array() 대신 Array.of() 권장

const arr = Array.of(5);  // [5] (5라는 요소를 가진 배열)

 

---

Array.of()

`Array.of`는 ES6에서 도입된 메서드로, 전달된 인수를 사용해 새로운 배열을 생성합니다. `Array` 생성자와 유사하지만, 매개변수의 개수에 따른 동작 차이를 해결하기 위해 만들어졌습니다.

 

사용 예시

// (1) 빈 배열 생성
const emptyArray = Array.of();
console.log(emptyArray);  // []

// (2) 인자 여러 개
const array = Array.of(1, 2, 3);
console.log(array);       // [1, 2, 3]

// (3) 인자 한 개
const oneElement = Array.of(7);
console.log(oneElement);  // [7]

// (4) 여러 타입의 요소
const mixedArray = Array.of(1, 'hello', true, null);
console.log(mixedArray);  // [1, 'hello', true, null]

 

동작 방식

항상 인수의 개수에 상관없이 배열을 생성하고, 전달된 인수를 그대로 요소로 추가합니다.

 

활용 사례

유사 배열을 배열로 변환

function convertToArray() {
    return Array.of(...arguments);
}

console.log(convertToArray(4, 5, 6));  // [4, 5, 6]

DOM 요소 배열화

const divs = document.querySelectorAll('div');
const array = Array.of(...divs);
console.log(array);  // [div, div, div, ...]

`NodeList`는 유사 배열이므로 `Array.of(...divs)`를 사용해 배열로 변환할 수 있습니다.

 

---

Array.from()

`Array.from()`은 ES6에서 도입된 메서드로, 유사 배열 객체(array-like objects)나 반복 가능한 객체(iterable)를 새로운 배열로 변환하는 데 사용됩니다. 매우 유연하고 다양한 상황에서 활용됩니다.

 

기본 문법

Array.from(arrayLike, mapFn, thisArg)

• `arrayLike` : 배열처럼 보이지만 실제 배열이 아닌 객체(유사 배열 객체) 또는 반복 가능한 객체
• `mapFn` (Optional) : 각 요소에 적용할 매핑 함수(배열의 `map`과 유사)
• `thisArg` (Optional) : 매핑 함수에서 `this`로 사용할 값

 

주요 사용 사례

유사 배열 객체를 배열로 변환

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);
console.log(array);  // ['a', 'b', 'c']

문자열을 배열로 변환

const str = 'hello';
const array = Array.from(str);
console.log(array);  // ['h', 'e', 'l', 'l', 'o']

Set을 배열로 변환

const set = new Set([1, 2, 3, 3]);
const array = Array.from(set);
console.log(array);  // [1, 2, 3]

Map의 키/값을 배열로 변환

const map = new Map([[1, 'one'], [2, 'two']]);
const keys = Array.from(map.keys());
const values = Array.from(map.values());
console.log(keys);   // [1, 2]
console.log(values); // ['one', 'two']

NodeList (HTMLCollection)을 배열로 변환(DOM 요소)

const divs = document.querySelectorAll('div');
const array = Array.from(divs);
console.log(array);  // [div, div, div...]

`mapFn`으로 배열 초기화 및 변환

const array = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(array);  // [0, 2, 4, 6, 8]

• `(_, i)`에서 `_`는 값(사용되지 않음), `i`는 인덱스입니다.

숫자 범위 배열 생성

const start = 1;
const end = 5;
const range = Array.from({ length: end - start + 1 }, (_, i) => start + i);
console.log(range);  // [1, 2, 3, 4, 5]

중복 제거 및 필터링

const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = Array.from(new Set(numbers));
console.log(unique);  // [1, 2, 3, 4, 5]

복잡한 배열 매핑

const array = Array.from({ length: 10 }, (_, i) => ({
    index: i,
    value: i * 10
}));
console.log(array);
/* 
[
  { index: 0, value: 0 },
  { index: 1, value: 10 },
  { index: 2, value: 20 },
  ...
]
*/