[TIL] Day-6

yoon Y·2021년 8월 10일

이터러블 프로토콜 일급 함수

데브코스 - TIL

목록 보기

4/19

자바스크립트 함수의 특징과 이터러블, 이터레이터 프로토콜, 제너레이터에 대해 배웠다.
for of문을 마냥 편하기 때문에 써왔는데
오늘 수업을 듣고 for of문과 for문의 차이점을 명확히 알게되었다.

자바스크립트의 함수

일급함수

값으로 사용할 수 있는 함수

변수에 담을 수 있다.
함수의 인자로 사용될 수 있다.
함수의 결과로 사용될 수 있다.

고차함수

함수를 값으로 다루는 함수

함수를 인자로 받아 실행하는 함수
함수를 만들어서 리턴하는 함수 → 클로저를 만들기 위함.

클로저의 의미
1. 리턴되어 사라진, 함수의 내부 변수
2. 사라진 내부 변수를 기억하고 있는 리턴된 함수

ES5와 ES6의 순회 방법

const str = 'abc';

// ES5 - 명령형
for (var i = 0; i < str.length; i++) {
	log(str[i]);
}

// ES6 - 선언형
for (const a of list) {
	log(a);
}

보다 선언적이게 바뀌었다.
가독성 향상보다 더 큰 의미가 있다.

이터러블 / 이터레이블 프로토콜

이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약

기존의 ES5에서 for문 사용 시 인덱스를 key로 하여 값에 순차적으로 접근한다.
이때 array를 제외하고 set, map은 인덱스 값(key)으로 접근되지 않는다.
하지만 for of는 array뿐 아니라 set,map도 순회 가능하다
⇒ ES5와는 다른 접근을 하고 있는 것

Iterable

이터레이터를 반환하는 Object[Symbol.iterator]()를 가진 객체.

SymboI.iterator 란?
객체의 key로 사용된다.
이터레이터를 반환하는 함수를 가리킨다.
Array, Set, Map들은 전부가지고 있기 때문에 이터러블이라고 할 수 있다.

{
    [Symbol.iterator](){
    	return {
           next() {
             return {value: 1, done: true};
           }
        }
    }
}

참고 링크

Iterator

IteratorResultObject객체를 리턴하는 next()를 가진 객체.

{
    next() {
      	return {value: 1, done: false}; // -> IteratorResultObject객체
    } 
}

참고 링크

iterator.next()가 실행될 때마다 IteratorResultObject가 반환된다.

for of는 IteratorResultObject의 value값을
변수에 차례로 담아서 코드를 실행한다. (*인덱스 키로 접근하는 것이 아님)

done: true가 되면 반복문을 빠져나온다.

Generator

이터레이터(이터러블)을 생성하는 함수

순환 값을 직접 만들 수 있음 → yield사용
순회할 값을 직접 만들고 조작 가능
웰폼드 이터러블을 반환

= 어떠한 값이든 직접 만든 값들을 순회할 수 있게 만드는 함수

function *gen() {
  yield 1;
  yield 2;
  yield 3;
  return 100;
}
let iter = gen();
console.log(iter[Symbol.iterator]() == iter); // true
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 100, done: true}

제너레이터의 순환 값을 만들 때 for of문을 사용해 만들 수 있다.

for of로 인해 next()가 반복적으로 실행된다.
yield가 무한히 증가해도 next()가 실행될 때만 차례로 끌어다쓰기 때문에 브라우저에 무리가 가진 않는다.

function *gen(iter) {
  for (const a of iter) yield a;
}

Well-formed Iterator란?

자기 자신을 반환하는 [symbol.iterator]()를 가지고 있는 iterator.

iterator에도 [symbol.iterator]()가 존재하고, 반환 값은 (현재 상태의)자기 자신이다.
그렇기에, iterator도 iterable객체라고 할 수 있다.

왜 가지고 있나?

next()로 순회를 일부 진행했을 때 이후의 값들로 이어서 순회할 수 있다.

non well-formed
이터러블이 진행된 지점을 기억하지 못해 처음부터 Restart
well-formed
이터러블이 진행된 지점을 기억하고 그 지점부터 Restart

[Symbol.iterator]() 를 내장메서드로 가지고 있는 Array, Map, Set, NodeLIst와 제너레이터로 생성한 이터러블 모두 well-formed iterator이다.

const iterable = {
	[Symbol.iterator]() {
    	let i = 3;
      	return {
          next() {
            return i == 0? { done: true }: { value: i--, done: false };
          },
          [Symbol.iterator]() {return this}
       } 
    }
}

참고

1주차 과제에 대한 피드백을 반영해서 오늘 안에 코드를 수정하려고 했는데..

개선해야 할 점들

map()에 대한 지식 부족 size(), keys(), values()

stack에 대한 이해 부족

트리의 노드들의 관계에 대한 이해 부족

변수, 함수의 이름을 의미있게 지어야 함

가독성을 개선해야 함

조건을 잘 알아볼 수 있게

줄일 수 있는 건 최대한 간략하게

예외 처리를 꼼꼼하게 해야 함