TIL Day-6

함수형 프로그래밍과 ES6+

DOM

자바스크립트가 탄생하면서 함께 등장
HTML 문서와 상호작용하며 직접 수정이 가능
Tree구조 (문서노드, 요소노드, 속성노드, 텍스트노드)

DOM 선택

• getElementById
• getElementByClassName
• getElementByTagName : 리스트로 반환
• querySeletor : CSS Selector 문법으로 찾음, 제일 먼저 찾은 요소 하나 반환
• querySeletorAll
• window.[id] : id가 있는 요소는 window객체를 통해 찾음, 여러개라면 리스트로 반환

DOM 탐색

• parentNode
• firstElementNode
• children
• nextElementSibling
• previousElementSibling

DOM 선택

• class 접근
• hasAttribute : 속성을 가지고 있는지 확인
• getAttribute : 속성의 값 반환
• setAttribute : 속성을 정의
• removeAttribute
• textContent : 선택한 요소 노드에서 텍스트 노트에 접근, 변경
• innerHTML : 선택한 요소 내부 HTML을 수정, XSS위험
• createElement
• appendChild : 선택한 요소 마지막 자식 요소로 추가
• removeChild
  
  

---

함수형 자바스크립트 기본기

평가
코드가 계산되어 값을 만드는 것

일급
값으로 사용
변수로 사용
함수의 인자로 사용
함수의 결과로 사용

일급 함수
자바스크립트에서 함수는 일급
변수를 함수의 값으로 사용

const add5 = a => a + 5;
console.log(add5); // a => a + 5
console.log(add5(5)); //10

조합성과 추상화의 도구

const f1 = () => () => 1;
console.log(f1()); // () => 1, 함수의 결과가 함수

const f2 = f1();
console.log(f2); // () => 1
console.log(f2()); // 1

고차 함수
고차 함수는 함수가 값으로 다뤄질 수 있다는 점을 이용

• 함수를 인자로 받아서 실행하는 함수
• 함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)
  
  

순회와 이터러블: 이터레이터 프로토콜
ES5

const list = [1, 2, 3];
for (var i = 0; i < list.length; i++) {
  console.log(list[i]);
}     

ES6

for (const a of list) {
  console.log(a);
}

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

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

well-formed 이터러블
이터레이터도 이터러블이 되도록 만들기
next()로 순회를 일부 진행했을 때 이후의 값들로 이어서 순회
이터레이터가 자기 자신을 반환하는 Symbol.iterator()를 가져야 함

• Array

const arr = [1, 2, 3];
for (const a of list) console.log(a);
// 1
// 2
// 3

arr[Symbol.iterator] // f values() { [native code] }

let iterator = arr[Symbol.iterator](); // undefined

iterator.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
iterator.next() // {value: undefined, done: true}

첫 줄의 for...of문을 보면 value에 들어오는 값을 a에 담아서 출력을 반복하다가,
done이 true가 되면 for...of문에서 빠져나옴

• Set

const set = new Set([1, 2, 3]);
for (const a of set) console.log(a);
// 1
// 2
// 3

콘솔에 set[0], set[1]등을 입력해보면 undefined가 출력
Set이 숫자로 접근할 수 있는 값이 없지만,
이터러블프로토콜을 따르고 있기 때문에 이터러블프로토콜을 따르는 for...of 문과 함께 동작

• Map

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map) console.log(a);
// (2) ["a", 1]
// (2) ["b", 2]
// (2) ["c", 3]

콘솔에 map.keys(); 하면 Map{"a", "b", "c"}가 출력
a.next()하면 value: 에 키만 남는다

for (const a of map.keys()) console.log(a);
// keys함수는 이터레이터함수만 리턴하여 키만 뽑음
// a
// b 
// c

key() 키만 출력
value() 벨류만 출력
entries() 키와 벨류 출력

전개 연산자
전개 연산자도 이터레이터 프로토콜을 따름

제너레이터

이터레이터이자 이터러블을 생성하는 함수
이터레이터를 리턴하는 함수

일반함수 앞에 *을 붙여 제너레이터 함수를 생성

function *gen() {
    yield 1; // yield를 사용하여 next를 몇번 할지 선언
    yield 2;
    yield 3;
  	return 100; // 리턴값 지정 가능{value: 100, done: true}
}
let iter = gen();
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(const a of gen())  console.log(a); // 이터러블이자 이터레이터이기 때문에 순회 가능
// 1
// 2
// 3

자바스크립트에서는 어떠한 값이든 이터러블이면 순회할 수 있다.
그런데 제너레이터는 문장을 순회할 수 있는 값으로 만들기 때문에
제너레이터를 통해서 어떤 값이든 순회할 수 있게 만든다!!

---

오늘의 마무리

🖤 이터레이터 프로토콜을 처음 들었을 땐 어렵게만 느껴졌는데,
🖤 Map(), for..of, 전개 연산자, 구조 분해, 나머지 연산자 등이 모두 이터레이터 프로토콜을 따르기에 가능한 것이였다.
🖤 강사님예제 코드를 따라 해보며보기본 원리를리를 이해하게 되었고, 내일은 응용을 파괴해보자!!