🦎[딥다이브 스터디] 34장. 이터러블

수연

1. 기존의 순회 가능한 데이터 타입의 어떠한 점들을 개선하기 위해서 이터레이션 프로토콜을 도입했는지 설명해보시오.

-> es6 이전의 순회가능한 데이터 컬렉션(배열, 문자열, 유사배열객체, dom 등은 통일된 규약 없이 각자 나름의 구조를 가지고 다양한 방법으로 순회할 수 있었다. es6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 할당의 대상으로 사용할 수 있도록 일원화했다.

만약, 다양한 데이터 공급자가 각자의 순회 방식을 갖는다면 데이터 소비자는 다양한 데이터 공급자의 순회방식을 모두 지원해야한다. 이는 효율적이지 않다. 하지만 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정하면 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 된다.

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

2. 아래와 같은 데이터 구조를 무엇이라고 부르는지 설명하고 for...of문으로 순회를 할 수 있도록 변환해보시오.

const testData = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}

//풀이
//Array.from 으로 유사배열 객체 또는 이터러블을 배열로 변환한다. 
const arr = Array.from(arrayLike);
console.log(arr);

3. 이터러블의 개념을 사용하여 무한 피보나치 수열을 생성하는 함수를 만들고 이러한 형태로 함수를 구현하고 사용했을 때 얻을 수 있는 효과를 설명하시오.

const fibonacciFunc = function() {

	let [pre, cur] = [0,1];
	
	return {
		[Symbol.iterator](){return this;}
		next(){
			[pre, cur] = [cur, pre+ cur];
			return {value: cur};
			}
		};
	};

for (const num of fibonacciFunc()){
	if(num > 10000) break;
	console.log(num);
}

//3개 요소만 취득 
const [f1, f2, f3] = fibonacciFunc();
console.log(f1,f2,f3) 

-> 이터러블은 데이터 공급자의 역할을 한다. 배열이나 문자열등은 모든 데이터를 미리 확보한 다음 데이터를 공급한다. 위 예제는 이터러블은 지연평가를 통해 데이터를 생성한다. 즉 데이터가 필요한 시점에 생성하는 기법이다.

-> for of 문의 경우, 이터러블을 순회할 때 내부에서 Next 메서드를 순회하는데, 바로 이때 데이터가 생성된다. 이런 지연평가를 사용하면 빠른실행속도를 기대할 수 있고, 불필요한 메모리를 소비하지 않으며 무한도 표현할 수 있다는 장점이 있다.

지영

1. 이터러블인지 확인하는 함수를 구현하시오.

const isIterable = v => {
  //구현하기
  return v !== null && typeof v[Symbol.iterator] === 'function';
}

isIterable([]); //true
isIterable(""); //true

2. 다음 함수를, 이터러블이면서 동시에 이터레이터인 객체를 생성하여 반환하는 함수로 변경해보시오.

const fibonacci = function() {
	[Symbol.iterator]() {
		let [pre, cur] = [0,1]; 
		const max = 10;

		return {
			next() {
				[pre, cur] = [cur, pre + cur];
				return {value : cur, done: cur >= max };
			}
		}
	}
}

for (const num of fibonacci){
	console.log(num);
}

//여기에 구현해 주세요! 
  let [pre, cur] = [0, 1];
  const max = 10;
// 객체 자체를 리턴.. 
  return {
    [Symbol.iterator]() { return this; },
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur, done: cur >= max };
    }
  }
}

이 경우엔 이터러블 자체를 반환한다. value값을 외부에서 변경할 수 있음.

이 경우에는 max 가 고정이다. fibonacci2 가 하나의 이터러블 객체 그 자체.