Frontend/Javascript-deepdive

Javascript - Operator

취업하고싶다! 2025. 12. 17. 11:06
반응형

 

 

암묵적 타입변환(= 타입 강제 변환)

개발자의 의도와는 상관없이 JS 엔진에 의해 암묵적으로 타입이 자동변환되는 현상
// number + string 연산
"1" + 2; // '12'
1 + "2"; // '12'

// boolean + number 연산
1 + true; // 2
1 + false; // 1

// number + null 연산
1 + null; // 1

// number + undefined 연산
1 + undefined; // NaN (연산 불가)

JS 연산을 하다보면, 예측하지 못하고 넘어갈 수 있는 암묵적 타입변환 케이스가 많다.

 

 

동등비교 vs 일치비교

동등비교(loose equailty)  일치비교(strict equality) 연산자는 엄현히 다르다.

  • 동등 비교(==)
    • 느슨한 비교: 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 값이 같은지 비교
  • 일치비교(===)
    • 엄격한 비교: 좌항과 우항의 피연산자가 타입도 같고 값도 같은지 비교, 즉 암묵적 타입 변환을 하지 않고 값을 비교
// 동등비교
5 == 5; // true
5 == '5'; // true

// 일치비교
5 == 5; // true
5 == '5'; // false

 

 

NaN, +0 & -0, Object.is() 함수

일치 연산자(===)라 해도 NaN 에 대해서는 주의할 것

// NaN은 자기 자신과 일치하지 않는 유일한 값
NaN === NaN; // false

// NaN인지 조사가 필요할 때 -> 빌트인 함수 'isNaN(value)' 사용
isNaN(NaN); // true
isNaN(100); // false
isNaN(1+undefined); // true (1+undefined 결과는 NaN이기 때문)

 

+0, -0 이 존재한다. 다만 이 둘을 비교하면 true를 반환한다.
0 === -0; // true
0 == -0; // true

 

ES6에서 도입된 Object.is 메서드는 "예측 가능한 정확한 비교 결과를 반환한다.""
그 외에는 일치비교 연산자(===)와 동일하게 동작한다.
+0 === -0; // true
Object.is(-0. +0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true

 

 

 

삼항연산자와 조건문

  • 조건에 따라 어떤 값을 결정해야 한다. -> 삼항 연산자 표현식을 사용하는 편이 유리
  • 조건에 따라 수행해야 할 문이 하나가 아니라 여러개다. -> if ~ else 문이 가독성 측면에서 유리
let x = 2;
let result = x % 2 ? "홀수" : "짝수";

console.log(result); // 짝수

 

 

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.
  • 총 7가지 문자열 형태로 반환: string, number, boolean, undefined, symbol, object, function
  • null 을 반환하는 경우는 없다.

 

반응형

'Frontend > Javascript-deepdive' 카테고리의 다른 글

Javascript - Primitive Type, Object Type  (0) 2025.12.21
Javascript - Control Statement, Object Literal  (0) 2025.12.17
Javascript - Expression Statement  (0) 2025.12.16
Javascript - Variable  (0) 2025.12.16
Javascript - Warm Up  (0) 2025.12.09