JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (3)

자바스크립트(javascript)

동등 연산자 (==), (===) 어떤 방식으로 비교를 하길래 혼란스럽게 하는가

 

순번	링크페이지 아래 제목을 클릭하면 해당 링크페이지로 이동 됩니다.
1	JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (1)
2	JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (2)
3	JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (3)

 

▶ 느슨한 등호(==)를 사용 시 문제 발생 경우

💻 prototype 메서드를 수정 시 (==) 비교 

이번 정리할 내용은 느슨한 등호(==)를 사용했을 때,

뇌를 강하게 때려 맞은 듯한 말도 안 되는 경우를 많이 살펴볼 것이다.

 

이 내용을 본 이후 앞으로는 느슨한 등호(==)를 사용하지 않기를 바라며..

어떤 경우가 있는지 확인해보자.

 

Number 타입의 prototype을 변경하여 (==) 비교해볼 건데,

이 Number 타입이 가지고 있는 내장 메서드를 변경을 해서 비교를 해볼 것이다.

 

MDN Number 타입 ☜ 링크

위 링크로 들어가면 Number 타입에 관련된 내용이 있으니, 참고하면 된다.

 

 

Number 타입의 내장 메서드

위 메서드 중 valaueOf()라는 메서드를 수정을 진행해 볼 것이다.

Number 타입은 강제 형 변환이 일어나면 내부 메서드를 자동으로 valueOf()를 호출하여

값을 반환받기 때문에, 

 

이 경우를 이용하여 강제 형 변환이 일어났을 시에 어떤 결과를 가져오는지 확인하기 위해서이다.

Number.prototype.valueOf = function(){
	return 100;
}
var num = new Number(10);

if(num == 100){
	console.log('yes');
}

 

저 console.log 는 출력이 될까?

말도 안 되겠지만 'yes' 출력이 된다. 

 

new Number(10) 값

 

저 num이라는 변수는 분명 10이라는 원시 숫자 값을 가지고 있다.

그런데 (==) 비교를 해보면 100과 같다고 나온다.

 

왜 그럴까? 

이전 글에서도 (==) 등호를 이용하면 강제 형 변환이 된다고 정리를 했었다.

저 경우도 강제 형 변환이 일어나서 그렇다.

 

자 하나씩 살펴보면,

Number 타입은 (==) 비교 시에 ECMAScript5 spec 9.1 ToPrimitive 규칙에 의해 형 변환이 일어나는데,

이때 형 변환을 하기 위해 Number 타입은 자신의 메서드 valueOf 메서드를 사용한다.

 

그래서 if(num == 100) 구문에서 num 은 100이 되는 것이다.

 

 

반응형

---

 

💻 거짓 비교 

이번엔 많이 사용하는 구문이며, 이전 글에서도 정리를 했던 내용도 있을뿐더러,

아닌 경우도 있기에 한 번 정리해보자.

if('0' == null){
	console.log('1번 - yes');
}

if('0' == undefined){
	console.log('2번 - yes');
}

if('0' == false){
	console.log('3번 - yes');
}

if('0' == NaN){
	console.log('4번 - yes');
}

if('0' == 0){
	console.log('5번 - yes');
}

if('0' == ''){
	console.log('6번 - yes');
}

 

위 출력은 몇 번이 될까? 

답은 3번, 5번이 출력이 된다.

 

1번 if문 구문2번 if문 구문

 

이 두 개의 구문에 관련된 null과 undefined에 관련된 이전 글 링크 ☜  에서 정리를 해놨으니 참고를 하면 된다.

 

null과 undefined는 ECMAScript5 spec 11.9.3.2 ~ 11.9.3.3 정의된 내용을 보면null과 undefined 가 느슨한 등호(==) 비교할 경우에만 true를 반환한다고 정의되어있다.

 

즉, 위 1번과 2번 if문 구문을 보면 문자열 '0'과 (==) 비교를 하고 있다.그러므로 false이다. 이유는? 말했지만 null과 undefined만 느슨한 등호(==) 비교할 경우에만 

true를 반환하기 때문에 위 1번과 2번 if문을 통과를 못하는 것이다.

 

 

3번 if문 구문

이 구문은 왜 통과가 될까? 이건 잘 모르겠다.. 어떤 형 변환 규칙도 적용이 안되고,

찾아보면 자바스크립트가 이 구문에 대한 거짓 부정을 하지 않는다는 것...

 

 

4번 if문 구문

NaN 은 형 변환을 하면 무조건 거짓이다.

그러므로 if문을 통과하지 못한다.

 

5번 if문 구문

이전 글 링크 ☜ 이 글 내용 참고

문자열 '0'과 숫자 0은 숫자 0을 문자열로 강제 형 변환해서 (==) 비교를 한다.

그러므로 if문 통과하여 'yes'를 출력한다.

 

6번 if문 구문

문자열 '0' 은 문자열 길이가 1

문자열 '' 은 문자열 길이가 0

당연히 (==) 비교를 해도 다르다 그러므로 if문을 통과 못한다.

 

 

자 이번엔 각 if문 구문마다 설명은 생략하겠다.

위 3번 구문처럼 특이한 부분만 체크하고 넘어가 보자.

if(false == null){
	console.log('1번 - yes');
}

if(false == undefined){
	console.log('2번 - yes');
}

if(false == NaN){
	console.log('3번 - yes');
}

if(false == 0){
	console.log('4번 - yes');
}

if(false == ''){
	console.log('5번 - yes');
}

if(false == []){
	console.log('6번 - yes');
}

if(false == {}){
	console.log('7번 - yes');
}

 

이 예제에서 봐야 할 부분은 4,5,6번 if문 구문이다.

나머지는 이미 이전 글을 형 변환에 대한 글, 느슨한 등호 엄격한 등호 정리하면서 했던 내용들이다.

 

그러므로 4,5,6번 if문 구문을 보면 되는데, 이 구문도 위 예제의 3번 if문 구문과 동일하다.

이 if문 구문에서는 자바스크립트가 거짓을 부정하지 않는다.. 그러므로 'yes'를 출력.

 

또 이해하기 어려운 구문을 확인해보면

if('' == 0){
	console.log('1번 - yes');
}

if('' == []){
	console.log('2번 - yes');
}

if(0 == []){
	console.log('3번 - yes');
}

 

이 구문 3개다 전부 'yes'가 출력이 된다.

이것도 위와 같은 이유이다. 자바스크립트가 거짓을 부정하지 않는다.

 

이 처럼 예제를 정리해 봤더니 느슨한 등호(==)를 사용함으로써 혼란을 겪게 될 만한 경우들,

그리고 왜 이게 합당한 지 이유도 모른 체 혼란을 겪게 되고,

 

알려고 해도 답을 찾을 수 없는... 경우들이 있기 때문에

이번 내용의 정리로 다시 한번 느낄 수 있는 것은 자바스크립트에서는 (==) 이 부등호는

절대로! 절대로 사용을 하지 말자.

 

강제로 형 변환이 돼서 비교를 한다는 것부터 시작해서 이 느슨한 등호(==)를 사용함으로써

더 많은 것들을 알아야지만 실수 없이 사용 가능할 뿐만 아니라

 

사용을 하면서도 불안한 감정을 느낄 수 있기 때문에

웬만해서는 느슨한 등호(==) 이걸 사용하는 것보단, 엄격한 등호(===)를 사용하는 게

 

정신건강에 이롭지 않을까?라는 생각을 가져본다.