지지난주 1주차 스터디 미션에서 나 뿐만 아니라 다른 코더 분들에게 공통으로 많이 달린 코드리뷰를 위주로 뽑아서 정리를 하려고 한다.
new 키워드를 통해 함수를 확인했는지 확인
이전에 프로토타입 개념을 공부하면서 JS에서 사용하는 Class는 사실 실제로 실행될 때 function으로 바꿔서 실행된다는 것이 떠올랐다. 클래스가 실제로 아니기 때문에 new 연산자를 같이 선언해 줌으로써 return 문이 없지만 JS가 객체를 생성할 수 있도록 처리를 해준다. (자세한 과정은..JS 테코톡 정리한 포스트에서 참고해주시길..!)
new 연산자를 만나면 JS는 빈 객체를 메모리 상에 생성한다. 그리고 이 빈 객체는 this에 바인딩된다. 속성 값들을 모두 채우도록 할당을 한 뒤 따로 return 이 없다면 만들어진 this가 return이 되는 식이다.
따라서 JS에서는 new 키워드를 같이 적어줬는지 확인해야할 필요가 있을 수 있는데 이 new 키워드를 통해 함수를 호출했는지를 확인하는 방법이 2가지 있다는 것을 이번 코드 리뷰를 받다가 알게 되었다.
how to detect if a function is called as constructor? - Stackoverflow
this instanceof X여기서 this가 우리가 원하는 객체에 바인딩이 되었는지 확인하는 방법인데 ES6부터는 new.target으로도 확인이 가능해졌다고 한다.
new.target!= vs !== 어떤 차이가 있을까? 무엇을 써야할까?
==와 != (Equality 연산자)를 사용하면 연산이 되기 전에 피연산자들을 먼저 비교할 수 있는 형태로 변환시킨다. 따라서 ==를 사용하면 아래 사실이 성립하게 된다.
254 == '254'
true == 1
undefined == null
'abc' == new String('abc')===와 !== (Identity 연산자)는 형변환을 하지 않고 연산한다.
254 == '254' (false)
true == 1 (false)
undefined == null (false)
'abc' == new String('abc') (false)그 외 참고한 좋은 리뷰들 👍
읽기 쉬운 변수명을 만들자
- 단/복수로 배열과 요소 관계 표현
- 컴포넌트명은 PascalCase (맨 앞과 각 단어를 대문자로 구분)
- 예약어 X
- 식을 직접 작성해서 비교하는 것보다 식을 가독성 좋은 변수에 담아서 코드를 작성하면 좋음
ex) completed[0].text === el ? 보다 isCompleted ? 처럼 - 동작을 쉽게 추론할 수 있는 명확한 이름 (ex) isAllTodoCorrectType, isAllTodoType ...
innerHTML 속성을 여러번 변경해서 렌더링하면 어떤 일이 일어날까?
- 속성값이 변경될 때마다 reflow 계속 일어난다
- repaint는 reflow의 하위과정이다
- 즉 reflow가 여러번 일어나는 것이 훨씬 더 계산 소모적이다
innerHTML의 값이 변경될 때마다 브라우저가 다시 렌더링하게 된다. 그러므로 다른 변수에 String을 수정하고 한번에 값을 변경해주면 렌더링 계산을 아낄 수 있다는~
참고할 만한 글 :
브라우저의 이해 #1 Reflow, Repaint에 대하여 알아봅니다.
Array의 map, reduce, filter 등을 이용해 코드를 간소화해보자
참고할 만한 글 :
[Javascript] map, reduce, filter를 유용하게 활용하는 15가지 방법 
filter함수를 사용할 때
this.data.filter(el => el.isCompleted === true);이런 경우에는
this.data.filter(el = el.isCompleted);이렇게만 표현해도 같은 의미로 작용한다!
변수를 선언할 때 var, let, const 중 무엇을 써야할까?
var만 쓰거나 let/const만 쓰는 식으로 통일하는 것이 좋다
var은 function-scoped이고 let, const는 block-scoped이다. var은 hoisting이 되어 global variable이 되기 때문에 불편함이 많다. 재선언이 가능해지는 등 처리해야할 일이 많아지고 복잡하다. 그래서 나온 것이 let과 const이다.
데이터가 Array 인지 확인할때 어떻게 해야할까?
instanceof도 사용할 수 있지만 Array의 isArray를 쓰거나 lodash를 쓰는 것이 더 확실하다.
