[JavaScript] == vs === (동등연산자와 일치연산자)

bobby·2023년 11월 5일
JavaScript

JavaScript

목록 보기
1/1
post-thumbnail

== 와 ===

자바스크립트에서 값이 일치하는 지 비교하기 위해 == 연산자와 === 연산자를 사용합니다.
값이 일치하면 true 일치하지 않으면 false를 반환합니다. == 와 === 이 두 연산자는 얼핏 비슷해 보이지만 같음을 정의하는 기준이 다릅니다. 각 연산자에 대해 알아보고 어떤 차이점이 있는지 정리해보겠습니다.

(원시 자료형 위주로 작성했습니다.)

== 연산자

동등연산자 (Equality Operator)

== 연산자는 두 값(피연산자)이 동일한지 확인합니다. 두 값의 타입이 다른 경우에는 자바스크립트 엔진에 의해 자동으로 형변환((type coercion)이 일어납니다. 형변환으로 두 값이 공통된 타입이 되고 동일한지 비교합니다. 이때문에 '느슨한' 동등 비교라고 합니다.

1 == 1 		//true

1 == true 	//true

1 == "1" 	//true

서로 다른 타입이라도 형변환이 일어났을때 결과값이 같으므로 true를 반환하는 것을 알 수 있습니다.

  • 하나가 불린이고 다른 하나가 불린이 아닌 경우, 불린을 숫자로 변환합니다. (true > 1, false > 0) 그 후 다시 느슨하게 비교합니다.

  • 숫자와 문자열을 비교할 경우 문자열이 숫자로 변환됩니다.

falsy 값의 동등 비교

  • false
  • 0
  • ""
  • null
  • undefined
  • NaN

조건문에서 false로 판별되는 값들은 어떻게 비교되는 지 살펴보겠습니다.

  1. false , 0 , ""
false == 0 //true

0 == "" // true

"" == false // true

false == 0 : false가 0으로 형변환 되어 true 를 반환합니다.

0 == "" : ""가 0으로 형변환이 되어 true를 반환합니다.

"" == false : false가 0으로 형변환 후 "" 가 0으로 형변환 되어 true를 반환합니다.

  1. null 과 undefined
null == null // true

undefined == undefined // true

null == undefined // true

null == false // false

undefined == false // false

하나가 null 과 undefined 일 경우 다른 하나가 null 또는 undefined 이여야 true가 나옵니다.

  1. NaN
NaN == null // false
NaN == undefined // false
NaN == NaN // false

NaN은 어떠한 값과도 동일하지 않으며 자기 자신과도 동일하지 않습니다.

=== 연산자

일치연산자 (Strict Equality Operator)

=== 일치연산자는 이름에서도 확인할 수 있듯 엄격하게 두 값이 일치하는지 비교합니다. 동등연산자(==)는 형변환이 일어나지만 일치연산자는 형변환이 일어나지 않아 결국 타입과 값이 둘 다 일치하는지를 비교하게 됩니다.

1 === 1 	// true  

둘 다 같은 숫자 타입이고 같은 값을 가지고 있으므로 true 
"1" === "1" // true 

둘 다 문자열 타입이고 같은 값을 가지고 있으므로 true
1 === "1" 	// false 

숫자타입과 문자열타입의 비교이므로 false
1 === true 	// false 

숫자타입과 불린타입의 비교이므로 false
"hello" === "hi" // false 

같은 문자열타입이지만 값이 다르므로 false

== vs === 비교와 결론

== 연산자는 형변환이 일어난 느슨한 비교로 서로 같거나 다른 타입의 [값]을 비교합니다.

=== 연산자는 엄격한 비교로 [값과 타입]을 함께 비교합니다.

일치하는지를 비교해야 할 때 형변환이 일어나는 == 연산자를 사용한다면 원치 않는 결과가 발생할 수 있습니다. 확실한 비교와 안정성을 위해 === 연산자를 사용하며 형변환이 필요한 경우 직접 변환하는 것이 좋겠습니다.

결론 : === 을 사용하자!

동등비교연산자와 일치비교연산자에 대해 정리해보았습니다.
아래 표도 참고해서 보시면 좋을 것 같습니다.

Equality 와 Strict Equality 표

출처-https://dorey.github.io/JavaScript-Equality-Table/

참고

profile
bobby
어제보다 오늘 더!

0개의 댓글