[노트내용정리] Iterable객체와 유사 배열 객체

📌 Iterable객체 (Iterable Object)

Iterable 객체란 반복 가능한 객체를 의미한다. Iterable 객체에는 'for...of 반복문'을 사용할 수 있다.

 

1. Iterable 객체의 조건

• 이터레이션 [symbol.iterator] 함수를 가져야 한다.
• 오브젝트가 '반복' 할 수 있는 구조여야 한다. (0번부터 순차적으로 와야함)
  ∴ 배열, 혹은 유사배열은 대부분 이터러블 객체이다. (이외에 문자열,Map,Set 등이 있다)

 

symbol.iterator는 'iterator'라는 객체를 반환하는데 이 iterator객체는 다음과 같은 조건을 만족해야한다.

1. next() 라는 메서드를 가진다.

2. next() 메서드는 done과 value객체를 반환한다. {done: Boolean, value: any}

• done: 반복이 모두 끝났는 지를 true or false로 나타낸다. 
• value: 이터레이터에서 반환된 값을 나타낸다.

 

const arr = [1,2,3]

console.dir(arr)

 

결과 )

 

➜  배열로 확인해보면 Symbol.iterator를 반환하는 것을 확인할 수 있다.

 

 

요약하자면..

💡 iterable 객체에 대하여 반복을 수행한다는 것은, 그 iterable 객체의 Symbol.iterator 메서드를 호출하여 iterator 객체를 얻고, 그 iterator 객체의 next() 메소드를 호출하여 요소를 하나씩 꺼내는 것을 의미한다.

 

---

 

📌 유사 배열  객체 (Array-like Object)

원래 배열([ ]) 안에는 같은 형식만 들어가야한다. 그러나 JavaScript에서는 여러 형식을 배열에 넣을 수 있기 때문에 

엄밀히 따지면 배열은 아니지만 배열처럼( [ ] ) 사용하는 객체를 '유사 배열 객체' 라고 부른다.

 

 

어떤 객체라도 배열 안에 들어갔다고 해서 유사 배열로 보지는 않고, 실제 배열처럼 배열의 속성을 가지고 있어야 한다.

• 숫자 값을 가지는 length 프로퍼티를 가지고 있어야 한다.
• 숫자 값 기반의 인덱싱이 가능해야 한다.

➜ 당연히 해당 조건을 만족하는 문자열도 유사 배열 객체이다. (문자열은 iterable객체이기도 함!)

[노트내용정리] 변수의 타입 - 원시타입

참고 - 원시타입 string

 

 

문자열 외에 Document.querySelectorAll() 또는 Element.querySelectorAll() 메서드가 반환하는 NodeList 객체도 유사 배열 객체이다.

대부분의 유사 배열 객체들은 iterable 객체이기도 하다. 하지만 무조건 유사 배열 객체는 iterable 객체라고 이야기 할 수는 없다..!

 

---

 

📌 Array.from() 메소드

유사 배열 객체는 실제 배열은 아니기 때문에 push()와 pop(), forEach(), slice() 등의 배열 메서드를 사용할 수 없다. (이터러블도 마찬가지). 따라서 두 객체를 배열처럼 사용하려면 Array.from() 메소드를 사용해 값만 복사(얕은 복사)된 새로운 배열을 반환할 수 있도록 해야한다.

Array.from(arrayLike, mapFn, thisArg)
// or
Array.from(arrayLike).map(mapFn,thisArg))

• arrayLike: 배열로 반환하고자 하는 객체. 매개변수로 쓴다. (필수)
• mapFn: 배열의 모든 요소에 대해 호츨할 함수. (옵션)
• thisArg: mapFn 실행 시에 this로 사용할 값. (옵션)

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

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

 

---

 

📌 for~of 

• [Symbol.iterator] 속성을 가지고 있어야만 한다. (직접 명시도 가능)
• ES6에서 도입된 새로운 반복문. iterable객체의 값을 순회하는데 사용되는 반복문이다.
• 배열의 요소를 직접 순회하므로 인덱스가 필요하지 않다.
• break, continue, return 키워드를 사용해 반복문의 흐름을 제어할 수 있다.

// 문법
for (변수 of 배열) {
    반복동작부분
}


const fruits = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
  console.log(fruit);
}    
// 결과
// apple
// banana
// orange

 

 

 

이터러블 유사배열 참고 - https://ko.javascript.info/iterable

Array.from() 참고 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

for~of 참고 - https://bigtop.tistory.com/59