🟡JavaScript

객체로부터 URL의 querystring을 알아내는 함수 queryStr을 만들어보자. const queryStr = (obj) =>go( obj, Object.entries, map(([k, v]) => `${k}=${v}`), reduce((a, b) => `${a}&${b}`));log(queryStr({ limit: 10, offset: 10, type: "notice" })); 주어진 객체의 [ key , value ] 쌍을 알아내는 Object.entries를 사용하고구조분해로 key와 value를 받아 mapping하고reduce로 separtor를 '&'로 설정하면 완성된다. 여기서 obj를 받아 그대로 obj를 전달하고 있기 때문에 pipe로 간략화할 수 있다. const quer..

초반부 강의를 듣다가 글을 쓰러 올라왔다. 이 세션의 마지막 강의를 듣고 결론을 보면 무엇을 위해 이 함수들을 구현하고 배우는지 알 수 있겠지만평소 내가 지금 무엇을 공부하고 있는지 알아야 효율이 좋은 나는 "대체 자꾸 뭐가 느긋한데..."라는 의문이 있는채로 계속 강의를 들을 수는 없었다.'느긋한' 이라는 단어가 억지로 번역하는 데에서 나온 단어라고 생각하고 이에 맞는 영어 단어 'lazy'를 찾고, 구글링하며 공부했다.  자바스크립트에는 'lazy'라는 개념이 있다.보통 'lazy loading(지연 로딩)', 'lazy evaluation(지연 평가)' 에서 쓰이는데, 생각하는 느낌대로 필요한 시점까지 로딩을 미루고 계산을 미루는거다. 모든 계산을 먼저 수행하고 원하는 부분을 찾으면 그 계산이 모두..

강의의 중반부를 들으며 궁금증이 생겨 이리저리 찾아보다가 이제서야 이 강의의 주제인 이 뭔지에 대한 개념이 적립되어 반성하며 이제서야 글을 써본다. "함수형 프로그래밍"이 뭐지? 라는 근본적인 의문을 품기 전에 그냥 막연히 "함수로 묶는건가? 최대한 함수를 많이 쓰는건가?" 하는 이런 안일한 생각을 했던 것 같다. 위키백과에서는 함수형 프로그래밍을 다음과 같이 정의한다. 함수형 프로그래밍(Functional Programming) 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 것 명령형 프로그래밍과 비교하면 이해하기 쉬운데, 먼저 이러한 프로그래밍 패러다임들에 대해 간단하게 이해해보자. 프로그래밍 패러다임(Programming Paradigm) 코드를 작성할 때 따르는 규칙의..

앞 세션들에서 계속 사용했던 products에 수량을 의미하는 quantity를 추가하고 몇가지 작업을 해봤다. 총 수량과 총 금액을 구하고 싶으면 코드를 어떻게 작성해야할까? const products = [ { name: "반팔티", price: 15000, quantity: 1 }, { name: "긴팔티", price: 20000, quantity: 2 }, { name: "핸드폰케이스", price: 15000, quantity: 3 }, { name: "후드티", price: 30000, quantity: 4 }, { name: "바지", price: 25000, quantity: 5 },];//총 수량const total_quantity = pipe( map((p) => p.quantity)..

Template Literals ES6에서 새롭게 도입된 문자열 표기법 back-tick(`) 문자를 사용한다. 기존에 문자열을 표기할 때 작은 따옴표(')나 큰 따옴표(")를 사용했는데, ES6부터는 백틱(`) 문자를 사용해 더 편리해졌다. 기존에 문자열을 표기했던 방식을 먼저 살펴보겠다. var a = 2; var b = 1; var c = "자바스크립트"; var str = "저는 " + (a + b) + "학년이고\n" + c + "를 공부하고 있습니다."; console.log(str); //저는 3학년이고 //자바스크립트를 공부하고 있습니다. 이제 전과 달라진 표현 방식을 살펴보자. 백틱 안에서는 ${표현식} 형식으로 문자열 안에 표현식을 넣을 수도 있고 공백 문자나 줄바꿈 문자가 그대로 표현..

