[TIL] Array.from(배열형변환)-ES6

JS의 기본을 단단히 하고자 '코어 자바스크립트' 도서를 읽고 있다.
'실행컨텍스트'나 'THIS' 개념 정리도 필요하지만 머릿속에 완전한 정립이 되지 않아 한번 더 정독한 뒤에 블로그 작성 예정이다.

그에 앞서, 새로 알게 된 'Array.from' 메서드 에 대해 기록해보겠다.

1. 개념

ES6문법에 도입된 메서드로 유사배열객체 또는 반복 가능한 모든 종류의 데이터 타입을 배열로 전환해준다.

Array.from(iterable obj, mapFn, thisValue)

1. iterable obj - essential
   → 배열로 변환 할 객체

2. mapFun - optional
   → 변환될 배열의 모든 요소에 호출될 콜백함수

3. 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하기 때문에, 데이터 가공이 필요할 때 사용할 수 있다.

참고

mdn
PerlPark