11. 동등 연산자(==) vs 일치 연산자(===)

안녕하세요. 박기린 입니다.

자바스크립트는 비교 연산자에서 '같다'의 표현이 두 가지가 있다는 사실을 지난 글에서 확인했습니다.

이에 대해 좀 더 집중적으로 공부해보겠습니다.

 

---

 

== vs ===

'=='는 '느슨하게 같다, 동등하다'의 의미를 지닌 연산자입니다. JS 엔진 내에서 자체적으로 피연산자의 데이터 타입을 coercion 한 뒤에 비교를 합니다. 즉, 타입이 달라도 내용물이 같으면 true를 return 합니다.

 

'==='는 '엄격하게 같다, 일치하다'의 의미를 지닌 연산자입니다. 다른 프로그래밍 언어에서 쓰이는 '=='연산자와 동일한 역할을 한다고 보시면 됩니다. '=='와는 다르게 데이터 타입까지 완전히 동일해야 true를 return 합니다.

18 === 18 // true
18 == 18 // true
18 === '18' // false
18 == '18' // true

하지만 되도록이면 '=='연산자는 쓰지 맙시다. 데이터 타입의 불일치로 인한 버그를 유발할 수 있기 때문입니다.

 

---

== 응용

prompt() 함수는 브라우저에서 유저가 값을 입력할 수 있는 팝업을 띄웁니다. 입력받은 값을 변수에 저장할 수 있는데, 그 변수의 데이터 타입은 String으로 고정되어 있습니다.

const favourite = prompt("What's your favourite number?");
console.log(favourite); //'23'
console.log(typeof favourite); // String

if (favourite == 23) { // '23' == 23
 console.log('Cool! 23 is an amazing number!');
}

위의 예제 코드를 보시면, 비록 prompt로 받은 값은 String이지만 Number 타입인 23과 '==' 비교를 통해 true를 반환했음을 알 수 있습니다. 일일이 String을 Number로 반환하는 번거로움이 없다는 장점이 있습니다. 하지만..

 

const favourite = Number(prompt("What's your favourite number?"));
console.log(favourite); // 23
console.log(typeof favourite); // Number

if (favourite === 23) { // 23 === 23
 console.log('Cool! 23 is an amazing number!');
}

간단한 프로그램이라도 '==='연산자를 사용하도록 합시다. '==' 사용을 피하기 위해서 Number()를 이용해 타입을 고정시키고 '==='를 사용하는 것이 바람직합니다.

---

 

!= vs !==

'같지 않음'의 의미를 지닌 연산자도 두 가지로 나뉩니다.

'=='와 비슷하게 데이터 타입을 신경쓰지 않는 '!='.

'==='와 비슷하게 데이터 타입까지 엄격하게 따지는 '!=='.

const favourite = Number(prompt("What's your favourite number?"));
if (favourite !== 23) console.log('Why not 23?');

이 역시 엄격한(!==) 버전으로 사용하도록 합시다.