코드 땜장이

const Title = styled.h1 ` font-size: 1.5em; text-align: center; color: palevioletred; `  혹시 이러한 코드를 본 적이 있는가? 뭐 물론 styled-component를 사용해 본 사람이라면, 이런 코드를 본 적이 많을 것이다.  하지만, 처음본 사람의 입장에서는 저런 문법이 자바스크립트에 있었나? 이 생각만 있을 것 같다. 뭐 물론, 나도 처음 저런 코드를 보았을 때, 왜 오류가 안나지? 이 생각 뿐이었으니까, 말이다.  일단 대부분이 Template literal(String template)은 많이 들어보았을 것이다. 일단 간단하게 소개 해주자면, const a = 1 const b = 2 const text = 'a: ' + a + ' \n ' + 'b: ' + b + ' \n ' + ' 합 : ' + ( a + b ) const template = `a: ${ a } b: ${ b } 합 : ${ a + b } ` console . log ( text ) console . log ( template )  위처럼 문자열을 여러줄로 표현하거나, 중간에 삽입해야 하는 값을 편하게 만들어주는 기능을 갖는다.  보면 알겠지만, ', "대신 `을 이용 하고 있다. Template literal에서 편의성을 더 제공한 것이, tagged literal이다.  간단한 사용 예제를 보여주자면, const name = 'sejiwork' const email = 'sejinjja@gmail.com' console . log ( ` 이름 : ${ name } email: ${ email } ` )  위의 정보에서 이메일 정보는 노출하고 싶지 않을 때가 있지 않나? 그러면 이러한 함수를 만들 수도 있을 것이다. const name = 'sejiwork' cons

 Promise를 사용하다 보면, then/catch/finally의 콜백은 비동기적으로 호출 된다는 것을 알 것이다.  아래와 같이 바로 시행 되는 코드라고 해도 말이다. window . addEventListener ( '' , () => console . log ( 'test event' )) setTimeout (() => { console . log ( 'setTimout' ) }) Promise . resolve (). then (() => console . log ( 'promise then' )) console . log ( 'end' )  일단 코드를 보니, Promise의 then과 setTimout이 같은 비동기더라도, Promise then이 먼저 호출 되는 것을 알 수 있다. 뭐 물론, 이런식으로 딴지를 걸 수 있다. setTimout과 .then이 순서가 없지만, setTimeout의 타이머를 확인하느라 실행이 늦은 걸 수 있지 않냐.  그러면 코드를 개선해서 가정을 확인해보자. console . log ( 'start' ) setTimeout (() => { console . log ( 'setTimout' ) }) const pr = Promise . resolve () pr . then (() => { pr . then (() => console . log ( 'promise then in promise then prev start' )) console . log ( 'promise then start' ) const cur = new Date () while ( new Date () - cur < 1000 ) {} console . log ( 'promise then end' ) pr . then (() => console

  WeakMap은 무엇일까? 간단하게 말하면, key를 Object로만 사용하는 Map이다. 물론 이렇게만 말한다면, Map의 하위 호환 처럼 보인다. 그렇다는 것은 이것은 무엇 때문에 생긴것일까?  WeakMap은 무엇이 약한 Map일까? 키에 대한 참조가 약한 Map이다. 키에 대한 참조가 약하다니 무슨 뜻일까?  Map은 key가 더 이상 접근이 불가능 하더라도, Map에는 값이 존재한다. 하지만 WeakMap은 가비지 컬렉션의 대상이 되어 가비지 컬렉터한테 걸리면 key를 참조 하지 못하는 데이터를 제거 한다.  예제를 보면 이와 같다. let weakmap = new WeakMap () let obj = { key : 'key' } weakmap . set ( obj , 'hello' ) console . log ( weakmap . get ( obj )) // 'hello' obj = null // obj 가 가비지 컬렉션에 의해 제거됨 // weakMap {obj, 'hello'} 또한 가비지 컬렉션에 의해 제거된다 . let map = new Map () let obj = { key : 'key' } map . set ( obj , 'hello' ) console . log ( map . get ( obj )) // 'hello' obj = null // obj 가 가비지 컬렉션에 의해 제거됨 // map {obj, 'hello'} 제거 되지 않는다 . weakmap에는 데이터가 존재 하지 않는다. map에는 여전히 데이터가 존재한다.  가비지 컬렉터가 실행 된 이후에 각각의 객체를 확인 해보면 위와 같이 확인 할 수 있다. 하지만, 가비지 컬렉터가 실행되지 않았다면, WeakMap을 이용 하더라도 아래처럼 확인이 되니, 주의하자. 접근 할 수 있는 key제거 되었지만, value가 남아있다.  참고로 위처럼 한번이라도 개발자 콘솔

 자바스크립트에는 값을 비교하는 방식이 여러 방식으로 할 수 있다는 것을 알 것이다.  뭐 작게 보면 ==, ===, Object.is 이런 것들이 있을 것이고, typeof, instanceof를 이용하는 등... 로직을 구성하여 비교하는 나열하기가 힘들 정도로 여러 방식이 있을 것이다.  혹시 indexOf를 사용 해본적이 있나? 배열과 문자열에서 기본적으로 제공하는 함수이며, 꽤나 친숙한 함수 일 것이다.  그렇다면 includes는 사용 해보았나? indexOf는 값의 위치를 알려주기 때문에, 꽤 불편 하다. 아래 같은 경우 말이다. const keyWord = 'hello' const helloWorld = 'hello world' if ( helloWorld . indexOf ( keyWord ) ) { console . log ( 'indexOf!' ) // 실행 되지 않음 . } if ( helloWorld . includes ( keyWord ) ) { console . log ( 'includes!' ) // 실행 됨 }  그래서 아마 값이 있는지 확인만 하는 경우 includes를 사용 하는 경우가 많을 것이다. 하지만 특정 위치가 필요한 경우 indexOf를 사용 할 것이다.  여기서, indexOf 와 includes가 같은 로직으로 값을 확인하는 것이라 착각한다면... 문제가 생길 여지가 생겨 버린다.  단적인 예로, 배열에는 존재 하지만, 배열에서 위치를 못 찾는 경우가 생기는 경우가 있다.  아래 코드를 꼭 실행 시켜보도록 하자. const arr = [ 1 , 2 , 3 , 4 , NaN ] if ( arr . includes ( NaN ) ) { console . log ( `NaN 이 ${ arr . indexOf ( NaN )} 에 있습니다 .` ) // NaN 이 -1 에 있습니다 . }  "NaN이 -1에 있습니다."