1주차 복습
September 18, 2023
해당 문서는 인프런
[함수형 프로그래밍과 JavaScript ES6+]강의를 정리하는 문서입니다. *출처
섹션 0. 함수형 자바스크립트 기본기
평가?
- 코드가 계산되어 값을 만드는 것.
일급?
- 값으로 다룰 수 있다.
- 변수에 담을 수 있다.
- 함수의 인자, 결과로 사용될 수 있다.
const a = 10
const add10 = a => a + 10
const r = add10(a)
log(r)일급 함수?
- 함수를 값으로 다룰 수 있다.
- 조합성과 추상화의 도구로 사용.
const add5 = a => a + 5
const f1 = () => () => 1
const f2 = f1()고차 함수?
- 함수를 값으로 다루는 함수.
-
ex
-
함수를 인자로 받아 사용하는 함수
const apply1 = f => f(1) const add2 = a => a + 2 apply1(add2) // 3 -
함수를 만들어 리턴하는 함수 (클로져를 만들어 리턴하는 함수)
const addMaker = a => b => a + b const add10 = addMaker(10) add10(5) // 15
-
섹션 1. ES6에서의 순회와 이터러블:이터레이터 프로토콜
기존과 달라진 ES6에서의 리스트 순회
-
AS-IS
const list = [1, 2, 3] for (var i = 0; i < list.length; i++) { log(list[i]) } -
TO-BE
const list = [1, 2, 3] for (const a of list) { log(a) }
Array, Set, Map을 통해 알아보는 이터러블/이터레이터 프로토콜
- Array, Set, Map 모두 지원하는 for … of
// Array
const arr = [1, 2, 3]
for (const a of arr) log(a)
// Set
const set = new Set([1, 2, 3])
for (const a of set) log(a)
// Map
const map = new Map(['a', 1], ['b', 2], ['c', 3])
for (const a of map) log(a)이터러블/이터레이터 프로토콜
- 이터러블: 이터레이터를 리턴하는
[Symbol.iterator]()를 가진 값. - 이터레이터: {value, done} 객체를 리턴하는 next()를 가진 값.
- 이터러블/이터레이터 프로토콜: 이터러블을 for…of, 전개 연산자 등과 함께 동작하도록 한 규약.
// Array
const arr = [1, 2, 3]
let iter1 = arr[Symbol.iterator]()
iter1.next()
for (const a of iter1) log(a) // 2, 3만 찍힘
// Set
const set = new Set([1, 2, 3])
for (const a of set) log(a)
// Map
const map = new Map(['a', 1], ['b', 2], ['c', 3])
for (const a of map) log(a) // ['a',1], ['b',2], ['c',3] Map은 배열이 찍힘
for (const a of map.keys()) log(a) // a, b, c
for (const a of map.values()) log(a) // 1, 2, 3
for (const a of map.entries()) log(a) // ['a',1], ['b',2], ['c',3] (첫번째와 동일)keys, values, entries는 어떻게 for…of가 가능?
var it = map.values()
log(it[Symbol.iterator]) // iterator를 반환
var it2 = it[Symbol.iterator]() // 동일한 이터레이터를 반환한다(자기자신)
it2.next()사용자 정의 이터러블, 이터러블/이터레이터 프로토콜 정의
const iterble = {
[Symbol.iterator]() {
let i = 3
return {
next() {
return i == 0 ? { done: true } : { value: i--, done: false }
},
[Symbol.iterator]() {
return this
},
}
},
}