[javascript] == 와 === 의 차이

java 에서는 자료형이 int, double, long ... 의 원시 자료형이 있고, Integer, Double, Long 등의 래퍼클래스의 자료형이 존재한다. 그러나 javascript 에서는 명확한 자료형이 존재하지 않는다.

자바스크립트에서 변수를 선언할때 var 외에도 let, const가 존재하지만 이는 자료형을 나누는 것이 아니라 변수의 스코프, 중복선언이나 재할당의 여부 등의 차이가 있고 자료형의 구분에 쓰이지 않는다.

 

그래서 자바스크립트에서는 값을 비교할때 ==, === 두가지 형식으로 비교할 수 있다.

 

== (Equal Operator, 동일 연산자)

==는 동일 연산자라는 뜻이다. a와 b의 '값'이 같을때 true, 아닐때 false를 반환한다.

var a = 1;
var b = "1";

console.log(a == b);

이 경우, true 값이 나오게 된다.

위의 코드를 java로 생각한다 int 타입의 변수 a와 String 타입의 변수 b를 비교하는 것이 된다.

 

=== (Strict Equality Operator, 일치 연산자)

==에서 =가 하나 더 붙은 이 연산자는 일치연산자이다. a와 b의 값은 물론 같아야 하며, 타입까지 같아야 true값을 반환하게 된다.

var a = 1;
var b = "1";

console.log(a === b);

var c = 1;

console.log(a === c);

이 경우, 첫번째 console.log에서는 false 값이 나오게 될것이고 아래에서는 true 값이 나오게 될 것이다.

이처럼 일치연산자는 자바스크립트에서 동일 연산자보다 엄격한 비교를 한다.

 

일치 연산자로 알아보는 다른 값

console.log(null == undefined); 
console.log(null === undefined);

위에서는 true값이, 아래에서는 false값이 반환된다.

 

NULL 값과 undefined는 둘다 아무 값이 없다는 의미긴 하지만, 세부적인 부분에서 차이를 가지고 있기 때문이다.

먼저 undefined 라는 단어는 확정되지 않았다는 뜻을 포함하고 있다. 이를 변수와 연관지어서 생각해보면 변수는 선언했지만 값이 할당되지 않아 확정되지 않았다고 할 수 있지 않을까 싶다. 즉, 변수에 값을 할당하지 않았을 때 자동으로 들어가는 값이다. 변수가 undefined가 반환되는 정확한 경우는 아래와 같다.

• 값을 할당하지 않은 변수
• 메서드와 선언에서 변수가 할당받지 않은 경우
• 함수가 값을 return 하지 않았을 때

 

NULL 값은 undefined와는 다르게, 의도적으로 비어있는 값을 넣어준 상태이다. 값이 지정되지 않아서 비어있는 것이 아니라, 해당 값이 비어있다고 명시하고 빈 값을 할당한 상태인 것이다.

 

그렇기 때문에 두 비교에서 동일연산자로 비교시에는 '값이 비어있는 상태' 가 같으므로 true가 반환되고, 일치 연산자로 비교하면 세부적인 상태가 다르기에 false를 반환한다.

var a = [1,2,3,4];
var b = [1,2,3,4];

console.log(a == b);
console.log(a === b);

자료형이 아닌 객체나 배열의 경우, a와 b의 값이 같고 데이터 타입도 같아보인다.

그러나 객체는 메모리 주소에 할당된 값을 참조하기 때문에 a와 b는 참조하는 메모리 주소가 달라 동일연산, 일치연산 둘다 false를 반환한다.

 

 

 

이 외에도 NaN이나 다른 값을 일치 연산자를 통해 비교해본다면 변수들이 비슷해 보이지만 다른 값을 지니고 있단걸 알 수 있다.