자바스크립트 기본 - 비교 연산자

비교 연산자 ( == , < , <= , > , >= , !=)

다른 연산자와 마찬가지로 값을 반환합니다. 그 값은 boolean ( true , false ) 입니다.

let result = 1 < 5;   // 변수에 저장 가능합니다

console.log(result)   // true

 

 

문자열 비교를 해보자

자바스크립트는 문자를 비교할 때 유니코드 순으로 비교합니다.

A - B - C - D - E .... - Z 순을 말합니다!

console.log('Z' > 'A') // true
유니코드에서는 A~Z 순으로 점점 큰 인덱스 값을 가집니다

console.log('a' > 'A')	// true		
유니코드에서는 소문자가 대문자보다 더 큰 인덱스 값 입니다

console.log('Bee' > 'Be') // true 		
첫 글자부터 비교하고, 같다면 다음 글자를 비교합니다. 
차례대로 마지막 글자까지 비교합니다.
마지막 글자까지 비교하고, 같다면 문자열의 길이를 비교합니다.
문자열이 더 긴쪽이 큽니다

console.log('hello     ' > 'hello')	// true 
왼쪽 문자열이 공백을 포함해 더 길기 떄문에 더 큽니다

console.log('slave' > 'kingggggg')		// true
문자열의 길이와 상관없이 첫 글자에서 이미 비교가 끝났습니다

console.log('hello' == 'hello') 	// true
마지막 글자까지 비교하고, 문자열의 길이도 같다면 동일하다고 판단합니다

console.log('123' > '2') 	// false
자료형이 서로 다른 경우에만 문자열을 숫자열로 변환합니다.
둘다 문자열 이기 때문에 첫 글자를 비교합니다.
우측 피연산자가 더 큽니다.

 

자료형이 다른 값 간의 비교

console.log('9' > 8) // true
문자열 '9' 가 숫자 9로 변환됩니다

console.log('00010' == 10 ) // true
console.log('000.1' == 0.1 ) // true
문자열 '00010' , '000.1' 은 숫자 10 , 0.1 로 변환됩니다. 
(의미없는 0은 제거하고 그 이후 부터 변환 되네요!!)

console.log(Number("00010"), +"00010")  // 10 10
깨알 복습입니다. 야미~

console.log( true == 1 ); // true
console.log( false == 0 ); // true
true는 1 , false는 0 으로 변환됩니다.

----- 전혀 흥미롭지 않은 상황 예시 -----
console.log(Boolean( 0 ))     // false
console.log(Boolean( '0' ))   // true
console.log(0 == '0')         // true...?
위의 경우는 Boolean()이 동등비교 연산자 ( = ) 와는 다른 규칙을 사용하여 Boolean 값을 반환하기 때문입니다!

 

일치 연산자 ( === )

동등 연산자( == ) 로는 값을 정확하게 구분할 수 없습니다.

동등 연산자는 자료형이 다른 피연산자를 비교할 때 숫자형으로 변환시켜 비교하기 때문입니다.

console.log( 0 == false )   // true
false를 숫자형으로 변환하면 0 입니다

console.log( '' == false )  // true
빈 문자열을 숫자형으로 변환하면 0 입니다.

위 예제와는 다르게!

자료형의 변환 없이 값을 비교하고 싶다면 일치 연산자( === ) 를 사용할 수 있습니다.

console.log( 0 === false)	// false
일치 연산자는 자료형의 동등 여부까지 검사합니다.
피연산자 a 와 b 의 자료형이 다를 경우 즉시 false를 반환합니다.

 

 

null , undefined 비교하기 그리고 불편한 진실... 

지금부터 매우 불편한 진실을 알려 드리겠습니다.

자바스크립트에서 비교 연산자를 사용했을 때 일어나는 기이한 현상들이 있습니다.

예제를 보겠습니다.

console.log( null === undefined ) // false

null과 undefined은 각각의 자료형을 가지기 때문에 == 자료형이 서로 다르기 때문에
일치 비교시 false 입니다.

그런데 여기서.......

동등 연산자를 사용해서 다시 비교해보면?

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

특별한 규칙이 적용되어 true를 반합니다...
동등 연산자는 null과 undefined를 각별한 커플처럼 취급해서 둘은 잘 어울리지만
다른 값들과는 어울리지 못합니다.

산술 연산자나 기타 비교 연산자(< , > , <= , >=)를 사용해서 다시 비교해보면?

기타 비교 연산자들은 null과 undefined를 숫자형으로 변환시킵니다

console.log( null + 1 <  2) // true
null은 0으로 변환됩니다

console.log( undefined < 0  ) // false
undefined는 NaN으로 변환됩니다.

위의 3가지 규칙이 아래의 예제같은 혼돈의 카오스를 만듭니다.

null과 0을 비교해 봅시다.

console.log(null > 0) // false
console.log(null == 0) // false
console.log(null >= 0) // true

3번째 줄의 비교 결과가 참이므로 1,2번째 줄의 결과 중 하나는 참이어야 합니다. 
하지만 둘다 거짓이죠..

이런 결과가 나타나는 이유는
동등 연산자와 기타 비교 연산자의 동작방식이 다르기 때문입니다!
동등 연산자는 커플을 우대합니다.
undefined과 null끼리 동등 비교할 때만 true를 반환하고,
각자의 값을 다른 값과 동등 비교할 때는 무조건 false를 반환합니다.

2번째 줄을 보면 null과 0을 비교했기 때문에 무조건 false입니다.

1,3번째 줄을 보면
기타 비교연산자로 null을 비교했기 때문에 null은 숫자형인 0으로 변환됩니다.
천천히 생각해보면 반환된 값이 옳다는 것을 알 수 있습니다.

undefined과 0을 비교해 봅시다.

console.log(undefined > 0)  // false
console.log(undefined < 0)  // false
console.log(undefined == 0) // false

1,2번째 줄에서 기타 비교 연산자를 사용했기 때문에 undefined은 NaN으로 변환됩니다.
NaN이 피연산자인 경우에 비교 연산자는 항상 false를 반환합니다.

3번째 줄에서 undefined은 자기 자신과 null을 제외한 값과 동등 비교하면 항상 false를 반환합니다.

 

위와 같이 특별한 경우 덕분에 발생할 수 있는 오류를 막기 위해서 아래와 같은 방법을 사용합니다.

- 일치 연산자 === 를 제외한 기타 비교 연산자의 피연산자로 undefined 나 null 이 오지 않도록 주의합니다.

- 반대로 undefined 나 null이 할당될 가능성이 있는 변수가 기타 비교 연산자들의 피연산자가 되지 않도록 주의합니다.

  (의도를 가지고 사용하는 경우는 제외합니다)

- 변수가 undefined 나 null 이 될 가능성이 있다면 이를 따로 처리하는 코드를 만들어 주는 것이 좋습니다.

 

 

 

자바스크립트는 미친 언어가 맞다 !

 

 

기본이 중요하다.