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

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 비교 연산자의 마법의 세계로 뛰어들어 볼 거예요. 코드를 한 줄도 작성해 본 적이 없으신분이라도 걱정하지 마세요 - 이 흥미로운 여정에서 여러분의 친절한 안내자가 되겠습니다. 그럼 wand( wand 를 의미하지만, 여기서는 키보드를 의미합니다)을 손에 들고 시작해 보겠습니다!

자바스크립트 비교 연산자

비교 연산자는 프로그래밍 세계의 심판자 같은 존재입니다. 두 가지 값을 보고 그들이 서로 어떻게 관계되는지 결정합니다. 그들은 동일한가요? 하나가 다른 것보다 큰가요? 이 연산자들은 우리의 코드에서 결정을 내리는 데 도움을 주며, 실제 생활에서 우리가 결정을 내리는 것과 비슷합니다.

오늘 우리가 다룰 비교 연산자들을 살펴보겠습니다:

연산자	이름	예제
==	동등성	x == y
!=	불평등성	x != y
===	엄격한 동등성	x === y
!==	엄격한 불평등성	x !== y
>	크다	x > y
>=	크거나 같다	x >= y
<	작다	x < y
<=	작거나 같다	x <= y

비교는 어떻게 이루어집니까?

각 연산자에 대해 자세히 알아보기 전에, 자바스크립트가 값을 비교하는 방법을 이해해 보겠습니다. 실제 생활에서 우리가 것들을 비교하는 방법과는 크게 다르지 않습니다!

1. 숫자를 비교할 때는 간단합니다. 자바스크립트는 어떤 숫자가 더 큰지 확인합니다.
2. 문자열을 비교할 때는 문자 하나하나를 기준으로 Unicode 값에 따라 비교합니다.
3. 다른 타입(예: 숫자와 문자열)을 비교할 때는 자바스크립트가 일반적으로 하나의 타입을 다른 타입으로 변환한 후 비교합니다.

이제 각 연산자를 자세히 살펴보겠습니다.

자바스크립트 동등성 (==) 연산자

동등성 연산자(==)는 두 가지 값이 동일한지 확인하지만, 비교가 좀 더 유연합니다. 타입을 변환하여 비교할 수 있습니다. 예제를 보겠습니다:

console.log(5 == 5);     // true
console.log(5 == "5");   // true
console.log(true == 1);  // true
console.log(null == undefined);  // true

첫 번째 예제는 명확합니다. 두 번째 예제에서는 자바스크립트가 문자열 "5"를 숫자로 변환하여 비교합니다. 세 번째 예제는 놀랄 수 있지만, 자바스크립트는 true를 1로, false를 0으로 간주합니다. 마지막 예제는 null과 undefined가 == 연산자에서 동일하게 간주됩니다.

자바스크립트 불평등성 (!=) 연산자

불평등성 연산자(!=)는 ==의 반대입니다. 두 가지 값이 다른지 확인합니다.

console.log(5 != 6);     // true
console.log(5 != "5");   // false
console.log(true != 1);  // false

==와 마찬가지로 비교 전에 타입 변환을 수행합니다.

자바스크립트 엄격한 동등성 (===) 연산자

이제 엄격한 동등성 연산자(===)를 만나보겠습니다. 이 연산자는 == 연산자의 엄격한 형제입니다. 값을 확인하는 것뿐만 아니라 타입도 동일한지 확인합니다.

console.log(5 === 5);     // true
console.log(5 === "5");   // false
console.log(true === 1);  // false
console.log(null === undefined);  // false

==와 결과가 다른 것을 보시면, 엄격한 동등성 연산자는 타입 변환을 하지 않습니다.

엄격한 불평등성 (!==) 연산자

엄격한 불평등성 연산자(!==)는 ===의 반대입니다. 두 가지 값이 값이나 타입이 다른지 확인합니다.

console.log(5 !== 6);     // true
console.log(5 !== "5");   // true
console.log(true !== 1);  // true

자바스크립트 크다 (>) 연산자

크다 연산자(>)는 왼쪽 값이 오른쪽 값보다 큰지 확인합니다.

console.log(10 > 5);   // true
console.log(5 > 10);   // false
console.log(10 > 10);  // false
console.log("b" > "a");  // true (Unicode 값으로 비교)

문자열을 비교할 때는 Unicode 값에 따라 비교합니다. 알파벳 순서는 아닙니다!

크거나 같다 (>=) 연산자

크거나 같다 연산자(>=)는 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인합니다.

console.log(10 >= 5);   // true
console.log(10 >= 10);  // true
console.log(5 >= 10);   // false

자바스크립트 작다 (<) 연산자

작다 연산자(<)는 왼쪽 값이 오른쪽 값보다 작은지 확인합니다.

console.log(5 < 10);   // true
console.log(10 < 5);   // false
console.log(10 < 10);  // false

작거나 같다 (<=) 연산자

작거나 같다 연산자(<=)는 왼쪽 값이 오른쪽 값보다 작거나 같은지 확인합니다.

console.log(5 <= 10);   // true
console.log(10 <= 10);  // true
console.log(10 <= 5);   // false

null, undefined 및 NaN 비교

null, undefined, 그리고 NaN과 같은 특수 값을 비교하는 것은 다소 복잡할 수 있습니다. 예제를 보겠습니다:

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

null과 undefined의 동작은 놀라울 수 있습니다. NaN은 자신과도 동등하지 않으며, null은 비교 시 0으로 변환되지만 동등성 검사에서는 변환되지 않습니다.

그럼 여러분! 자바스크립트 비교 연산자의 세계를 여행했습니다. 연습이 완벽을 만드는 법을 기억하시고, 이 연산자들을 자신의 코드에서 실험해 보세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset