Javascript ==, ===

김응진·2022년 12월 13일
0

JavaScript에는 ==와 ===가 있습니다.
==는 데이터 타입이 달라도 값이 같으면 true를 반환하고,
===는 데이터 타입과 값이 일치해야 true를 반환합니다.
그래서 보통의 경우 ===를 사용하는 것이 권장되는 편입니다.

==, === 각각의 공식적인 명칭은 abstract equality comparison operator, 
strict equality comparison operator 입니다. 

==(Equality Operator) 란?

== 연산자는 양쪽의 타입이 다른 경우, 타입을 강제로 형변환한뒤 비교합니다.
두 개의 피연산자의 타입이 달라도 같은 값인 경우 true를 반환합니다.

===(Strict Equality Operator) 란?

엄격한 Equal Operator로써 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false를 반환한다.

Primitive(기본 자료형)

- number타입과 string타입의 비교
num_five는 number타입의 5, str_five는 string타입의 "5"이지만,
==는 형변환을 통해 num_five와, str_five를 true를 반환합니다.
하지만 ===는 값 뿐만 아니라 값의 타입까지 비교하기 때문에 false를 반환합니다.

var num_five = 5; 
var str_five = "5"; 
console.log(num_five == str_five); // true 
console.log(num_five === str_five); // false 
console.log(typeof num_five); // "number" 
console.log(typeof str_five); // "string" 

- number타입과 boolean타입의 비교
보통 1은 true, 0은 false로 사용할 수 있지만,
==는 true로 반환하고,
===는 false로 반환합니다.

console.log(true == 1); // true 
console.log(true === 1); // false
console.log(typeof true); // "boolean" 
console.log(typeof 1); // "number" 

- null타입과 undefine타입의 비교
null과 undefine의 비교
==는 true로 반환하고,
===는 false로 반환합니다.

console.log(null == undefined); // true 
console.log(null === undefined); // false
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"

>> null과 undefined의 차이

null과 undefined를 그대로 해석하면 빈 값, 없는 값입니다.
undefined은 변수를 선언하고 값을 할당하지 않은 상태이고,
null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)입니다.
즉, undefined는 자료형이 없는 상태입니다.

- NaN타입과 NaN타입의 비교
NaN은 Not-A-Number(숫자가 아님)를 나타냅니다. 숫자가 아닌 것을 의미하지만 그 값 자체끼리는 같지 않습니다.

console.log(NaN == NaN); // false 
console.log(NaN === NaN); // false 
console.log(typeof  NaN); // "number"

>> Nan이란

NaN은 Not-A-Number(숫자가 아님)를 나타냅니다.
NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

function valueIsNaN(v) { return v !== v; }
valueIsNaN(1);          // false
valueIsNaN(NaN);        // true
valueIsNaN(Number.NaN); // true

Object type(객체형)

- 배열끼리 비교
배열을 할당할때, 각 변수는 각 메모리의 주소를 참조합니다.
array1과 array2는 값과 데이터 타입이 같지만,
참조하는 메모리의 주소가 다르기 때문에 ==, === 모두 false를 반환합니다.
새로운 변수 array3에 변수 array2를 할당해주면, 변수 array2가 참조하는 같은 메모리의 주소를 array3가 참조하게 되어 두 변수는 같습니다.
두 변수 모두 같은 메모리 주소를 참조하기 때문에, ==와 ===의 결과값은 모두 true를 반환합니다.

var array1 = new Array(); 
var array2 = new Array(); 
var array3 = array2; 
console.log(array1 == array2); // false 
console.log(array1 === array2); // false 

console.log(array2 == array3); // true 
console.log(array2 === array3); // true 

console.log(typeof array1); // "object"
console.log(typeof array2); // "object" 
console.log(typeof array23); // "object" 

- 객체끼리 비교
객체끼리의 비교 또한 위와 동일합니다.

var object1 = new Object(); 
var object2 = new Object(); 
var object3 = object2
console.log(object1 == object2); // false 
console.log(object1 === object2); // false 

console.log(object2 == object3); // true 
console.log(object2 === object3); // true 

console.log(typeof object1); // "object"
console.log(typeof object2); // "object"
console.log(typeof object3); // "object" 
``
profile
Developer

0개의 댓글