JavaScript에서 1 < x < 3이 항상 참인 이유 - Number 내장 함수

 

개발자 밈을 보면, 특히 언어에 관련된 밈을 보면 자바스크립트에 관련된 밈이 많다. 자바스크립트는 동적 타입 언어로서 타입 변환을 수행하게 된다.

 

자바 스크립트 공부를 하다가 초입부분에서 이런 걸 봤다.

if ("" == 0) {
  // ?!?!?!?! 이건 참
}

if (1 < x < 3) {
  // 어떤 x 값이던 참.....!
}

 

자바를 메인으로 공부한 나는 적잖이 충격을 받았다. 위가 왜 항상인지. 자바스크립트에서 왜 저런 문법이 가능한지 소개한다.

 

1. if ("" == 0) 이 항상 참인 이유

if ("" == 0) 이 항상 참인 이유는 == (느슨한 동등 연산자) 및 타입 변환과 그에 따른 자바스크립트 Number 내장 함수 때문이다. 

 

== 연산자를 사용할 때, 피연산자의 타입이 다르면 타입 변환을 시도한다. 피연산자는 0으로 number 자료형이다. 그래서 "" 빈 문자열을 number 자료형으로 변환을 시도한다.

빈 문자열("") 은 숫자로 변환되며, 숫자 값은 0이 된다.

Number(""); // 0

 

결국 아래와 같이 타입 변환이 됐으므로 참이 나오게 된다.

if(0 == 0) // true

 

"" == 0은 타입 변환 후 숫자 0 == 0으로 비교되기 때문에 참이다.

 

2. if (1 < x < 3) 이 항상 참인 이유

1 < x < 3은 연산자 우선순위와 암묵적 타입 변환 때문에 의도와 다르게 동작한다.

연산자 우선순위

JavaScript에서 < 연산은 왼쪽에서 오른쪽으로 우선 순위가 있다.

(1 < x) < 3

 

 

그래서 위와 같이 1 < x 을 먼저 연산한다. x 가 0이 오든 어떤 숫자가 오든, 그 값은 true 또는 false 가 나올 것이다.

그리고 나면 이렇게 결과가 나타날 것이다.

ture < 3
// 또는
fasle < 3

 

3과 비교 연산을 하게 되므로 true 와 false 는 number 로 형변환이 일어나게 되고, 그 값들은 아래와 같다.

Number(true); // 1
Number(false); // 0

 

나올 수 있는 값은 0 또는 1 이므로 무조건 3보다 작기 때문에 항상 참일 수 밖에 없다.

 

의도대로 작동 시키려면 아래와 같이 나와야 한다.

if (1 < x && x < 3) {
  // 이제 의도대로 작동
}

 

Number() 내장 함수

JavaScript의 내장 함수로, 다양한 타입의 값을 숫자(Number)로 변환한다. 이 함수는 타입 변환(Type Coercion)을 명시적으로 수행한다.

 

Number(value);

 

 

value: 숫자로 변환할 값. 반환값은 변환된 숫자. 변환이 불가능한 경우 NaN을 반환한다.

 

boolean 값 변환

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

 

문자열 변환

문자열이 유효한 숫자 형태일 경우, 해당 숫자로 변환.

숫자로 변환할 수 없는 경우 NaN 반환.

console.log(Number("42"));       // 42
console.log(Number("3.14"));     // 3.14
console.log(Number("  123  "));  // 123 (앞뒤 공백 제거)
console.log(Number("abc"));      // NaN
console.log(Number(""));         // 0 (빈 문자열은 0으로 변환)

 

 

null 변환

null 은 항상 0

console.log(Number(null)); // 0

 

undefined 변환

undefined 은 항상 NaN

console.log(Number(undefined)); // NaN

 

객체 변환

객체를 숫자로 변환하려면, 객체의 valueOf() 메서드나 toString() 메서드가 호출되어야 한다.

변환 결과가 유효한 숫자여야 한다.

console.log(Number({}));               // NaN
console.log(Number({ valueOf: () => 5 })); // 5
console.log(Number({ toString: () => "7" })); // 7

 

 

 

https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-programmer.html

TypeScript 한글 문서