[JS] 자바스크립트 타입 변환, Truthy와 Falsy

JS 데이터 타입: Number, String, Boolean, null, undefined
* typeof null의 결과는 Object이나 실제로 null 타입이 객체인 것은 아님!

자동 형변환 (암시적 형변환)

프로그래밍 이론상 다른 타입 데이터끼리의 연산은 불가능한 것이 일반적이지만,
자바스크립트를 사용하면 아래 코드는 모두 에러를 일으키지 않고 정상적으로 작동한다..!

// 문자 + 숫자 연산
"3" + 5        // --> "35"

// 문자 / 숫자 연산
"2000" / 2     // --> 1000

// 문자 / 문자 연산
"8" / "4"      // --> 2

문자와 숫자, 심지어 문자와 문자 간 나눗셈도 가능한데, 이는 JS에서 제공하는 자동 형변환 기능 덕분!

JS는 명령을 처리할 때 자동으로 알아서 가능한 타입 변환을 시도해보고 나온 결과를 반환한다.
변환이 불가능한 경우에도 일단 시도하고 보기 때문에 숫자 연산이 불가능한 상황에서 에러가 아닌 NaN이 반환되는 것도 이와 같은 맥락이라고 할 수 있다.

하지만 자동 형변환이 편리해보이더라도 원인을 알 수 없는 에러를 일으킬 수 있기 때문에 명시적 형변환을 통해서 보다 정확하게 데이터 타입을 설정하는 것이 좋다.

강제 형변환 (명시적 형변환)

1. String()

`String()`은 괄호 안의 데이터를 문자형으로 변환하는 함수다.

String(1)          // "1"
String(true)       // "true"
String(false)      // "false"
String(null)       // "null"
String(undefined)  // "undefined"

2. Number()

`Number()`은 괄호 안의 데이터를 숫자로 변환하는 함수다.

Number('12345')    // 12345
Number('12345ab')  // NaN
Number(true)       // 1
Number(false)      // 0
Number(null)       // 0
Number(undefined)  // NaN

데이터를 정수형, 실수형으로 변환하기 위해서는 각각 `parseInt()`, `parseFloat()` 함수를 사용할 수 있다.

// parseInt() : 정수형 변환
parseInt('50')    // 50
parseInt('50.5')  // 50
parseInt(50.5)    // 50
parseInt(null)    // NaN

// parseFloat() : 실수형 변환
parseFloat('50')    // 50
parseFloat('50.5')  // 50.5
parseFloat(null)    // NaN

 

3. Boolean()

`Boolean()`은 괄호 안의 데이터를 불리언 값으로 변환하는 함수다.

Boolean("hello")   // true
Boolean(123)       // true

Boolean("")        // false
Boolean(0)         // false
Boolean(null)      // false
Boolean(undefined) // false
Boolean(NaN)       // false

이때 false 값으로 변환되는 값을 falsy하다고 하며, 그 반대는 truthy하다고 말한다.

Truthy/Falsy

• truthy: true 같은 것, true값처럼 사용되는 데이터
• falsy: false 같은 것, false값처럼 사용되는 데이터

falsy한 값으로는 빈 문자열 `''`, 숫자 `0`, `null`, `undefined`, `NaN`이 있으며,
이것들을 제외한 나머지는 모두 truty한 값으로 여겨진다.

Boolean("")        // false
Boolean(0)         // false

Boolean(!"")        // true
Boolean(!0)         // true

falsy한 값 앞에 not 연산자 `!`를 붙이면 true ↔ false로 불리언 값 토글이 가능해진다.

이러한 truthy/falsy 개념과 JS의 자동 형변환 성질을 이용하면 더 쉽게 코드를 작성할 수 있다.
= falsy한 데이터를 Boolean값 `false`처럼 조건문 등에 사용이 가능하다는 것!