[자바스크립트] 배열을 만들어주는 Array.from() 사용법

Array.from()

Array 오브젝트의 메서드 from()은 유사배열(array-like) 또는 반복 가능 객체(iterable object)를 배열로 만들어준다.

 

문법

Array.from(arrayLike, (element, index) => { ... } )

• 첫번째 인자: 유사배열
• 두번째 인자: 콜백함수 (element, index) => { ... }

유사배열안에 있는 각각의 요소가 element이고 순차적으로 각 element의 index값을 0부터 가지게된다. arrayLike가 문자열 "maple"이라면 element는 "m", "a", "p", "l", "e" 그리고 index는 0, 1, 2, 3, 4다.

 

예제

문자열을 배열로

방법 1: 간단하게 쓰기

const my_name = 'maple';
const text_array = Array.from(my_name);

console.log(text_array);
// ["m", "a", "p", "l", "e"]

방법 2: 풀어서 쓰기

const text_array = Array.from('maple', (element) => { return element });

console.log(text_array);
// ["m", "a", "p", "l", "e"]

문자열의 인덱스값을 배열로

const text_array = Array.from('maple', (element, index) => { return index });

console.log(text_array);
// [0, 1, 2, 3, 4]

첫번째 인자에 속성값 넣기

길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들기

const new_array = Array.from({length: 4}, (element, idx) => { return idx; });

console.log(new_array);
// [0, 1, 2, 3]

 

---

 

Reference

• [스파르타코딩클럽] 리액트 기초반: 자바스크립트 기초(3)
• MDN: Array
• MDN: Array.from()