Section 10. 이터러블과 제너레이터

1. set

중복되지 않는 값들의 집합
배열과 비슷한 것
차이는
동일한 값 ❌ -> 중복된 요소가 있다면 중복된 요소 제거
값들의 순서 의미 ❌

// Set 생성
const set1 = new Set();
// 요소 추가 - add 메서드
// has 메서드(요소 포함여부), delete 메서드 등등

메서드 체이닝 ⭕

근데 메서드 체이닝이 뭐였지??
일단은 메서드를 반복적으로 호출하는 것이라고 생각하자.

이터러블로서의 Set ⭕
for ...of, 스프레이드, 디스터럭쳐링

근데 이터러블(반복가능한, iterable)이 뭐였지??
배열을 일반화한 객체라고 생각하자.

2. Map

map 종종 사용했던 표준 내장 객체인데? (사실 표준 내장 객체라는 용어는 몰랐음.) 자세히 봐야겠다~

키와 값의 쌍으로 이루어진 컬렉션
객체와의 차이
이터러블로 사용 ⭕
키와 값을 보다 자주 변경하는 경우 적합 등등

// Map 생성
const map1 = new Map();

// set 메서드
map1.set('x', 1);
map1.set(123, 'ABC);

// 배열로 생성 + 초기화
const map2 = new Map([
	['x', 1],
  	[true, { a: 1, b:2}],
]);

// get 메서드 - 값에 접근
console.log(map2.get('x'); // 1
            
// 참조값도 키로 사용 가능
const objkey = { x: 1, y:2 };
map2.set(objKey, 'OBJ_KEY');

// size 프로퍼티, keys. values, entries 메서드, clear 메서드

메서드 체이닝 ⭕

이터러블로서의 Set ⭕
for ...of, 스프레이드, 디스터럭쳐링

출처
[제대로 파는 자바스크립트(JavaScript) - by 얄코], [강의링크]

3. 이터러블

이터러블 프로토콜

• 반복, 순회 기능을 사용하는 주체간의 통일된 규격
• 이터러블 프로톨콜을 준수하는 객체: 배열, 문자열, Set, Map, arguments 등...

이터러블이란 키 Symbol.iterator의 값으로 이터레이터를 반환하는 메서드를 가진 것 -> 이터러블 프로톨콜을 준수하는 객체

이터레이터가 뭐였지..?

console.log(
  [][Symbol.iterator],
  new Map()[Symbol.iterator],
  (1)[Symbol.iterator]  // undefined 다른 타입의 인스턴스에는 없음
);

// 실행시 이터레이터 반환 
// 힛 무슨 말이지.. ? 
console.log(
  [][Symbol.iterator](),
  new Map()[Symbol.iterator]()
);

이터레이터가 아직 뭔지 잘 모르겠는데
next 메서드를 통해 이터러블을 순회하며 값을 반환한대

value - 해당 차례에 반환할 값
done - 순회 종료 여부

이터러블을 여기서 만들어보기 하는데!
오~ . . .다음에 보겠습니다...

// 예제 코드 중에 주사위 하나만 가지고 옴
const diceTenTimes = {
  // ⭐️ 아래의 메서드를 갖는 것이 이터러블 프로토콜
  [Symbol.iterator] () {
    let count = 0;
    let maxCount = 10;
    // ⭐️ 이터레이터(next 메서드를 가진 객체)을 반환
    return {
      next () {
        return {
          value: Math.ceil(Math.random() * 6),
          done: count++ >= maxCount
        }
      }
    }
  }
}
const diceIterator = diceTenTimes[Symbol.iterator]();
for (let i = 0; i < 12; i++) {
  console.log(
    diceIterator.next()
  );
}
// for ... of문, 스프레드 문법, 배열 디스터럭쳐링 사용 가능

4. 제너레이터

• 함수 내 코드들을 모두 실행하지 않고 외부 호출자에게 제어권을 양도

function* genFunction () {
  console.log('나이를 알려줍니다.');
  yield '22';
  
  console.log('이름을 알려줍니다.');
  yield '백세희';
}

const genFunc = genFunction();

console.log( genFunc.next()); 코드가 제어건을 가짐

next 메서드를 실행하면 다음 yield까지 실행 후 중지
value - yield의 값
끝까지 실행 후:

이터러블과 이터레이터를 대체할 때 더 간결한 코드가 됨

// 앞서 이터러블의 주사 코드를 제너레이터로!
function* diceTenTimes () {
  let count = 0;
  const maxCount = 10;

  while (count++ < maxCount) {
    yield Math.ceil(Math.random() * 6);
  }
}
// 이터러블
console.log(
  [...diceTenTimes()]
);
// 이터레이터 - 객체로 반환 뒤 사용
// ⚠️ 다시 순회시 재생성 필요
let diceGenObj = diceTenTimes();

for (let i = 0; i < 12; i++) {
  console.log(diceGenObj.next());
}

Set과 Map은 기본이라고 생각한다.
아직 기본을 깨우치지 못함 주의.
그래도 컬렉션이라는 사실을 알았다! 정의가 깔끔하다.

이터러블과 제너레이터
머리를 아프게 하는 개념이다.
이런 개념과 개념을 바탕으로 만든 코드까지 머리 아프지 않고 이해하는 수준은 아직 아니다.
점점 배울수록 개념을 까먹고 헷갈리고 하는데 반복해야겠다.

출처
[제대로 파는 자바스크립트(JavaScript) - by 얄코], [강의링크]