많이 쓰게 될 메소드 Array.from(), 유사배열과 배열

1. 유사배열이란?

DOM요소로 여러개를 가져와서 콘솔에 찍어봤다. className을 work-box라고 가진 div인데 총 3개이다.

배열로 들어와서 콘솔에 찍어볼 수 있다. console.log(workBox[1])이렇게 찍어보면 1번째 요소를 가져올 수도 있다.

여기까진 배열하고 똑같다.

map메소드를 이용해서 요소를 순서대로 하나씩 콘솔에 찍어보려 했는데 map을 사용할 수 없다.

배열은 map을 쓸수 있는데? 

배열처럼 보이지만 사실 key로 숫자를 가지고 있고, length값을 가지고 있는 객체를 유사배열객체라고 한다.

그래서 map, filter, reduce같은 메소드를 사용할 수 없는 것이다.

그럼 내가 손으로 객체에 숫자를 key로 가지고 length값을 가지는 객체를 만들면 유사배열이 되나?

ㅇㅇ 된다. 유사배열처럼 length값을 가지고, for문을 돌수 있지만 map같은 배열메소드는 쓸수 없다.

이렇게 유사배열객체의 정체를 알았다. 

그렇다면 이렇게 애매한 유사배열객체는 왜 있을까??

어떤 함수의 결과로 배열값을 돌려주고 싶을때 사용한다. 또는 원래 배열객체가 가지고 있는 기능을 제공하고 싶지 않거나 배열객체에 없는 기능을 만들어서 제공하고 싶을때 유사배열을 사용한다. 

2. Array.from()

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만든다. 얕게 복사한다는게 무슨말인지 아직은 모르지만, 위에서 알아본 유사배열객체나 Set이나 Map처럼 반복가능한 객체를 새로운 Array로 만들어준다. 즉 Array.from을 통해 map이나 filter같은 배열의 메서드를 사용할 수 있게 만들어 준다.

아까 만들었던 유사배열을 Array로 만들었고 map도 한번 써봤다. 이렇게 해서 유사배열을 배열처럼 사용할 수 있게 된다.

 

오늘 리액트 강의에서 배운 이건 뭘까?

count에는 초기state 3이 들어가 있다. length가 3인 유사배열을 넣어줬고, 키와 값은 비어있다.

어떻게 생겼을까?

신기하게도 length가 3이고 값이 undefined인 배열이 만들어졌다. 

그래서 뒤에 저런게 있구나. v는 값이고 i는 인덱스인데 인덱스를 가져와서 값에 채워넣으라는 뜻이구나.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN