?😵💫? JavaScript ==과 ===의 차이?😵💫?
JavaScript에는 ===, !== 연산자와 ==, != 연산자가 존재한다. 이 두 가지는 얼핏 같은 결괏값을 도출할 것 같지만 전혀 다른 값을 도출하기도 한다.
양쪽이 동일한 값인지 등호를 넣어 비교하는 비교 연산에는 등호를 세 개 넣어 사용하는 일치 연산자와 등호를 두 개 넣어 사용하는 동등 연산자가 있다.
느슨한 동등연산자 ==, !=
-
등호를 2개 사용하는 동등 연산자
양쪽의 값이 같을 경우에는 ==(동등),
양쪽의 값이 같지 않을 경우에는 !=(부등)
을 사용한다.느슨한 유형변환 비교를 하는 동등 연산자는 말대로 양 쪽의 값을 비교할 때 형변환이 일어나며 값을 도출한다.
엄격한 일치연산자 === , !==
-
등호를 3개 사용하는 일치연산자
양쪽의 값이 같을 경우에는 ===(일치),
양쪽의 값이 같지 않을 경우에는 !==(불일치)
를 사용한다.엄격한 일치연산자는 동등연산자와 달리 양 쪽의 값을 비교할 때 형변환이 일어나지 않는다.
🧐
동등연산자와 일치연산자의 설명은 이게 전부이지만
실제 코드가 어떻게 출력이 되는지 보는 것과 보지 않고 설명만 보는 것에는 차이가 있다.
구체적으로 일치연산자와 동등연산자가 어떻게 다른 지 알 수 없기 때문이다.
형변환이 가능하다와 불가능하다로만 나누기에는 두 연산자에는 조금 더 구체적인 차이가 있다.
양쪽의 값을 비교하는 데에 사용된다는 것에서 두 연산자는 큰 차이가 없는 것 같지만 그 값이 어떻게 도출되는지를 비교했을 때에는 큰 차이가 있음을 알 수 있다.
✔ 동등연산자의 경우
동등연산자가 형변환이 가능하다는 것은 값을 비교할 때 그 '값'만 비교한다는 뜻이다.
🏋️♀️ 예를 들어
1. console.log(3 == '3');
2. console.log(1 == true);위와 같은 상황에서 두 경우의 결괏값은 true 다.
☝ 첫번째의 경우,
왼쪽은 숫자, 오른쪽은 문자열이 들어가 같은 값이 아니라고 생각할 수 있지만 자바스크립트에서 동등연산자(==)는 이를 동일한 값이라고 판단한다.
숫자 3과 문자 3의 값이 같다고 판단하기 때문이다.
✌ 두번째의 경우도 마찬가지다. 숫자 1과 불린 true(boolean)는 전혀 다르지만 불린(boolean) true를 숫자로 변환시켰을 때 그 값이 1이기 때문에 이 또한 동등한 값이라고 판단하여 true라는 결과를 도출한다.
✔ 일치연산자의 경우
반면 일치연산자의 경우는 동등연산자와는 다르다. 형변환이 되지 않는 엄격한 연산자라고 불리울만큼 그 값을 도출하는 데에 엄격하다.
🏋️♀️ 위의 동등연산자와 같은 값의 예를 들 때,
1. console.log(3 === '3');
2. console.log(1 === true);두 경우의 결괏값은 false가 나온다.
이는 일치연산자가 두 값의 자료형이 일치하는가, 일치하지 않는가를 기준으로 결과를 판단하기 때문이다.
1번의 경우 3은 숫자형의 3이다. 오른쪽의 '3'은 문자열의 '3'이다.
일치연산자는 이를 숫자와 문자열을 비교한 것으로 판단하여 false라는 결과를 도출한다.
마찬가지로 2번의 경우도 숫자 1과 불린 true는 전혀 다른 형이기 때문에 이 또한 false라는 값을 도출하게 된다.
✍ 마무리
나같은 경우 많은 경우를 동등연산자(==)를 사용하였지만 일치연산자(===)를 알고난 뒤론 일치연산자를 쓰고 있다.
동등연산자의 경우 형변환이 일어나기 때문에 코드를 짤 때 예상하지 못한 형변환이 발생할지 모르기 때문이다.실제로 대부분의 사람들이 특별한 상황이 아니라면 일치연산자(===, !==)를 사용할 것을 권장하고 있다.
헷갈리는 == vs ===
이와 비슷한 undefined와 null의 차이 는 뭘까?
궁금하다면 👉 둘 다 똑같은 거 아니야? ver2
