유사배열객체와 이터러블을 정리하기전에. 일반 객체는 이터러블이 아니다!
왜냐하면 일반 객체는 순회가능하지 않기 때문이다. 따라서 일반 객체는 일반적으로 for문은 물론이고
forEach, for...of를 사용할 수 없다. ( for...in만 가능)
하지만 객체 중에서도 배열과 비슷한 속성을 가진 객체가 있는데, 이를 유사배열객체라고 한다.
물론 이것도 이터러블(배열이 포함)은 아니지만, for문은 사용할 수 있다.
1.유사배열객체
유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티값에 접근할 수 있고, length프로퍼티를 갖는 객체를 말한다. 유사배열객체는 length속성이 있어 배열처럼 for문으로 순회할 수도 있다.
const food = {
0: 'candy',
1 : 'snack',
2 : 'noodle',
length : 3,
for(let i = 0 ; i < food.length; i++){
console.log(food[i])
}하지만 유사배열객체는 배열이 아닌 '객체'이기 때문에, 배열 메소드(pop,push...)와 for...of를 사용할 수 없다. 빌트인 객체가 Object이기 때문이다.
대표적으로 볼 수 있는 유사배열 객체의 함수에는 arguments, HTMLCollection, NodeList가 있다.
2. 유사배열객체를 완전 배열로 바꾸는 법 : Array.from
유사배열객체는 배열 속성(length..)를 갖고 있는 객체일 뿐, 배열은 아니다.
Array.from은 이런 <유사배열객체> 그리고 다음에 나올 <이터러블>을 배열로 바꿔주는 역할을 한다. 위에 나온 food를 바꿔보자
const arr = Array.from(food);
console.log(arr);
//["candy","snack","noodle"]위와 같이 Array.from을 사용하면 유사배열객체를 배열로 전직시킬 수 있다! Array.from은 사실 콜백함수를 인자로 받는 고차함수이다.
위와같이 객체만 넣어도 되지만, 콜백함수를 활용할 수도 있다.
const arr = Array.from({length:5} , (_,index)=>{
return index});
console.log(arr); //[0,1,2,3,4]참고로 위 콜백함수에서 인자대신 _를 쓴 것은 그 인자를 생략한다는 뜻이다. 콜백함수의 경우
인자의 위치마다 자리가 정해져 있기 때문에 생략할 때 저렇게 쓴다.
이터러블은 스프레드 문법...으로 쉽게 배열로 변환할 수 있다.
Array.of 와 Array.fill
Array.from을 적은 김에 비슷한 Array메소드도 정리해보자.
Array.of라는 메소드도 array로 바꿔주는 기능을 하는데, ()에 배열로 만들고 싶은 인수를 넣으면 된다.
const arr = Array.of(1,2,3,4,5)
console.log(arr) //[1,2,3,4,5]Array.fill은 배열을 값으로 '채워주는' 메소드이다.
Array.fill(value, start,end)
value의 값을 start인덱스부터 end인덱스 전까지 채워준다.
const Arrfill = Array(5).fill(7,0,3);
console.log(Arrfill);
//[7,7,7,,]
//[7,7,7,<2 empty items>]사용성은 Array.fill이 Array.of 보다 높다. Array.fill은 프론트엔드에서 목데이터(가짜 데이터)를 만들때 자주 사용한다. 이 메소드들은 참고로 알아두자.
const Arrfill2 = Array(10).fill().map((e,index)=>
{return index;});
console.log(Arrfill2);
// //[
// 0, 1, 2, 3, 4,
// 5, 6, 7, 8, 9
// ]
2. 이터러블 객체
이터러블은 순회 가능한이라는 뜻으로, 이터레이션 프로토콜..이라는 것을 준수하는 것을 말한다.
Symbol.iterator라는 Symbol의 메서드로 순회가 가능한 특징이 있다.
이터러블은 for..of문, 스프레드 문법, 배열 디스트럭쳐 할당이 가능하다.
이터러블의 종류는 다음과 같다.
array, String, Map, Set, DOM Collection(NodeList, HTMLCollection)...
이터러블 객체는 for...of문과 forEach 메소드를 사용할 수 있다.
하지만 유사배열 객체는 이터러블이 아니기 때문에, for...of, forEach, 배열 구조 분해 등도 불가능하다.
이터러블 객체의 반복문을 정리하면 다음과 같다.
for문 / forEach / for...in / for...of
주의할 점은, 유사배열객체는 이터러블 객체가 될 수 없는 것처럼 보이지만, arguments, NodeList, HTMLCollection은 유사배열 객체이자, 이터러블이다.
유사배열 객체도 이터레이션 프로토콜을 준수하면 이터러블이 될 수 있다.
참고
https://www.howdy-mj.me/javascript/array-and-array-like-object-and-iterable
