Jay

함수형 프로그래밍에서는 코드를 값으로 다루는 아이디어를 많이 사용하는데 코드를 값으로 다룰 수 있기 때문에 어떤함수가 코드인 함수를 받아서 평가하는 시점을 원하는대로 다룰수가 있기 때문에 코드의 표현력을 높인다던지 굉장히 재밌고 좋은 아이디어들을 가지고 있다. 코드를 값으로 다루는 함수를 만들어서 표현력을 좋게하고 읽기좋게하는 아이디어들을 확인한다. 아래코드를 보자. 중첩이 많이 되지는 않았지만 함수중첩이 조금 되어 있어서 코드를 읽을 때 조금 복잡해 보이는 느낌이 있다. 코드를 읽기 편하게 변경을 해보면 우선 go라는 함수를 만들어본다. 아래와 같이 사용한다. 0이 a에 가서 a+1이 되고 그럼 이 값이 밑으로 내려가 1+10이 되고 10+100이 되고 연속적으로 실행되서 원하는 값 111이 출력되도록..

앞에서 만든 map filter reduce 함수를 함께 중첩해서 사용해본다. map filter reduce함수를 구현해 놓은걸 아래와 같이 해놓고 import 해준다. // 파일명 fxx.js const log = console.log; const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; const filter = (f, iter) => { let res = []; for (const a of iter) { if (f(a)) res.push(a); } return res; }; const reduce = (f, acc, iter) => { if (!iter) { iter = ac..

reduce는 이터러블 값을 하나의 값으로 축약해 놓은 함수인데 아래의 코드를 보자. 아래의 값이 있다고 했을 때 아래 리스트를 하나의 다 더해서 하나의 값으로 나타낸다고 할 때, const nums = [1, 2, 3, 4, 5]; let total = 0; for (const n of nums) { total = total + n; } log(total); 즉 특정한 값을 순회하면서 하나의 값으로 누적해 나갈 때 위에 패턴을 사용하게 된다. 이러한 일을 할 때 reduce가 필요하다. const reduce = () => { }; const add = (a, b) => a + b; log(reduce(add, 0, [1, 2, 3, 4, 5])); => // 15 즉 재귀적으로 받은 보조함수를 실행하..

이번에는 filter에 대해서 다뤄보자. 필터는 아래와 같이 데이터가 구성되어져 있을 때 특정 금액 이상의 상품만 걸러낸다거나 특정 금액 이하의 상품만 걸러낸다거나 하는 식의 코드이다. 아래의 코드가 있다. let under20000 = []; for (const p of products) { if (p.price = 20000) over20000.push(p); } log(...over20000); => {name: "반팔티", price: 15000}name: "반팔티"price: 15000[[Proto..

map함수는 이터러블 프로토콜을 따르고 있기 때문에 다형성이 굉장히 높다. 예를 들어서 아래코드를 보자. 아래함수를 사용해서 결과를 확인하면 NodeList라는 결과가 나온다. array처럼 생겼다. log(document.querySelectorAll('*')); array처럼 생겼지만 map함수를 사용할 수 없다. querySelectorAll(*)을 통해서 나온 값을 map을 통해 안에 있는 어떤 값을 수집하려고 하면 아래와 같은 에러가 뜬다. 말 그대로 map이라는 함수가 없다. log(document.querySelectorAll('*').map(el => el.nodeName)); => Uncaught TypeError: document.querySelectorAll(...).map is no..

products라는 배열에 상품의 이름과 가격을 나타내어준 데이터들을 담아놓았다. key value쌍의 객체들은 각각 상품하나를 나타내고 있고 products 배열에 들어있다. 보통은 products에 있는 상품의 이름들을 따로 모아서 수집해서 출력을 한다거나 가격을 따로 배열에 담는 등에 로직을 사용하는데, 예를 들면 아래 코드와 같다. 이러한 코드를 작성할 때 사용하는 함수가 map함수이다. let names = []; for (const p of products) { names.push(p.name); } log(names); => ["반팔티", "긴팔티", "핸드폰케이스", "후드티", "바지"] //--------------------- let prices = []; for (const p of..

제너레이터를 활용해서 홀수만 계속해서 발생시키는 그러한 이터레이터를 만들어서 순회하는 예제를 작성한다. 우선 제너레이터 함수가 있다고 하자. 1 3 5 홀수만 생성한다. => {value: 1, done: false} {value: 3, done: false} {value: 5, done: false} {value: undefined, done: true} 위에 코드는 직접 입력을 해줘야만 계속해서 홀수를 생성할 수 있는데 좀더 자동화해서 만들어보면 limit값을 받고 해당하는 값을 받아서 최대 10보다 작은 홀수까지만 출력하는 제너레이터를 작성할 수 있다. => {value: 1, done: false} {value: 3, done: false} {value: 5, done: false} {value:..

제너레이터는 이터레이터이자 이터러블을 생성하는 함수를 말한다. 즉 이터레이터를 리턴하는 함수이다. 제너레이터는 일반함수에서 앞에 *을 붙여서 제너레이터 함수를 만든다. 또 제너레이터는 이터레이터를 반환한다. 아래와 같이 제너레이터가 있다고 했을 때 제너레이터를 실행한 결과는 이터레이터이다. 이터레이터를 아래코드와 같이 실행 해보자. 제너레이터를 통해 쉽게 이터레이터를 만들 수 있다. => {value: 1, done: false} index.html:14 {value: 2, done: false} index.html:15 {value: 3, done: false} index.html:16 {value: undefined, done: true} 이터레이터이자 이터러블이기도 한데 이터레이터는 심볼 이터레이터..

내장 이터러블이라고 할 수 있는 Arr와 Set과 Map이 이터러블 이터레이터 프로토콜을 따르고 있는 for of문과 어떻게 함께 동작해서 순회가 이루어지는지에 대해서 살펴보았다. 사용자 정의 이터러블을 구현하면서 이터러블에 대해서 더 정확하게 알아보자. iterable이라는 값을 정의한다. Symbol iterator메소드를 구현하고 있다. 그리고 iterable이 가지고 있는 Symbol iterator 메소드는 이터레이터를 반환하는데 iterator는 next를 메소드로 가지고 있고 value와 done을 가지고 있는 객체를 리턴한다. 여기서 만들려고 하는 iterable은 iterator를 실행했을 때 (for of문을 순회했을 때) value로 3 2 1 리턴해주고 끝나는 그러한 이터러블을 만들..

자바스크립트에는 Array와 Set과 Map이라는 내장함수를 가지고 있는데 이 값들 모두 for of 문으로 순회할 수 있다. 각각의 차이점들이나 공통점들을 살펴보자. 이걸 통해서 es6에서 for of문이 어떻게 동작하고 어떻게 list를 es6에서 순회하는지 어떻게 추상화 되어있는지 정확하게 알아보자. 아래와 같이 순회하는 코드를 작성해본다. for of문이 arr를 순회를 할 때 앞서 es5에서 사용했었던 방법으로 돌아갈까?(list에 length만큼 loop를 돌면서 i를 증가하면서 0부터 한번씩 i라는 키로 접근해서 한번씩 value를 순회하는 식으로 for문이 돌아가고 숨겨져 있는 것일까?) 그렇지는 않다. ### Array를 통해 알아보기 ### Set을 통해 알아보기 ### Map을 통해 ..