[JS] Array.from을 통한 배열 초기화

배열의 각 인덱스에 1~10까지의 값을 초기화해준다고 했을 때 보통은 아래와 같은 방법을 생각했었다.

 

let arr1=[];

for(let i=1;i<=10;i++) arr1.push(i);

 

그런데 코딩테스트 강의를 듣다보니 Array.from 도 있다는 것을 알게 되었고.. 이에 대해서 알아보기로 했다!

아직도 모르는 것들 투성이..

Array.from()

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.

Array.from(arrayLike[, mapFn[, thisArg]])

 

• arrayLike
  • 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체
• mapFn(Optional)
  • 배열의 모든 요소에 대해 호출할 맵핑 함수
• thisArg(Optional)
  • mapFn 실행 시에 this로 사용할 값
• 반환값: 새로운 Array 인스턴스

설명보다 코드를 보는 게 더 이해가 잘 될듯 하여 여러 예시를 가져와봤다.

 

string에서 배열 만들기

 

Array.from('foo');
// ["f", "o", "o"]

 

배열 형태를 가진 객체(arguments)에서 배열 만들기

 

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);
// [1, 2, 3]

 

Array.from과 화살표 함수 사용하기

 

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

//v는 할당할 value, i는 인덱스
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

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

 

Array.from을 이용하여 빈 배열을 초기화 하는 코드

 

Array.from(
  {length: 20}, //배열
  () => Array(10).fill(0) //각 배열에 적용할 함수
);
// 0으로 초기화된 20*10 짜리 2차원 배열을 리턴