본문 바로가기
개발/자바스크립트

[자바스크립트] =, == , === 의 차이에 대해서

by 핸디(Handy) 2020. 7. 23.

일반적으로 프로그래밍 언어 자체는 비슷합니다. 그래서 한 언어에 익숙해지면 다른 언어도 쉽게 배울 수 있죠.

하지만 각 언어만의 특이하고 편한 문법들이 있는데

이번 포스트에서는 JavaScript의  =, ==, === 세 친구에 대해 알아볼 것입니다.

일단 

=  <- 이 친구는 대입 연산자입니다. 말 그대로 값을 때려 박을 때 쓰는 친구입니다.

var a = 1;
let b = 3;
const c = '5';

 이제 중요한 == 와 === 로 넘어가 봅시다.

== 는 많이 보셨을 겁니다. 다른 언어에서도 자주 보이는 친구니깐요. 동등(coercive) 연산자라고 합니다. 값을 비교해주죠.

var a = 3;
var b = '3';
let c = 3;
a == b // true
a == c // true
b == c // true

이런 결과를 줍니다.

이젠 === 를 비교해봅시다. 일치(strict) 연산자라고 합니다.

var a = 3;
var b = '3';
let c = 3;
a === b // false
a === c // true
b === c // false

결과는???입니다. 같은 비교 연산자인데 아래에는 false 가 많아요. 

false 가 뜬 이유는 ==와 ===의 형 변환 차이 때문입니다.

==는 양 옆의 값을 비교하기 전에 강제 형 변환(Type Coercion)를 수행합니다. 강제 형변환 과정을 통해 피 연산자들을 공통 타입으로 만들고 그 안에 있는 값만을 비교하는, '느슨한 비교'를 합니다.

하지만 === 의 경우, 강제 형변환 과정을 수행하지 않는 '엄격한 비교'이기 때문에 false 가 뜨는 것입니다. 엄격한 비교이기에 이름도 'strict equality'입니다

==와 ===를 구별하는 이유는

타입을 따로 지정해주지 않는 자바스크립트의 변수 특성상 이를 구별하기 위해 만든 것이라고 생각합니다.

==와 ===의 구별은 주력 언어가 자바였던 저에겐 애매하면서도 편한 연산자였습니다.

가끔씩 String 숫자와 int 숫자를 비교하기 위해 형 변환이라는 추가적인 작업을 해야 했던 자바와는 달리,

느슨한 비교인 == 를 사용하면 간단히 비교할 수 있었기 때문입니다. 하지만 이러한 편리함은 잠시 가급적으로 ==보다 ===를 쓰는 것이 좋다는 코드 리뷰를 받았습니다. 

타입을 신경 쓰지 않고 비교를 하게 되는 ==는 원하지 않는 값 체크가 발생해도 판별하기가 어렵기 때문에 확실한 비교가 보장되는 === 를 쓰라는 것이 이유였습니다.

이것으로 ==, ===, 그리고 =에 대한 포스트를 마무리하겠습니다.

댓글