[Javascript] "==" 그리고 "==="

"==" 그리고 "==="

유명한 자바스크립트 관련 짤입니다.

왜 자바스크립트를 최악의 언어라고 하는지 그 이유가 한 장에 모두 담겨있죠

 

그중 "true==1"이라는 표현식과 "true===1"이라는 표현식이 보입니다.

각각 표현식의 값은 true와 false로 갈립니다.

 

등호가 하나 더 붙고 안 붙고의 차이로 결과가 갈렸습니다.

 

왜 그럴까요?

느슨한 비교 vs 엄격한 비교

자바스크립트에서 값의 일치 여부를 비교하는 연산자 ==와 ===에는 큰 차이가 하나 있습니다.

바로 "암묵적 형변환"을 수행하는지, 하지 않는지의 차이입니다.

== (느슨한 비교)

• 형변환을 수행합니다: ==는 비교하는 두 값의 데이터 타입이 다르면, 자바스크립트가 암묵적으로 형변환을 수행하여 같은 타입으로 변환한 후 비교합니다.
• 예를 들어, 1 == '1'은 true로 평가됩니다. 숫자 1과 문자열 '1'이 비교될 때, 자바스크립트는 '1'을 숫자로 변환한 뒤 비교하기 때문입니다.

=== (엄격한 비교)

• 형변환을 하지 않습니다: ===는 비교하는 두 값의 데이터 타입이 다를 경우, 형변환 없이 바로 false를 반환합니다. 따라서 값이 같더라도 타입이 다르면 false입니다.
• 예를 들어, 1 === '1'은 false로 평가됩니다. 숫자 1과 문자열 '1'은 데이터 타입이 다르기 때문입니다.

어떤 비교 방식이 권장될까요?

대부분의 자바스크립트 스타일 가이드에서는 엄격한 비교(===) 사용을 기본으로 권장합니다.

왜 ===을 써야 할까?

1. 명확성: ===를 사용하면 암묵적인 형변환 없이 비교가 이루어지기 때문에, 코드의 동작이 더 명확해집니다. 예상치 못한 형변환에 의해 발생할 수 있는 버그를 방지할 수 있습니다.
2. 성능: 형변환을 수행하지 않기 때문에 ===가 ==보다 더 빠를 수 있습니다. 하지만 이 차이는 대부분의 경우 미미합니다.

결론적으로 코드의 예측 가능성을 높이고, 예상치 못한 버그를 줄이는 데 도움이 되기 때문에 === 사용이 권장된다고 할 수 있습니다.

숫자와 문자의 경우에서의 느슨한 비교와 엄격한 비교

일반적으로 문자열끼리 비교할 때에는 느슨한 비교나 엄격한 비교나 같은 결과를 반환합니다. 타입이 같으니 당연합니다.

하지만 숫자와 문자열을 비교할 때엔 조금 다른 결과가 나타날 수 있죠.

1. 숫자로 변환될 수 있는 문자열

느슨한 비교(==)는 피연산자 중 하나가 숫자일 경우 문자열을 숫자로 형변환합니다.

따라서 숫자로 변환 가능한 문자열과 숫자를 비교할 때 예상치 못한 결과가 나올 수 있습니다.

console.log('123' == 123);  // true
console.log('123' === 123); // false

2. 빈 문자열과 0

빈 문자열('')과 숫자 0도 느슨한 비교에서 예상치 못한 결과를 나타낼 수 있습니다.

자바스크립트는 빈 문자열이 숫자와 비교될 때, 명시된 규칙에 따라 빈 문자열을 숫자 0으로 변환합니다.

Number('') // 0

console.log('' == 0);  // true
console.log('' === 0); // false

3. null, undefined, NaN과의 비교

문자열이 null, undefined, NaN과 비교될 때도 ==와 ===에서 차이가 발생할 수 있습니다.

이들 값은 자바스크립트에서 특별한 의미를 가지기 때문에 자동 형변환에 의한 예상치 못한 결과를 낳을 수 있습니다.

console.log('' == null);       // false
console.log('' == undefined);  // false
console.log('' == NaN);        // false

위와 같은 비교에서는 null, undefined, NaN은 형변환되지 않으므로 빈 문자열과 비교할 때 모두 false입니다.

그러나 이런 경우엔 ===를 쓰는 게 훨씬 안전합니다.

4. 0과 1 그리고 true, false와의 비교

느슨한 비교(==)에서는 불리언이 숫자로 변환되어 비교됩니다. 예를 들어, true는 1, false는 0으로 변환되어 평가됩니다. 

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

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

결론

• 같은 타입끼리 비교할 때는 ==와 ===가 동일하게 동작합니다.
• 숫자와 문자열을 비교할 때는 ==가 형변환을 통해 의도치 않은 true를 반환할 수 있습니다.
• NaN은 NaN을 포함한 그 어느 타입과도 ==와 === 모두 false로 평가되므로, 비교가 필요하다면 isNaN() 함수를 사용합니다.
• null이나 undefined와의 비교도 ===로 비교하는 것이 안전한 경우가 많습니다.

따라서 숫자 비교에서도 엄격한 비교(===)를 사용하는 것이 예측 가능한 결과를 보장하는 데 있어서 더 좋습니다.

그 외 다양한 경우에서의 느슨한 비교와 엄격한 비교

null이나 undefined, typeof 같은 경우 느슨한 비교와 엄격한 비교에 어떤 차이가 나타나는지 테스트해 봤습니다.

1. null과 undefined

null과 undefined는 자바스크립트에서 비어있음을 나타내는 두 가지 타입인데, 이들이 ==와 ===로 비교될 때 차이가 있습니다.

• 느슨한 비교 (==)
  • null == undefined는 true입니다. 자바스크립트는 null과 undefined를 서로 동등하다고 간주하기 때문에 true로 평가합니다.
  • 하지만 null == 0이나 undefined == 0은 false입니다. 숫자 0과 비교할 때는 동등하지 않다고 판단합니다.
• 엄격한 비교 (===)
  • null === undefined는 false입니다. null과 undefined는 타입이 다르므로 === 비교에서는 동등하지 않습니다.
  • 따라서 ===로 비교할 경우 null과 undefined는 항상 다른 값으로 처리됩니다.

2. typeof

typeof 연산자는 데이터 타입을 문자열로 반환하므로 실제 동작에서는 차이가 없습니다.

하지만 코드의 일관성을 위해 비교할 때는 보통 엄격한 비교(===)가 권장됩니다.

let value;
typeof value == 'undefined'  // true (느슨한 비교)
typeof value === 'undefined' // true (엄격한 비교)

결론

• null과 undefined를 비교할 때는, 값만 같으면 true가 나오도록 하는 == 대신 ===를 사용하는 것이 안전합니다.
  null과 undefined의 비교 외에도 다른 의도치 않은 값들과의 비교를 피할 수 있습니다.
• typeof와 비교할 때는 느슨한 ==를 사용해도 큰 차이가 없지만, 코드의 일관성을 위해 === 방식을 권장합니다.

마치며

지금까지 자바스크립트가 왜 최악의 언어라고 불리는지의 그 수많은 이유 중 하나인 엄격한 비교와 느슨한 비교에 대해서 알아봤습니다.

어떤 방식이 더 안전한지도 이해했으니, 앞으로는 보다 예측 가능한 코드와 깔끔한 로직을 작성할 수 있을 것입니다.

 

감사합니다!