읽기 좋은 코드를 만들자!라는 목표로 몇가지 개념을 더 알아보자. 함수형 프로그래밍에서는 코드를 '값'으로 사용하는 아이디어를 많이 사용한다.전 섹션에서 작성했던 코드를 go함수와 pipe함수를 사용해 발전시켜보자. go함수 우선 go함수는 다음과 같이 실행된다.0이 a로 들어가고 0+1=1이 또 a로 들어가고...이런식으로 연속적으로 값이 들어가며 실행된다.  go( 0, (a) => a + 1, (a) => a + 10, (a) => a + 100, log); //111 인자들이 리스트로 들어왔을 때, 하나의 값으로 축약된다!는 개념으로 보자면go는 앞서 배웠던 reduce함수로 구현할 수 있다.  [JavaScript] #3. map, filter, reduce (함수형 프로그래밍과 Jav..

Map다음과 같이 5개의 상품이 있다.const products = [{ name: "반팔티", price: 15000 },{ name: "긴팔티", price: 20000 },{ name: "핸드폰케이스", price: 15000 },{ name: "후드티", price: 30000 },{ name: "바지", price: 25000 },];여기서 상품의 이름만 모아 출력하거나, 가격만 모아 출력하려면 어떻게 코드를 작성해야할까? 이처럼 새로운 배열을 만들어 그 배열에 원하는 값을 push하고 만들어진 배열을 출력하면 된다. 그럼 이제 이 코드와 형식이 비슷한 map()함수를 이용한 코드를 살펴보겠다. 함수형 프로그래밍에서는 함수가 인자와 return값으로 소통하..

제너레이터(Genarator)이터레이터(iterator)이자 이터러블(iterable)을 생성하는 함수 genarator를 생성할 때는 함수 생성과 동일하게 하는데, *을 사용한다.    11라인을 보면 iter은 이터레이터이자 symbol.iterator를 가졌고, 그 Symbol.iterator를 실행했을 때 결과는 자기자신이 되는 well-formed iterator임을 알 수 있다. 또, 실행 결과 마지막을 보면 value가 undefined인 것을 볼 수 있는데, 이는 함수의 실행 끝에 return이 없으면 undefined을 return한 것과 동일해서 이렇게 동작하는 것이고, 만약 4를 return하도록 하면  위와 같이 동작하는 것을 확인할 수 있다. 제너레이터도 마찬가지로 f..

전개 구문(Spread Syntax) '...' 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 arguments(for function calls) 또는 0개 이상의 elements(for array literals)로 확장하는 구문 일반적으로 배열의 element를 함수의 인수로 사용하고자 할 때, apply()를 사용했지만(13줄) 전개구문을 사용하면 11줄과 같이 표현할 수 있다. 참고로 인수 목록의 모든 인수는 전개 구문을 사용할 수 있으며, 여러번 사용될 수도 있다. 전개구문 덕에 다음과 같이 배열을 new와 함께 쉽게 사용할 수도 있게 되었다. var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields); 배..

가장 핵심적인 변화가 많이 일어난 ES6(ECMAScript 2015)에서는 전보다 리스트 순회 방법이 좋아졌는데, 이에 대해 공부했다. 예전의 리스트 순회 방법은 다음과 같았다.  var list = [1, 2, 3]; for (var i = 0; i  다음으로 훨씬 간결해진 ES6+에서의 리스트 순회 방법을 보자.  var list = [1, 2, 3]; for (const a of list) { console.log(a); } 새로운 리스트 순회 for...of문에서 확인해 볼 포인트는예전에는 리스트를 순회할 때, 어떤걸 순회하느냐에(ex) array, set, map 등) 따라 방법이 달랐는데, ES6+에서는 각 규약이 하나로 통합되면서 일관성이 유지된다는..