[자바스크립트 기초] == vs === 차이

자바스크립트에서는 언뜻 같은 기능을 하는거 같아 보이는 비교 연산자가 있습니다. 

바로 == , === 입니다.

둘은 어떤 차이가 있을까요?

 

생긴것만 보면 ===은 등호가 많으니까 완전히 같아야할것 같고 , == 조금 덜 같아도 될 것 같은 느낌이 듭니다. 

실제로 === 는 Strict equality operator 라고 불리고 == Loose equality operator 라 불리는데요. 

 

 

실제로 어떤 차이가 있는지 코드를 통해 알아보도록 하겠습니다. 

 

== vs ===

const age = 18;
if (age === 18) console.log('You just became an adult (strict)') ;
if (age == 18) console.log('You just became an adult (loose)');

output :

첫번째 코드에서는 두개 모두 같은 기능을 하는 것 같아보입니다.

 

 

하지만 두번째 코드에서는 ==(Loose equality operator)에서만 실행이 되었습니다. 

const age = '18';
if (age === 18) console.log('You just became an adult (strict)') ;
if (age == 18) console.log('You just became an adult (loose)');

output :

왜 이런 현상이 발생했을까요?

첫번째 코드와 차이가 있다면 age 에 지정된 18은 콤마로 둘러 쌓여 있어 string type입니다. 

 

즉 if 내에 비교되는18(type이 Number)과는 다른 타입이죠.

일반적으로 다른 언어에서는 값이 같아도 type이 다르면 다른 값으로 보지만 자바스크립트에서는 연산 종류에따라 타입이 같아져 버리는 경우가 있습니다. 이를  type Coercion 이고 불리는데요. (해당 내용이 익숙치 않으시면 해당 포스팅을 참조바랍니다.)

 

boolean 연산을 수행할때는 string 값이 자동적으로 숫자값으로 변경이 됩니다.

위 코드에서는 최초 age가 string이었지만 == 연산을 하면서 Number로 변경되었고, 결과적으로 같은 값으로 인식한거죠.

하지만 ===(Strict equality operator)는 이 기능을 억제해 버립니다. 다시 말하면 무조건 타입이 같고, 값도 같아야지 같은 값으로 인식한다는 것이죠.

 

그럼 등호가 성립하지 않을경우는 어떻게 적을까요? 마찬가지로 Strict , Loose 두 version 이 있는데요.

아래와 같이 적습니다. 

Strict :  !==

Loose:  !=

 

느낌표가 추가됨에 따라 = 갯수는 하나씩 줄었지만 여전히 =가 많은것이 Strict이고, 더 적은게 Loose 입니다.

마찬가지로 Strict는 type coersion을 억제합니다. 

 

Loose equality operator 타입을 일일이 변경 시켜줄 필요가 없어 편리한 기능처럼 보이지만, 자칫 원하지 않는 버그가 발생할 수 있으니 === 를 사용하시고 타입을 직접 변경 해주는 방법으로 습관을 들이시기 바랍니다. :)