ch34-해설.md

Chapter34

📌문제1

true or false, 출력결과물을 작성해주세요.

ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...in문,스프레드 문법,
객체 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다.
- true or false  // (1)

const obj = { 0: 1, 1: 2, length: 2 };
const iter = obj[Symbol.iterator]();
console.log(iter.next());  // (2)
console.log(iter.next());  // (3)
console.log(iter.next());  // (4)

정답 및 해설

(1) false
for...in -> for...of
객체 -> 배열

(2~4) : TypeError: obj[Symbol.iterator] is not a function
일반 객체에는 Symbol.iterator메서드를 구현하거나 상속 받지 않는다.

📌문제2

이터러블,이터레이터,이터러블 이면서 이터레이터를 판단해주세요.

const f1 = (first, max) => {
  let num = first;
  return {
    [Symbol.iterator]() {
      return {
        next() {
          num += 1;
          return { value: num, done: num > max };
        },
      };
    },
  };
};

const test = f1(0, 10);  // (1)

const test1 = test[Symbol.iterator]();  // (2)

const f2 = (first, max) => {
  let num = first;

  return {
    [Symbol.iterator]() {
      return this;
    },
    next() {
      num += 1;
      return { vaule: num, done: num > max };
    },
  };
};

const test3 = f2(0, 10);  // (3)

정답 및 해설

(1): 이터러블
 -> Symbol.iteraor를 키로갖는 메서드를 가지며, 이를 호출했을떄 이터레이터 프로토콜을 따르는 이터레이터를 갖기때문에 이터레이터 프로토콜이란, next라는 이름의 메서드(호출했을떄 {value : _ , done : _ }객체를 리턴)를 갖는 객체를 의미.

 (2): 이터레이터
 -> next라는 이름의 메서드(호출했을떄 {value : _ , done : _ }객체를 리턴)를 갖기 때문에.

 (3): 이터러블이면서 이터레이터
 -> 이터레이터 프로토콜을 따르는 이터레이터를 반환하는 Symbol.iterator를키로하는 메서드를 가지고 있고(이터러블) 동시에 {value: _, done: _ }를 리턴하는 next메서드를 가지고 있기때문.(이터레이터)

📌문제3

이터레이션 프로토콜의 필요성에 대해 설명해보세요.

정답 및 해설

교재 621p
이터레이션 프로토콜은 다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정하여
데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록
데이터 소비자와 데이터 공급자를 연결하는 인터페이스 연결을 한다.

📌문제4

다음 코드의 결과를 쓰시오

const arrayLike = { 
	0 : 1,
	1 : 2,
  	2 : 3,
	length : 3
};
console.log(Symbol.iterator in arrayLike); //(1)
for(const item of obj){ // (2)
	console.log(item);
}

정답 및 해설

(1) false 
유사 배열 객체는 이터러블 객체가 없다. 
(2) TypeError
유사 배열 객체는 for문은 가능하지만, 이터러블 객체가 없기 때문에 for ... of은 불가능하다. 또한 스프레드 문법과 배열 디스트럭처링 할당의 대상이 아니다. 

• p616

📌문제5

5-1. 다음 코드를 무한 이터러블 생성 함수로 바꾸시오.

const addOne = function () {
	let cur = 0;
	const max = 10;
	return {
		[Symbol.iterator]() {return this; },
		next() {
			cur = cur + 1;
			return {value : cur, done: cur >= max};
		}
	};
};

for (const num of addOne()){
	if(num > 100) break;
	console.log(num);
}

정답 및 해설

const addOne = function () {
	let cur = 0;
	return {
		[Symbol.iterator]() {return this; },
		next() {
			cur = cur + 1;
			return {value : cur}; //done 값을 없애준다
		}
	};
};

for (const num of addOne()){
	if(num > 100) break;
	console.log(num);
}

// 무한 이터러블 객체는 끝나는 조건 이 없기 때문에 done 값을 없애주면 된다. 

• p625

5-2. 무한 이터러블은 성능상 문제가 없는가? 문제가 없다면 그 이유는 무엇인지 쓰시오.

정답 및 해설

빌트인 이터러블은 데이터를 공급하는 메커니즘을 구현한 것이기 때문에 
데이터 소비자인 for ... of 문이나 배열 디스트럭서링 할당 등이 실행되기 이전까지 
데이터를 생성하지는 않는다. for ... of의 경우 이터러블을 순회할 때 
내부에서 이터레이터의 next 메서드를 호출하는데 이때 데이터가 생성된다.
이처럼 지연평가를 사용하기 때문에 따라서 불필요한 메모리를 소비하지 않으며
동시에 무한도 표현할 수 있다.

• p626

📌문제6

이터러블과 유사배열 객체의 특성과 차이점을 작성하시오.

정답 및 해설

이터러블
: Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체이다. 따라서 for...of문으로 순회 할 수 있다. 해당 객체의 속성 또는 프로토타입 속성에 `Symbol(Symbol.iterator)` 속성이 있다.
유사배열 객체
: 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체이다. 하지만 Symbol.iterator 메서드가 없기 때문에 for...of문으로 순회 할 수 없다.

📌문제7

다음 보기에 이터러블인지 유사배열 객체인지 둘다인지 판단하시오.

(1) []
(2) new String("123")
(3) new Number(123)
(4) document.querySelector('li')
(5) document.querySelectorAll('li')
(6) {}
(7) { length: 0 }
(8) null
(9) let range = {
      from: 1,
      to: 5,

      [Symbol.iterator]() {
        this.current = this.from;
        return this;
      },

      next() {
        if (this.current <= this.to) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };

정답 및 해설

(1) []
: 이터러블O / 유사배열객체O

(2) new String("123")
: 이터러블O / 유사배열객체O

(3) new Number(123)
: 이터러블X / 유사배열객체X

(4) document.querySelector('li')
: 이터러블X / 유사배열객체X

(5) document.querySelectorAll('li')
: 이터러블O / 유사배열객체O

(6) {}
: 이터러블X / 유사배열객체X

(7) { length: 0 }
: 이터러블X / 유사배열객체O

(8) null
: 이터러블X / 유사배열객체X

(9) range
: 이터러블O / 유사배열객체X

• 🔗타입 체크 - 4. 유사 배열 객체 (poiemaweb 블로그)
• 🔗iterable 객체
• 🔗유사 배열 객체