[클린코드 자바스크립트] eqeq 줄이기

☑️ eqeq(동등 연산자) 줄이기

☑️ 동등 연산자(== || equality)

동등 연산자를 사용할 경우 좌,우항의 형변환(type casting)이 일어난다. 따라서 정확한 타입 연산을 하기 위해서는 엄격한 동등 연산자(===)를 사용해야 한다.

☑️ 엄격한 동등 연산자(=== || strict equality)

엄격한 동등 연산자(===)는 type casting이 일어나지 않은 상태에서 좌, 우항의 값과 type을 둘 다 비교하여 좌, 우항이 동일한지 아닌지를 구분한다. 실수를 줄이기 위해서 eslint 설정을 해주는 것이 좋다.

'1' == 1 // true
1 == true // true

'1' === 1 // false
1 === true // false

만약 type casting이 필요한 상황이라면 좌, 우항의 값의 type이 dynamic하게 변하도록 두는 것이 아니라 의도를 가진 코드 형태로 바꾸어서 사용하는 것이 다른 사람에게 좀 더 명확한 의미를 전달할 수 있다.

아래의 코드는 input 값에 입력한 값을 읽어 연산하는 코드이다. input 태그에 숫자를 입력했더라도 문자열을 취득하게되므로 값을 다룰 때 주의해야 한다.

const trickNum = document.getElementById('trickNum'); // id가 trickNum인 input tag의 값  // id가 trickNum인 input tag의 값
trickNum.value == 0; // true, 원하는 값을 얻었지만 나중에 오류가 발생할 가능성이 높다.
Number(trickNum.value) === 0; // true, 의도를 갖게 코드를 변경하는 것이 더 나은 방법이다.
trickNum.valueAsNumber === 0; // ture, valueAsNumber를 사용하면 입력된 값을 Number로 타입 변환한 값이 취득된다.

출처: 클린코드 자바스크립트-장현석