[TIL]데브코스 프론트엔드 0810

hyojeong·2021년 8월 10일
0

데브코스

목록 보기
7/50
post-thumbnail

📚TIL

day6

이터러블(iterable) & 이터레이터(iterator)

  • 이터러블 : 이터레이터를 리턴하며 Symbol.iterator를 값으로 가진 값
  • 이터레이터 : {value, done} 객체를 리턴하는 next()라는 메서드를 가진 값
  • 이터러블/이터레이터 프로토콜 : 이터러블 for ...of, 전개 연산자 등과 함게 동작하도록한 규약

Array & Set & Map

  • JavaScript 내장객체로 이터러블, 이터레이터 프로토콜을 따르고 있음
  • arr는 key로 접근해서 내부에 쓴 값을 조회할 수 있지만 set은 key값으로 내부 순회 불가능
  • set이 for of문으로 순회가 된다는 것은 일반적인 for문과 전혀 다른 형태의 반복문이라는 것을 알 수 있음
  • Set : value들로 이루어진 컬렉션으로 중복되는 value를 포함할 수 없음
  • Map : key-value pair로 이루어진 컬랙션으로 key를 사용해서 value를 get,set할 수 있음

제너레이터(generator)

  • 이터레이터이자 이터러블을 생성하는 함수로 이터레이터를 리턴함
  • 제너레이터를 통해 쉽게 이터레이터를 만들 수 있음
  • 순회할 값을 문장으로 표현하는 것
  • Javascript에서 제너레이터를 통해서 어떤 값이나 어떤 상태든 순회할 수 있음
function *gen(){	//앞에 *을 붙임
	yield1;
	yield2;
	yield3;
	return 100; 	// {value : 100, done: true}로 출력, 순회에는 포함 X
}

day7

map & filter & reduce

//map 함수
function map(f){
	return function* (iter){
    	for(const a of iter) yield f(a);
    }
}

//filter 함수
function filter(f){
	return function* (iter){
    	for(const a of iter) if(f(a)) yield(a);
    }
}

//reduce 함수
function reduce(f){
	return function (acc, iter){
    	if(!iter){
        	iter = acc[Symbol.iterator]();
            acc = iter.next().value;
        }
        for(const a of iter) acc = f(acc, a);
        return acc;
    }
}

go & pipe

  • go : 즉시 어떤 값을 평가하는데 사용하는 함수로 첫번째 인자는 시작되는 값을 받으며 나머지는 함수를 받음
  • pipe : 함수들이 나열되어 있는 합성된 함수를 만드는 함수이며 함수를 리턴함
go(
  1,
  a + 10,
  a + 100,
  a + 1000,
  log
)

let pipe = () => () => {}	//함수 리턴

const make_pipe = pipe(
	a => a+1,
    a => a-1
);

curry

  • 함수를 값으로 다루면서 받아둔 함수를 원하는 시점에 평가시키는 함수
  • 함수를 받아서 리턴하며 인자를 받아 인자가 원하는 개수만큼 들어왔을 때 받아두었던 함수를 나중에 평가시킴

🌊하루를 마치며

for of가 단순 for문과 같은 방식으로 작동하는 줄 알고 있었는데 이번 강의를 통해서 iterator를 배우면서 완전히 다른 방식의 반복문이라는 것을 알게 됐다. 배열 뿐만 아니라 iterator를 사용할 수 있는 map, filter, reduce함수를 직접 구현해보면서 이론적으로 알고있던 함수가 내부에서 어떤 로직으로 원하는 값을 계산해 주는지도 공부할 수 있었다. 강의를 통해 'curry'를 배웠는데 아직 이 부분을 완전히 이해하지 못했다. 이론적인 부분은 어느정도 이해가 가지만 어떤 방식으로 코딩해야 하는지는 계속해서 사용해보고 이것을 활용한 코드들을 많이 접하면서 배워나가야 할 것 같다. 주말에 'curry'에 대해 더 깊게 공부할 생각이다.

profile
Front-end Develop🥰

0개의 댓글