javascript 동등 연산자

javascript 동등 연산자는 자바스크립트에서 사용할 때 타입 강제 변환이 일어나 다루기 까다롭습니다. 타입 강제 변환이란 연산을 수행할 때 특정 타입이 다른 타입으로 자동으로 변환되는 것인데 이 때문에 예상치 못한 결과가 나타나기도 합니다.

 

주로 ==와 != 연산자를 사용할 때 타입 강제 변환이 일어납니다. 이 두 연산자는 서로 다른 데이터 타입을 비교할 때 타입을 강제로 변환하고 같은 데이터 타입을 비교할 때는 타입을 변환하지 않습니다. 우리가 작성하는 코드에는 수많은 인스턴스가 존재하기에 동등 연산자 사용 시 우리가 예상하는 대로 흘러가지 않을 수도 있습니다.

 

 숫자와 문자열을 비교할 때는 먼저 문자열이 숫자로 변환되고 그 후 비교 연산이 수행됩니다.

 

// 숫자 5와 문자열 5
console.log(5 == "5"); // true

// 숫자 25와 문자열 형태의 16진수 25
console.log(25 == "0x19"); // true

타입 강제 변환이 수행되면 문자열은 Number()라는 캐스팅 함수를 사용한 것처럼 숫자로 변환됩니다.

Number()는 16진수 포맷을 지원하여 예제처럼 16진수 숫자를 가진 문자열을 10진수로 변환하고 비교 연산을 수행합니다.

 

boolean 값을 숫자와 비교하면 boolean은 비교 연산을 수행하기 전에 먼저 숫자로 변경됩니다. false는 0으로, true는 1이 됩니다.

 

// 숫자 1과 true
console.log(1 == true); //true

// 숫자 0과 false
console.log(0 == false); //true

// 숫자 2와 true
console.log(2 == true); //false

객체를 객체가 아닌 값과 비교하면 객체의 valueOf() 메서드를 호출해서 얻은 기본 데이터 타입 값으로 비교 연산을 수행합니다. valueOf()가 없으면 toString()를 호출합니다. 그 이후부터는 비교 대상이 같은 타입이 아니면 강제 변환을 수행한 후에 비교 연산을 수행합니다.

var object = {
	toString: function() {
    	return "0x19";
    }
};

console.log(object == 25); //true

객체의 toString() 메서드는 16진수 형식의 문자열 "0x19"를 반환하고 반환된 문자열은 25와 비교하기 전에 숫자로 변환되어 결과적으로 이 객체는 숫자 25와 같다고 판단합니다.

 

타입 강제 변환이 일어나는 타입 중 마지막으로 다룰 타입은 null과 nudefined입니다. 이 두개의 특별한 값은 ECMAScript 표준에 따르면 같은 값으로 판단합니다.

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

 이렇게 타입이 강제로 변환되므로 ==와 !=는 사용하지 말고 대신 ===와 !==를 사용해야 합니다. ===와 !== 연산자는 타입 강제 변환 없이 비교 연산을 수행합니다. 이 연산자는 비교할 타입이 서로 다르면 타입을 변환하지 않고 비교 연산을 수행하는데, 이렇게 타입 강제 변환 없이 비교 연산을 수행하는 편이 더 일관성 있습니다. ==와 ===는 다음과 같은 몇 가지 경우에 차이가 있습니다.

//숫자 5와 문자열 5
console.log(5 == "5"); //true
console.log(5 === "5"); //false

// 숫자 25와 16진수 문자열 25
console.log(25 == "0x19"); //true
console.log(25 === "0x19"); //false

// 숫자 1과 true
console.log(1 == true); //true
console.log(1 === true); // false

// 숫자 0과 false
console.log(0 == false); //true
console.log(0 === flase); //false

// 숫자 2와 true
console.log(2 == true); //false
console.log(2 === true); //false

var object = {
	toString: function() {
        return "0x19";
    }
};

// 객체와 숫자 25
console.log(object == 25); //true
console.log(object === 25); //false

// Null과 undefined
console.log(null == undefined); //true
console.log(null === undefined); //false

크락포드의 코드 컨벤션과 jQuery 코어 스타일 가이드, SproutCore 스타일 가이드에서는 ===와 !== 사용을 권장합니다. 크락포드의 가이드에서는 0, 빈 문자열, null, undefined와 같이 false로 변환되는 값을 제외하고는 ===와 !==를 사용할 것을 권장합니다. jQuery 코어 스타일 가이드는 값이 null인지 undefined인지 확인이 필요할 때는 == 비교 연산자를 이용해 null과 비교하는 것은 허용합니다. 하지만 개인적으로는 예외 없이 ===와 !==를 사용할 것을 권장합니다.

 

JSHint는 기본적으로 == 와 != 연산자 사용 시 경고 메시지를 출력합니다. 또 JSHint는 기본적으로 ==와 !=를 사용하여 false와 비교하면 경고 메시지를 출력합니다. eqeqeq 옵션을 추가하면 ==와 !=를 사용하는 모든 곳에 경고 메시지를 출력하게 할 수도 있습니다.

 

그럼 이것으로 javascript 동등 연산자에 관한 정리를 마치겠습니다.

 

그럼 이만.

끝.