[JavaScript] =, ==, === 차이

이번 글에서는 비슷하게 생긴 3가지 연산자 ① =, ② ==, ③ ===에 대해서 소개하겠습니다.

 

① = 연산자 (대입 연산자)

= 연산자는 다른 프로그래밍 언어에서 사용되는 것과 같이 대입 연산자로 사용됩니다. 변수에 값을 저장하기 위해서 사용하며, = 연산자를 연속으로 사용해서 같은 값을 여러 개의 변수에 저장할 수 있습니다. 

let x = 5;
let y = 10;
let z = x * y; // z is 50

x = y = z; // x, y and z are all 50

 

② == 연산자 (동등 연산자)

== 연산자는 두 피연산자를 비교하여 불리언 값을 반환하는 동등 연산자입니다. 자바스크립트에서 == 연산자의 특징은 피연산자의 형 변환(Type Coercion)을 수행한다는 점입니다. 문자열 '1'이나 숫자 1은 자료형이 다름에도 불구하고, 동등하다고 판단하는 것입니다. 

* +0과 -0은 같은 값으로 인정됩니다. 만약 하나의 피연산자라도 NaN이라면 false를 반환합니다. 따라서, NaN은 NaN과 동일하지 않습니다.

** 만약 피연산자 중 하나가 null이나 undefined라면, 다른 피연산자도 null이나 undefined이어야 true를 반환합니다. 

1 == "1"; // true
0 == false; // true
0 == null; // false
0 == !!null; // true

(4번째 줄에 사용된 !! 연산자는 NOT 연산자를 연속으로 사용한 것입니다. 이는 어떠한 값이 대응하는 불리언 값으로 강제 변환할 때 사용합니다.)

 

이처럼 형 변환을 한 뒤에 값을 비교하는 == 연산자는 loose equality라고 부릅니다. 느슨하게 비교하기 때문에 편리함도 있지만, 여러 값을 비교하다 보면 상식과는 다른 결과를 발견할 수 있습니다. 

"0" == 0 // true
0 == [] // true
[] == "0" // false

"0"은 0과 같고 0은 []과 같다는 것을 확인했지만, []과 "0"은 다르다는 값을 얻게 됩니다. 이 문제를 해결하기 위해서 자바스크립트에는 === 연산자가 있습니다. 

 

③ === 연산자 (일치 연산자)

=== 연산자는 == 연산자와 마찬가지로 두 피연산자를 비교하여 불리언 값을 반환합니다. 하지만 피연산자의 형 변환을 하지 않고, 서로 다른 자료형을 다른 것으로 판단하는 일치 연산자입니다. === 연산자는 반대로 strict equality라고 부릅니다.

* 만약 두 피연산자가 모두 null이거나, 모두 undefined일 때만 true를 반환합니다. null과 undefined를 다른 것으로 봅니다.

 

다음 코드는 == 연산자와 === 연산자의 차이를 보여주게 됩니다. 앞서 작성된 코드들과 비교해보시길 바랍니다.

1 == "1"; // false
0 == false; // false
0 == null; // false
0 == !!null; // false

"0" == 0 // false
0 == [] // false
[] == "0" // false