ESLint warning, Expected '===' and instead saw '==' eqeqeq

Javascriptetc

ESLint warning??? eqeqeq ???

React 프로젝트를 빌드하는데, ESLint warnning이 눈에 거슬렸다.

==를 쓰지 말고 ===를 써야한다고 한다. 경고 마지막엔 eqeqeq라고 출력되는데 검색해보니 ESLint의 eqeqeq 규칙이라고 한다.

/home/mj/codechacha/src/components/CategoryItem.js
  10:18  warning  Expected '===' and instead saw '=='  eqeqeq
  13:18  warning  Expected '===' and instead saw '=='  eqeqeq

내가 작성한 코드는 아래와 같다.

if (category == 'cpp') {
  label = 'C++';
}
if (category == 'csharp') {
  label = 'C#';
}

잘 구현하려면 아래와 같이 ===를 사용해야 한다.

if (category === 'cpp') {
  label = 'C++';
}
if (category === 'csharp') {
  label = 'C#';
}

왜 ===를 사용해야할까? eqeqeq 규칙과 == 비교로 발생할 수 있는 문제점에 대해서 알아보았다.

ESLint eqeqeq 규칙이란?

ESLint의 eqeqeq 규칙은 동등 비교를 할 때 == 대신 ===를 사용하라고 강제하는 것이라고 한다.

왜냐하면?

  • ==는 암묵적 형변환을 포함해서 비교 (느슨한 비교 -> 예측하지 못한 문제 발생, 버그 위험)
  • ===는 자료형까지 비교해서 더 안전함 (엄격한 비교, 타입까지 체크)

eqeqeq 규칙을 어겼을 때 발생할 수 있는 문제 (Example!)

==는 암시적 형변환으로 배열을 boolean과 비교할 수 있고, 아래 보는 것처럼.. 비교 결과가 예상하기 어려움.

console.log([] == false);        // true
console.log([0] == false);       // true
console.log([1] == true);        // true
console.log([1, 2] == true);     // false

Javascript는 ==를 비교하기 전에 자동으로 타입을 강제 변환하는데,

[] == false의 경우, []의 경우 0으로 변환되고, false도 0으로 변환. 그래서 두개의 boolean을 비교해서 true라는 값이 리턴됨.

[] == false

// Step 1: [] → 숫자 → 0
// Step 2: false → 0
// Step 3: 0 == 0 → true

[1] == true의 경우는 아래처럼 변환되면서 true가 리턴됨.

[1] == true

// Step 1: [1] → "1" → 숫자 → 1
// Step 2: true → 1
// Step 3: 1 == 1 → true

결론은, ===를 쓰면.. 이런 예상치 못한 문제를 피할 수 있음. 아래 비교는 모두 false를 리턴하여, 비교가 명확해짐.

console.log([] === false);        // false
console.log([0] === false);       // false
console.log([1] === true);        // false
console.log([1, 2] === true);     // false
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha