JS의 기본을 단단히 하고자 '코어 자바스크립트' 도서를 읽고 있다.
'실행컨텍스트'나 'THIS' 개념 정리도 필요하지만 머릿속에 완전한 정립이 되지 않아 한번 더 정독한 뒤에 블로그 작성 예정이다.
그에 앞서, 새로 알게 된 'Array.from' 메서드 에 대해 기록해보겠다.
1. 개념
ES6문법에 도입된 메서드로 유사배열객체 또는 반복 가능한 모든 종류의 데이터 타입을 배열로 전환해준다.
Array.from(iterable obj, mapFn, thisValue)
-
iterable obj - essential
→ 배열로 변환 할 객체 -
mapFun - optional
→ 변환될 배열의 모든 요소에 호출될 콜백함수 -
thisValue - optional
→ mapFn 실행 시, this로 바인딩 되어 사용할 값
iterable obj는 length가 존재하는 객체로 obj[1], obj[2]와 같이 접근이 가능하지만 배열이 아니기 때문에 obj.push(), obj.pop() 혹은 obj.sort() 로 활용이 불가능하다.
따라서, 순회가 가능한 객체의 배열화가 필요할 때 활용할 때 좋고 사용방법은 다음과 같다.
2. 예시
const test1 = Array.from({length : 3}, (val, idx) ⇒ val)
console.log(test1) // expected : [undefined, undefined, undefined]- 첫번째 인자로 value는 없고, length만 존재하는 이터러블 데이터를 변환할 객체로 전달한다.
- 두번째 인자로 mapFn함수의 콜백형태(ex : map((el, index, array)⇒){})를 정의하고, 각각의 요소를 지칭하는 val/순서를 나타내는 idx ; 2개의 인자를 세팅한 뒤 요소(val)를 콜백함수의 return값으로 써주면 총 3개의 undefined 이 존재하는 Array배열이 된다.
- 그 이유는 첫번째 인자(length:3)는 순회가 가능하지만, value값이 존재하지 않기 때문에 총 3번을 순회하여 undefined 를 return한다.
const test2 = Array.from({length : 3}, (val, idx) ⇒ idx)
console.log(test2) // expected : [0, 1, 2]- 위의 예시와 다르게 각 요소의 순서를 나타내는 idx 를 콜백함수의 return값으로 전달한다.
- value값과 별개로(첫번째 인자인 length:3은 여전히 value가 없음) index를 0부터 return 한다.
const test3 = Array.from(new Map([[1,3], [2,4], [3,5]]))
console.log(test3) // expected : [[1,3], [2,4], [3,5]]]- 객체의 배열화뿐만 아니라 배열의 배열화도 가능하다.
- Array.from() 메서드는 데이터를 복사하여 형태가 동일한 또 다른 배열을 return하기 때문에, 데이터 가공이 필요할 때 사용할 수 있다.
참고
violet's development note