[Effective JavaScript]혼합된 데이터형을 ==로 비교하지 마라

김범식·2023년 6월 15일
0

Effective JavaScript

목록 보기
20/33
post-thumbnail
"1.0e0" == { valueOf:function(){ return true;}}; //true;

결과적으로 true가 반환된다. 이는 자바스크립트의 강제 형변환 때문이다.

  • “1.0e0” 은 숫자형 1로 파싱된다.
  • true로 반환된 값이 다시 1로 파싱된다.




    웹 입력 양식에서 값을 읽어와 숫자와 비교하는 작업도 이런 강제 형변환을 사용하곤한다.
var today = new Date();

if( from.month.value == (today.getMonth() +1) && from.day.value == today.getDate()){
	console.log("생일 축하합니다")
}

이과정에서 강제 형변환을 사용한다.




만일 값을 명시적으로 숫자로 변경하고 싶다면

var today = new Date();

if( +from.month.value == (today.getMonth() +1) && +from.day.value == today.getDate()){
	console.log("생일 축하합니다")
}

두연산자가 동일한 자료형이라면 ==, === 나 별 차이가 없다.




코드를 읽는 사람에게 형변환이 연관되지 않는다는 점을 확실히 보여주는 더 좋은 방법은 엄격한 동일 비교를 사용하는 것이다.

이런 강제 형변환 법칙은 전혀 명백하지가 않다.

인자타입1인자타입2강제 형변환
nullundefined없음 : 한상 true;
null 또는 undefinednull 또는 undefined이 아닌 다른타입없음 : 항상 false;
원시 데이터형 문자열, 숫자 또는 불리언Date 객체원시 데이터형 ⇒ 숫자 Date 객체 ⇒ 원시 데이터 형 (toString() 먼저 시도후 valueOf())
원시 데이터형 문자열, 숫자 또는 불리언Date 가 아닌 객체원시 데이터형 ⇒ 숫자 Date 객체 ⇒ 원시 데이터 형 (valueOf() 먼저 시도후 toString())
원시 데이터형 문자열, 숫자 또는 불리언원시 데이터형 문자열, 숫자 또는 불리언원시 데이터형 ⇒ 숫자

객체를 다룰때 연산은 valueOf()toString() 메서드를 호출하여 객체를 원시 데이터형 값으로 변환하려고 할 것이고, 그중 처음으로 얻게 되는 원시 데이터 값을 사용할 것이다. 더 이상한 점은 Date() 객체는 이 두메서드를 반대 순서로 시도한다는 것이다.

우리가 사용하는 데이터의 표현이 어떤 것인지 자바스립트가 알아내기에는 세상에 너무나 많은 데이터의 표현이 있다. 예를 들어, 여러분은 Date객체가 포함하는 날짜 문자열을 비교하고 싶을 수도 있다.

var date = new Date("1999/12/31");
date =="1999/2/31"; // false

이는 Date에 사용한 문자열과 다른 문자열을 반환하기 때문이다.

data.toString() // "Fri Dec 31 1999 00:00:00 GMT-0800 (PST)"





따라서 사용자가 정의한 애플리케이션 로직과 엄격한 동일비교 연산자를 사용하여 명시적으로 형변환하는것이 더 나은 정책이다.

function toYMD(data){
	var y = date.getYear() + 1900, //year는 1900부터 색인된다. 
			m = date.getMonth()+ 1,k //month는 0부터 시작한다. 
			d = data.getDay();
return y + "/" + (m < 10 ? "0"+m : m)+ "/" + (d < 10 ? "0"+d : d);

toYMD(date) === "1999/12/31" // true

이처럼 명시적으로 형변환하면 == 의 강제 형변환 규칙을 섞어 쓰지 않는다는 사실을 보장하고, 코드를 읽는 사람이 강제 형변환 규칙을 찾아보거나 기억하지 않아도 되기때문이다.



기억할 점

  • == 연산자는 인자들이 서로 다른 데이터형일 때, 일련의 혼동스러운 암묵적인 강제 형변환을 적용시킨다.
  • 비교가 어떠한 암묵적인 강제 형변환과도 연관이 없다는 사실을 코드를 읽는 사람에게 명확하게 전달하기 위해서 === 를 사용하라
  • 비교할 값이 서로다른 데이터형이라면 프로그램의 동작을 더 명백히 하기 위해 직접 명시적인 강제 형변환을 사용하라
profile
frontend developer

0개의 댓글