Study/JavaScript(Clean code)

[JavaScript][clean-code] eqeq줄이기 & 형 변환 주의하기

갈푸라떼 2022. 5. 27. 00:39

* eqeq란?

- Equality(==) 동등연산자

 

* eqeq의 문제점은??

- 동등연산자를 사용하면 형 변환이 일어난다. (type casting)

"1" == 1 // true
1 == true // true

따라서 엄격한 동등연산자를 사용해야한다.


* eqeq문제점 해결방법

1. Strict equality(===) 엄격 동등연산자

"1" === 1 // false
1 === true // false

2. 형 변환을 수동으로 막아주기

Number(ticketNum.value) === 0 // true
ticketNum.valueAsNumber === 0 // true

3. ESLint를 이용한다.


* 형 변환시 주의 사항

- 자바스크립트가 형 변환을 할때는 암묵적인 변환을 해준다.

- 사용자가 형 변환을 할때는 명시적인 변환을 해준다.

 

따라서 우리는 타입을 변환할 때 명시적으로 변환을 해줄 필요가 있다.

명시적으로 예측할 수 있는 형 변환을 해주어야 한다.

 

* 암묵적인 변환 (Bad)

- 느슨한 검사로 인한 형 변환

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

11 + ' 문자와 결합' // '11 문자와 결합'

!!'문자열' // true
!!' ' // false

* 명시적인 변환 (Good)

String(11 + ' 문자와 결합')
Boolean('문자열')
Boolean(' ')
Number('11')
parseInt('9.999', 10);  // 9

(Tip) parseInt()내장함수를 사용할 때 10진수 명시를 꼭 해주자

이유는 ??

10진수가 기본값은 아니다. 따라서 10진수가 나올거라 기대하고 있지만 10진수가 안나올 수도 있다.

따라서 10진수를 지정해주면 오류를 줄여 줄 수 있다.

ex) parseInt('9.999', 10); // 9