[javascript] === / !== / == / != 의 다른 점은 무엇일까 ?

 

---

 

💡

오늘은 알아두면 좋은 개념인 동치연산자에 대해 알아보겠습니다.

동치연산자 : 동등 == / 부등 != / 일치 === / 불일치 !==

 

 

일치 / 불일치 연산자 : === / !==

 === 일치 또는  !== 불일치 연산은  타입(type) 과  값(value)  두 가지가 같아야 한다.

number 타입인 경우, 같은 타입인 number와 같은 값인 5에 대해 호응!

console.log(5 === 5)		//true
console.log(5 === '5')		//false (number, string)

console.log(5 !== '5')		//ture (number, string)
console.log(5 !== 5)		//false

 

동등 / 부등 연산자 : == / !=

 ==  동등연산 또는  !=  부등연산은 강제 형변환(type coercion) 을 수행하여 비교 전 공통타입으로 만든다.

console.log(5 == '5')		//true

console.log(5 != '5')		//false
console.log(5 != 5)		//false
console.log(5 != 0)		//true

 

falsy

그렇다면 0과 false를 비교해 보면?

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

 

false일 줄 알았으나 false == 0 은 true 값이 나오는 이유는 자바스크립트에서 0은 falsy의 값이기 때문!

자바스크립트는 0을 강제로 false 변환을 시켜버렸고 false로 변환된 0은 결국 false와 같게 된다.

✅ 자바스크립트의 falsy의 6가지 값 ✅

false , 0 , null , " " , undefined , NaN

 

console.log(false == 0)			//true
console.log(false == "")		//true

// null과 undefined는 서로 같으며 자기 자신도 같음
console.log(null == null)		//true
console.log(null == undefined)		//true

// NaN은 어떠한 값(자기자신 포함)도 동일하지 않음
console.log(NaN == null)		//false
console.log(NaN == undefined)		//false
console.log(NaN == NaN)			//false

 

결론

 ===  일치 및  !==  불일치 연산자는  ==  동등 및  !=  부등연산자 보다 확실히 비교할 수 있고 피연산자들이

갖는 타입(type)과 값(value)의 비교가 정확하므로 일치/불일치 연산자를 쓰는 것을 추천한다!