코드 땜장이

 요즘에, var를 쓰지 말라는 사람들이 많아서, es6이후에 자바스크립트를 배운사람들은 처음보는 키워드일 수도 있고, 그냥 변수 선언 하는 키워드정도로 생각을 하는데, 왜 쓰지 말라는 지에 대해서 잘 모르는 분들이 있을 것이다.  아래의 코드들로 하여금 어느정도 해당 키워드의 나쁜점을 좀 드러 낼 수 있게 let과 비교를 하며 설명을 드리고자 한다.  몇가지 집고 아래 코드를 보도록 하자, 않그러면 코드 자체가 이해 안 될 수 있으니.  1. var, let은 스코프의 차이가 있다. var의 경우에는 function scope, let은 block scope를 가진다. ( function () { //... function scope { //... block scope var a = 1 console . log (a) } console . log (a) })() ( function () { //... function scope { //... block scope let b = 1 console . log (b) } console . log ( b ) // Uncaught ReferenceError: b is not defined })()  var의 경우에는 블록 스코프 내에서 선언이 되었지만, 해당 함수내에서는 참조 가능 한것을 볼 수 있다 var는 function scope를 갖는다.  let의 경우에는 블록 스코프 내에서 선언이 되었고, 블록에서 벗어 나자마자 참조 불가능 한것을 볼 수 있다 let은 block scope를 갖는다.  2. TDZ ( function () { console . log (a) // undefined var a = 1 })() ( function () { console . log (b) // Uncaught ReferenceError: Cannot access 'b' before initialization let b = 1 })

 들어가기 앞서, promise, async, await을 모르는 분은 아래의 링크를 먼저 읽도로 합시다. https://www.blogger.com/blog/post/edit/5763507515709642449/5970595066280268078    개발을 하다보면, 여러개의 네트워크 요청을 한번에 처리해야 하는 경우가 많다. 간단하게 아래처럼 시간이 10초 이내로 랜덤하게 걸리는 요청이 있다고 해보자. const callApi = (param) => { return new Promise (resolve => setTimeout (() => resolve(param) , Math . floor ( Math . random () * 5 ) * 1000 )) }  1. 간단하게 아래와 같은 코드로 여러번의 호출을 실행해보았다. const paramList = [ 1 , 2 , 3 , 4 , 5 ] for ( const param of paramList ) { callApi ( param ). then (res => console . log (res)) }  2. 위와 같이 정상적으로 실행이 되었다. 하지만, 결과에 대한 표시와 요청순가 달라져서 순서대로 표시가 되게 수정을 해달라고 요청이 왔다. const promises = [] for ( const param of paramList ) { promises . push ( callApi ( param )) } Promise . all ( promises ). then (resList => resList. forEach (res => console . log (res)))    3. 위와 같이 코드를 변경 하여서 모든 요청이 완료 되고나서 요청 순서대로 표시가 되게 수정을 완료 하였지만, 이번엔 백엔드 개발자 분이 오셔서 1 ~ 5번까지 순서대로 요청을 하고, 요청이 완료되면 다음 요청을 보내달라고 요청을 해왔다. async function process ()

 예전 주제로 게으른 평가를 구현해보는 주제로 포스팅 했던적이 있다. 그것 또한 lodash에 구현되어있는지 테스트 및 사용 법을 포스팅 하고자 한다. https://sejiwork.blogspot.com/2020/12/1000-2.html  그 당시의 코드를 확인해보면 아래와 같다. const calcPointList = go ( members , lazyMap ( member => { const { family , point } = member return { ...member , calPoint : family * point } } ) , lazyFilter ( ( { calPoint } ) => calPoint >= 1000 ) , lazyMap ( ( { calPoint } ) => Math . floor ( Math . sqrt ( calPoint ) ) ) , lazyFilter ( calPoint => calPoint % 2 ) , take ( 2 ) )  위에 보면, lazyMap, lazyFilter, lazyMap, lazyFiler, take를 사용 함으로써, members데이터 모두를 map, filter, map, filter, take 순회 하는 것이 아닌,  members 데이터 각각을 가지고 lazyMap, lazyFilter, lazyMap, lazyFiler, take 한번씩 돌려보고 데이터가 두개(take(2)) 되는 순간 더 이상 평가를 하지 않아도 되게 처리 되었다.  전에 테스트 했던 방식과 같이 샘플 데이터는 아래와 같은 함수로 처리 하고자 한다. const genMember = () => { return { family : Math . ceil ( Math . random () * 8 ) , point : Math . ceil ( Math . random () * 8000 ) } } const m

 Lodash : 공식적인 소개 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리입니다. 라고 표현 됩니다.  자주 사용 하는 함수들을 기본적으로 제공하는 ES6에서 제공하는 기본함수들과 비교를 좀 하면서 소개 드리겠습니다.  테스트에서 사용 하는 데이터는 아래와 같습니다. const bookList = [ { name : ' 재미있는 책 ' , author : 'tom' , pages : 123 } , { name : ' 재미없는 책 ' , author : 'tom' , pages : 200 } , { name : ' 그저 그런 책 ' , author : 'tom' , pages : 150 } , { name : ' 재미있는 책 ' , author : 'alice' , pages : 150 } , { name : ' 재미없는 책 ' , author : 'alice' , pages : 300 } , { name : ' 그저 그런 책 ' , author : 'alice' , pages : 450 } ]  1. filter, find   1-1. 저자가 "tom"인 책들을 찾으시오. _.filter( bookList , { author : 'tom' }) bookList . filter (({author}) => author === 'tom' )   1-2. 저자가 " alice"고 제목이 "재미있는 책"을 찾으세요. _.find( bookList , { author : 'alice' , name : ' 재미있는 책 ' }) bookList . find (({author , name}) => author === '