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

 

 

 

헷갈리는 부분을 다시 한번 정리하고자 작성했습니다. 정확히 알고 가면 많은 실수를 줄일 수 있습니다.

 

 

 

Boolean형 비교

  Boolean형의 비교 연산은 하나의 값을 반환합니다.

 

 - true가 반환되면, "긍정", "참", 사실"을 의미합니다.(= 1 또는 그 이상의 양수)

 - false가 반환되면, "부정", "거짓", "사실이 아님"을 의미합니다.(= 0 또는 그 이하의 음수)

 

예시)

console.log(2 > 1);		// true
console.log(2 == 1); 	// false
console.log(2 != 1);	// true

반환된 Boolean값은 다른 값들 처럼 변수에 할당하는 것이 가능합니다.

let result = 5 > 4;		// 비교연산의 결과를 result에 할당
console.log(result);	// true

 

 

 

 

문자열 비교

  JavaScript의 문자열값은 '사전'순(Alphabetically)으로 비교합니다. '사전편집(lexciographical)'순이라고도 불립니다. 이 순서 비교의 기준은 사전 뒤쪽의 문자열이 사전 앞쪽의 문자열보다 크다고 판단합니다. 두 문자열의 문자를 하나씩 비교하며 사전순으로 비교합니다.

 

예시)

console.log('Z' > 'A');			// true
console.log('Glow' > 'Glee');	// true
console.log('Bee' > 'Be');		// true

 

 * 정확히는 '사전'순이 아닌 유니코드 순입니다. 따라서 유니코드 값을 기준으로 합니다.

 

 

 

 

다른 형을 가진 값 간의 비교

  비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿉니다.

 

예시)

console.log('2' > 1);		// true; 문자열 2('2')가 숫자 2로 변환된 후 비교
console.log('01' == 1);		// true; 문자열 '01'이 숫자 1로 변환된 후 비교

 

  Boolean값의 경우 true는 1, false는 0으로 변환된 후 비교가 이루어집니다.

console.log(true == 1);		// true
console.log(false == 0); 	// true

 

* 주의 - 흥미로운 상황

let a = 0;
console.log(Boolean(a));	// false

let b = "0";
console.log(Boolean(b));	// true; 문자열의 값은 Boolean형으로 1

console.log(a == b); 		// true;

왜 이런 결과가 나올까요? 

왜냐하면 ==(동등 비교 연산자; equality operator)는 값의 형을 b의 문자열 "0"을 숫자 0으로 변환하여 비교하게 됩니다. ==은 유형변환 비교를 하기 때문에 비교하는 두 값을 비교합니다. 따라서 위와같은 흥미로운 상황이 발생하기도 합니다. 하지만 ===(엄격 비교 연산자; strict equality operator)를 사용하면 형과 값을 모두 비교하기 때문에 요즘은 정확한 비교 연산을 위해서 ===을 사용합니다. 

 

 

 

 

일치 연산자

  동등 연산자(equality operator) ==은 0과 false를 구별하지 못합니다.

console.log(0 == false); 	// true
console.log('' == false);	// true

  이런 문제는 동등 연산자 ==가 형이 다른 피연산자를 비교할 때 피연사자를 숫자형으로 바꾸기 때문에 발생합니다.(빈문자열 ''과 false는 0)

 

  그렇다면 둘의 비교는 어떻게 구별할 수 있을까요?

  일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있습니다. 이는 엄격한(strict) 동등 연산자입니다. 따라서 자료형과 값 자체의 동등 여부까지 검사합니다.

console.log(0 === false); 	// false

 

 

 

 

null과 undefined 비교

  일치 연산자(===)를 사용하여 null과 undefined를 비교

  두 값의 자료형의 값이 다르기 때문에 거짓(false)가 반환됩니다.

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

 

  동등 연산자(==)를 사용하여 null과 undefined를 비교

  둘을 동등 연산하게 되면 true가 반환됩니다. 둘다 '없다'라는 값 자체로서 비교하게 되면 결국 같은 거죠.

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

 

  산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 null과 undefined를 비교

  null과 undefined는 숫자형으로 변환합니다. null은 0, undefined는 NaN(Not a Number)으로 변환됩니다.

 

 

 

 

null vs 0

  null과 0을 비교해 봅시다.

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

  이상합니다. 세번째 줄의 >=이 true라면 1, 2번 줄 둥 중 하나는 true여야 하는데 결과는 false입니다. 왜 그럴까요? 바로 이전 단락에서 알아보았듯이  기타 비교 연산자(>, <, >=, <=)를 사용하게되면 null은 0으로서 비교됩니다.

 

 

 

 

비교가 불가능한 undefined

  undefined를 다른 값과 비교해서는 안 됩니다.

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

  - 1, 2번 줄은 undefined가 NaN으로 변환되어 다른 값과 비교 연산할 경우 항상 false를 반환합니다. 

  - 3번 줄에서 undefined는 null과 같습니다. 그리고 그 이외의 값과는 같지 않기 때문에 false를 반환합니다.

 

 

 

 

함정 피하기

  의외의 케이스들이 존재해서 헷갈리시나요? 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있습니다.

 - 일치 연산자 ===을 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의합니다.

 - undefined나 null이 될 가능성이 있는 변수가 >=, >, <, <=의 피연산자가 되지 않도록 주의합니다. 명확한 의도를 갖지 않은 경우에는 이를 피하는 것이 좋습니다. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단된다면, 이를 따로 처리하는 코드를 추가하는 것이 좋습니다.