개발/자바스크립트

자바스크립트 개발자라면 알아야 할 33가지 개념 - 5. 동등 연산자 vs 일치 연산자 vs typeof

DOTBAAAM 2025. 6. 11. 00:15
반응형

동등 연산자 vs 일치 연산자 vs typeof

자바스크립트에는 시각적으로 비슷하지만 동작 방식이 매우 다른 두 가지 동등성 검사 연산자가 있습니다. =====입니다.

=== (엄격한 동등성)

=== 연산자는 엄격한 동등성(strict equality) 을 검사합니다.

비교하는 두 값의 타입이 모두 같아야 true를 반환합니다.

예시:

5 === 5; // true (둘 다 숫자이고 값이 같다)
"hello world" === "hello world"; // true (둘 다 문자열이고 값이 같다)
true === true; // true (둘 다 불리언이고 값이 같다)

반면, 타입이나 값이 다르면 false가 됩니다.

77 === "77"; // false (숫자와 문자열은 타입이 다름)
"cat" === "dog"; // false (같은 타입이지만 값이 다름)
false === 0; // false (타입과 값 모두 다름)

== (느슨한 동등성)

== 연산자는 느슨한 동등성(loose equality) 을 검사합니다.

비교 시 타입 강제 변환(type coercion) 을 수행하여, 서로 다른 타입을 같은 타입으로 변환한 후 값을 비교합니다.

예를 들어:

77 == "77"; // true

위 경우, 문자열 "77"을 숫자 77로 변환한 후 비교하기 때문에 true가 됩니다.

반면 ===는 타입이 다르면 무조건 false를 반환합니다.

77 === "77"; // false

또 다른 예:

false == 0; // true

이는 자바스크립트에서 false0이 모두 falsy 값이기 때문입니다.

Falsy 값

자바스크립트에서 falsy 값은 조건문에서 false처럼 평가되는 값들을 뜻합니다. false == 0true가 되는 이유도 여기에 있습니다.

대표적인 falsy 값은 다음과 같습니다:

  • false
  • 0
  • ""
  • null
  • undefined
  • NaN
Falsy 값 비교
1. false, 0, ""

== 연산자로 비교할 때, false, 0, "" 는 모두 서로 같다고 평가될 수 있습니다.

false == 0; // true
0 == ""; // true
"" == false; // true

이는 모두 false로 강제 형변환 되기 때문입니다.

2. null, undefined

nullundefined는 특수한 관계를 가지고 있습니다.

  • nullundefined끼리는 == 연산 시 true를 반환합니다.
  • 하지만 이 둘은 다른 어떤 값과는 == 연산 시 false가 됩니다.
null == null; // true
undefined == undefined; // true
null == undefined; // true

null == 0; // false
undefined == false; // false
3. NaN

NaN은 특별히, 자기 자신과도 같지 않은 유일한 값입니다.

NaN == NaN; // false
NaN == null; // false
NaN == undefined; // false

typeof 연산자

typeof 연산자는 피연산자의 타입을 문자열로 반환합니다.

typeof 123; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"  (역사적인 이유로 null은 object로 반환됨)
typeof {}; // "object"
typeof []; // "object" (배열도 객체로 간주)
typeof function () {}; // "function"
  • typeof는 주로 변수나 값의 타입을 확인할 때 사용합니다.
  • 단, null에 대해서는 typeof null"object"를 반환하는 특이점이 있으니 주의해야 합니다.
  • 함수는 특별히 "function" 타입으로 반환되어 다른 객체와 구분됩니다.
반응형