JavaScript - Array.from() 으로 배열만들기

 

 

Updated 08/22/22

 

Array.from 은 배열이나 객체를 복사해 새로운 Array 를 만든다. 

함수나 컴포넌트 내에서 한번 쓰이고 말 간단한 배열이나 객체를 후딱 만들어 써야 할 때, 자주 사용되는 것 같다.

 

이터러블 객체(for of)과 유사배열은 배열같은 객체이다. 객체이기 때문에 push 나 pop 등의 메소드를 사용할 수 없다.

하지만 이러한 객체들을 배열처럼 사용해야 할 때, → Array.from() 을 사용한다.

그럼 공식문서에 있는 예제 코드를 살펴보면서 Array.from 을 익혀보자.

 

 

이터러블 객체와 유사배열

• 이터러블(iterable) 은 메서드 Symbol.iterator가 구현된 객체이다.
• 유사 배열(array-like) 은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체이다.

 

 

 

---

JavaScript - Array.from() 으로 배열만들기

 Array.from({ 객체: 를 받으면 })  → 요 객체가 이터러블이나 유사 배열인지 확인한다.

 Array.from({ 객체: 를 받으면 },  (요 함수) => 를 통해 )  → 새로운 배열을 만들고, 새롭게 만든 배열로 복사한다.

 

 

 

아주 간단한 배열을 만들때,

첫번째 인자로 { length: __ } 를 넣어주고, 두번째 인자로는 ( value 와 index ) 가 들어가서 => index 만 반환하는 함수를 넣어준다.

// length 가 5 이고, v(value)는 예의상 놔두는 undefined 이고, 실제 i(index)로 배열을 만든다.

Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

 

 

기존 배열을 가공한 새 배열을 만들 때,

첫번째 인자로 [ 기존 배열 ] 을 넣어주고, 두번째 인자로는 ( x를 넣으면 ) = > x + x  가 리턴되는 함수를 넣어준다.

// 배열[1,2,3]을 기반으로 원소를 하나씩 검사해 새 배열을 만든다.

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

 

 

 

 

ref: https://ko.javascript.info/iterable