[JavaScript] Array.from

클로저에 관해 공부를 하다가 예제에서 Array.from 이라는 코드를 알게되었다.

 

공부도 하고 복습도 하고 정리도 할겸 포스팅을 해보려고한다.

 

Array.from(
	{length : 20},
    () => Array(10).fill(0)
);

대충 20x10 짜리 2차원 배열을 리턴하겠구나 정도는 파악 할 수 있었지만 생소한 표현법이라

어떻게 동작하는지 한번 알아보자

 

Array.from 은 유사 배열 객체를 배열로 바꾸는 데 자주 사용했었다. MDN에서 나와있는 예시로는 다음과 같다.

1.
Array.from('Tei');
// ['T','e','i']

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

1번의 예시는 눈에 익는 예시이다. 문자열을 인자로 받아 이를 배열로 반환해주고 있다.

 

2번의 예시가 이번 포스팅의 주제라고 할 수 있다.

 

자바스크립트 배열의 length

Array.from(
  {length: 20}, // 유사배열
  () => Array(10).fill(0) // 각각의 배열에 적용할 함수
);

{length : 20} 이 유사배열로 인식되고 각각의 요소에 10개만큼 0으로 태워주고 있다는 사실을 알 수 있다.

 

그렇다면 {length : 20} 는 왜 유사배열일까? {} 로 감싸져있는건 객체라고 생각 할 수도 있지만 자바스크립트 배열의 구조를 본다면 쉽게 알 수 있다.

 

자바스크립트에서 배열은 'object' 이다. object가 배열인 것은 아니지만 object 의 __proto__ 는 object.prototyep 이고

배열의 __proto__ 는 array.prototype 이다. 

 

그럼 배열은 사실 length 라는 속성을 가진 object 이고 반대로 object에 length 속성을 넣어주면 마치 배열처럼 인식이 된다는 것이다.

 

 

밑의 사진을 보면 length 속성을 추가한 객체 의 프로토타입이 Array가 아닌걸 알 수 있다.

즉 object가 배열과 같다는 이야기는 아니다.

 

 

결론!

• 자바스크립트에서 배열은 object 이다
• object 에 Array 메소드들과 iterator, length 속성을 넣어준것이 배열이다
• object가 배열과 같다는 말은 아니다.
• Array.from 은 유사 배열을 배열로 만들어주는 메소드이고, 두번째 인자로 각각의 유사배열에 전달할 함수를 넘길 수 있다.
• 그렇기때문에 Array.from의 첫번째 인자로 {length:20} 같은것을 건내준다면 길이 20짜리 배열로 인식하여 위의 코드가 잘 동작한다.

사용예제 

 

- 길이 5에 모든 인덱스가 1을 원소로 갖고있는 배열

const arr = Array.from({length : 5} , () => 1 );

- 콜백함수를 지정해주지 않으면 모든 원소는 undefined

const arr = Array.from({length : 5});

- 0부터 순차적으로 증가하는 원소를 갖게 하기

const arr = Array.from({length : 5}, (v , i) => i);

* v는 value i는 index 고로 현 코드에서 v는 undefined

 

- String을 배열로 만들기

 const arr = Array.from('dongs');
 			||
 const arr = 'dongs'.split('');