티스토리 뷰

javascript에는 비교연산자가 2종류가 있습니다. 하나는 다른 언어에서도 일반적으로 사용되는 동등 연산자 두개짜리(==) 연산자와 javascript에만 존재하는 동등 연산자 세개짜리(===) 연산자가 있습니다. 이 두 연산자는 각각 다른 역할을 하지만 javascript를 처음 접하거나 제대로 익히지 못한 초보자분들이 많이 헷갈려 하는 경우가 많습니다. 이번 포스팅에서는 이 두 연산자의 차이점에 대해 소개하도록 하겠습니다.

Loose Equality - 느슨한 비교


대부분의 다른 언어에서 흔히 볼 수 있는 동등 연산자 두개짜리(==)는 느슨한 비교를 하는 연산자 입니다. 따라서 == 연산자를 이해하려면 느슨한 비교가 무엇이고 어떻게 사용되는지에 대해 알아야 합니다.

console.log(false == 'false');   // true
console.log(123 == '123');       // true
console.log('eqaul' == 'equal'); // true

위의 예제에서 3가지 조건식은 모두 true 값을 출력합니다. 첫번째 라인은 boolean과 string, 두번째 라인은 number와 string의 비교 인데 어떻게 true 값을 반환하는지 이해가 안될 수 있습니다. 하지만 느슨한 비교는 두 값의 타입이 다르더라도 변환을 통해 같은 값으로 취급될 수 있다면 true로 처리하게 됩니다.

 

첫번째 라인의 경우 false라는 문자열을 parseBoolean으로 변환하면 false 값이 나오므로 두 값이 동등하다고 볼 수 있습니다. 또한 두 번째 라인역시 123이라는 문자열을 parseNumber로 변환하면 두 값이 동등하다고 볼 수 있습니다.

 

이처럼 느슨한 비교는 두 값의 타입이 일치하지 않아도 동등하다고 처리하기 때문에 의도하지 않은 동작을 할 수 있는 위험성이 있습니다.

Strict Equality - 엄격한 비교


javascript에만 있는 동등 연산자 세개짜리(===)는 엄격한 비교를 하는 연산자 입니다. 엄격한 비교는 다른 언어의 비교 연산자와 같이 같은 객체를 가리키거나, 값과 타입이 같아야 동등하다고 처리하는 연산자입니다. 

console.log('33' === 33)      //false
console.log('true' === true)  //false
console.log(123 === 123)      //true

위 예제처럼 변수의 값은 물론이고 형식까지 같아야 true 값을 반환합니다.

마치며


정리하자면 dobule equals는 느슨한 비교를 수행하며 같은 객체를 가리키거나, 값이 같거나, 타입이 다르지만 같은 값으로 형 변환이 가능하다면 동등하다고 처리하며, triple equals는 엄격한 비교를 수행하며 같은 객체를 가리키거나, 값이 같고 타입이 같으면 일치 하다고 처리합니다. 이는 불일치, 부등 연산자 (!==, !=) 에도 동일하게 동작합니다.

댓글
댓글쓰기 폼
Total
491,241
Today
40
Yesterday
424
링크
«   2020/09   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      
글 보관함