[JavaScript] Array.from()

1. Array.from()

▶ 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable)를 배열로 변환하는 메서드.

Array.from()은 실제로 배열의 값이 없는 "가짜 배열"을 만들고, 그 배열의 각 인덱스를 map()처럼 변환할 수 있게 해준다.

첫 번째 인자: 배열의 길이를 설정, 반복 가능한 객체

두 번째 인자: 정의된 함수를 통해 각 요소를 변환 

Array.from({ length: n }, (value, index) => { /* 변환 함수 */ });

❗ { length: n } : 길이가 n인 배열을 생성하겠다

 

 예시: 

let halfLength = 3;
let newArray = Array.from({ length: halfLength }, (_, idx) => idx * 2);
console.log(newArray); // [0, 2, 4]

✏️설명:

• { length: halfLength }는 길이가 halfLength인 가상의 배열을 생성. 여기서 halfLength는 3이므로 { length: 3 }
• Array.from()은 이 객체의 length 속성을 사용해 길이가 3인 배열을 생성. 그 배열의 각 요소는 두 번째 인자인 함수 (value, idx) => idx * 2에 의해 처리 
• 결과적으로 각 인덱스를 2배한 값이 들어간 배열 [0, 2, 4]가 생성 

2. Array.from()의 콜백함수

▶ (_, idx)는 Array.from() 메서드에서 사용되는 콜백 함수의 매개변수

1. Array.from()의 콜백 함수는 기본적으로 두 개의 매개변수를 받는다 : 첫 번째는 배열의 현재 요소의 value(값)이고, 두 번째는 그 요소의 인덱스.

let arr = [10, 20, 30, 40];

let result = Array.from(arr, (_, idx) => idx * 2);
console.log(result); // [0, 2, 4, 6]

let arr = [1, 2, 3, 4];

let result = Array.from(arr, (value, idx) => value * 2);
console.log(result); // [2, 4, 6, 8]

 

2. (_) =  "값을 사용하지 않는다"

: 실제 값(_)을 사용하지 않기 때문에, 값을 받지 않겠다는 의미로 _를 사용. 

▶ (_, idx)는 값은 사용하지 않고, 인덱스만 필요할 때 사용.

이 방식은 함수의 첫 번째 매개변수를 사용하지 않음을 명시적으로 나타내기 위해 사용.
* ▶ (value, _)는 값만 사용하고, 인덱스는 사용 안함.

 예시: 

let Array1 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12],
    [13, 14, 15],
    [16, 17, 18]
];

let halfLength = Array1.length / 2;

let newArray = Array.from({ length: halfLength }, (_, idx) => 
    Array1[idx].concat(Array1[idx + halfLength])
);

console.log(newArray);
/*
0: [1, 2, 3, 10, 11, 12]
1: [4, 5, 6, 13, 14, 15]
2: [7, 8, 9, 16, 17, 18]
*/