자바스크립트(JavaScript)에서는 값을 비교할 때 ==(동등 비교 연산자)와 ===(일치 비교 연산자)를 사용한다.
==(동등 비교 연산자)
==(동등 비교 연산자)는 좌항과 우항을 비교 할 때 암묵적 타입 변환을 통하여 타입을 통일 시킨 후 비교하게 된다.
1 == 1 // true
1 == "1" // true
1 == "2" // false위 의 코드를 보면 1 == "1"이 true로 나오게 되는데 true로 나오게 되는 이유는 ==연산자가 암묵적 타입 변환을 통해 좌항과 우항의 타입을 통일 시켜 같은 값임을 확인하였으므로 true로 나오게 된다.
반대로 1 == "2"의 경우에는 타입을 통일시켰지만 값이 다르므로 false가 나오게 된다.
===(일치 비교 연산자)
===(일치 비교 연산자)는 ==(동등 비교 연산자)와 달리 타입 변환을 하지않는 염격한 비교이기 때문에 좌항과 우항의 타입과 값이 일치해야 true를 반환한다.
1 === "1" // false
1 === 1 // true
"1" === "1" // true위의 코드를 보면 ==(동등 비교 연산자)에서는 1 == "1"가 true로 나왔지만 ===(일치 비교 연산자)를 이용해서 비교해보면 false가 나오게 된다.
그 이유는 ==(동등 비교 연산자)처럼 암묵적 타입 변환을 사용하지 않고 값과 타입을 비교하는 엄격한 연산자이기 때문이다. 그래서 1이라는 값은 같지만 좌항은 숫자타입 우항은 문자타입이기 때문에 타입이 달라 false가 나오게 된다.
그래서 우리는 ==(동등 비교 연산자) 보다는 ===(일치 비교 연산자)를 써야한다.
그 이유는 무엇일까?
==(동등 비교 연산자)는 값만을 비교하기 때문에 예측하기 어려운 결과를 나타내기 때문이다.
0 == "" // true
"0" == "" // false
false == "false" // false
false == null // false
false == undefined // false
false == "0" // true위의 코드를 보게 되면 0 == ""는 빈 문자열이 숫자타입으로 변환되면 0이 되니 true가 나온다.
"0" == ""는 둘 다 문자열이므로 타입변환은 안일어나고 값이 다르므로 false이다.
false == "false"는 타입변환을 해도 값이 다르므로 false이다.
false == null, false == undefined는 null과 undefined 둘 다 값을 가지고 있지 않으므로 비교할 수 없어 false가 나오게 된다.
false == "0"은 둘 다 숫자타입으로 변환되면 0을 가르키므로 true이다.
이처럼 ==(동등 비교 연산자)는 예측할 수 없는 결과가 나오게 되므로 되도록이면 사용을 지양하고 ===(일치 비교 연산자)를 사용하는것이 좋다.
0 === "" // false
"0" === "" // false
false === "false" // false
false === null // false
false === undefined // false
false === "0" // false==(동등 비교 연산자)를 사용했던 위의 코드를 ===(일치 비교 연산자)를 사용할 경우
0 === ""은 타입이 다르므로 false, "0" === ""은 타입은 같지만 값이 다르므로 false, false === "false", false === null, false === undefined, false === "0"는 타입이 다르므로 false이다.
===(일치 비교 연산자)를 사용할 경우 확실한 비교가 되기 때문에 사용하는 것이 좋다.
참고한 사이트
https://ablue-1.tistory.com/99
https://poiemaweb.com/js-operator
