알고리즘 공부를 하다 알게 된 생소한 아이가 있다
그것은 바로 array.from !! (array는 배우면 배울수록 뭐가 너무 많다 .. 그래서 더 재밌는거일지도? ㅎㅎㅎ)
아무튼!! 이 아이가 무엇인가..
mdn에 따르면 순회 가능(iterator) 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성한다고 한다.
💡 유사 배열 객체? 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 뜻한다.
사실 이것만 보고는 무슨 말인지 잘 .. 이해가 안된다 ...
예시를 살펴보자.
console.log(Array.from('foo'));이렇게 하면 console에는 ["f", "o", o"] 라고 찍힐 것이다.
즉, string을 array형태로 생성한 것이다.
구문은 다음과 같다.
Array.from(arrayLike)
Array.from(arrayLike,mapFn)
Array.from(arrayLike, mapFn, thisArg)
arrayLike: 배열로 변환할 객체
mapFn (option): 배열의 모든 요소에 대해 호출할 함수다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, mapFn의 반환 값이 대신 배열에 추가된다.
- 이 함수는 다음 인수를 사용해 호출된다.
- element: 배열에서 처리 중인 현재 요소
- index: 배열에서 처리 중인 현재 요소의 인덱스
thisArg(option): mapFn 실행 시 this로 사용할 값
역시 이해가 잘 되지 않는다.
예시를 봐보자. 내가 익숙한 for문을 활용한 반복문과, 배열에 추가하는 push 메서드가 있다.
const arr = [];
for(let i=1; i<=10; i++) {
arr.push(i);
}
console.log(arr);이와 같은 반복문을 Array.from으로 바꾸어 보자면
// 첫 번째 인자 언더스코어(_)는 불필요한 인자의 공간 채우기 위한 용도.
const arr = Array.from(Array(10), (_, index) => index + 1);
console.log(arr)이제야 이해가 된다!!
그렇다면 이제 내가 푼 알고리즘 문제를 봐보자.
난 이 문제를 처음에 다음과 같이 풀었다.
function solution(start_num, end_num) {
var answer = [];
for(i = start_num; i<=end_num; i++){
answer.push(i)
}
return answer;
}하지만 Array.from을 활용해 푼다면??
function solution(start_num, end_num) {
return Array.from({ length: end_num - start_num + 1 }, (_, i) => start_num + i);
}이렇게 풀 수 있다!!
좀 더 설명을 해보겠다.
{ length: end_num - start_num + 1 }
우선 { length: end_num - start_num + 1 }은 객체다.
(* 참고로 js에서 배열은 object이다. 그렇지만 배열 != object 참고글)
이 객체는 'length' 속성을 가지고 있고,
그 값은 'end_num - start_num + 1' 이다.
우리가 만들고자 하는 배열의 길이를 나타내는 것이다.
Array.from은 이 객체를 받아서 해당 길이를 가진 배열을 생성한다.
만약 start_num이 3이고, end_num이 10이라면 10 - 3 + 1의 8인 배열이 생성된다.
( _ ,i) => start_num + 1
이 부분을 좀 더 구체적으로 봐보자.
( _ , i)는 화살표 함수의 매개변수다. Array.from은 이 매개변수를 사용해 새 배열의 각 요소를 어떻게 생성할지 결정한다. 이때 _는 사용하지 않는 매개변수다.
start_num + i는 새 배열의 각 요소를 정의한다. 예를 들어 start_num이 3이라면, 'start_num + 0, start_num + 1, start_num + 2, ... 이렇게 증가하면서 배열의 요소를 채운다.
만약 solution(3, 10)을 호출한다면?
Array.from({ length: 10 - 3 + 1 })는 { length: 8 }와 같다.
Array.from({ length: 8 }, ( _, i) => 3 + i)는 [3, 4, 5, 6, 7, 8, 9, 10]을 생성한다.
참고
