[JavaScript] 데이터 형변환

자바스크립트의 데이터 형변환 방식은 크게 2가지로 분류할 수 있다.

 

1. 암시적 형변환 (Implicit type conversion)

: 코드가 실행됨에 따라 자바스크립트 엔진이 필요성을 느끼고 자동으로 타입을 변환시키는 방법

 

  1-1. 산술 연산자

• 더하기(+) 연산자는 숫자보다 문자열이 우선시 되어, 문자열과 다른 타입이 만나면 상대 타입이 문자로 변환되어 연산된다.
• 더하기 외 다른 연산자(-, *, /, %)는 문자열보다 숫자가 우선시 되어, 숫자와 다른 타입이 만나면 상대 타입이 숫자로 변환되어 연산된다.

// +
number + number // number    => ex. 50+50 //100
number + string // string           => ex. 100 + "점" //100점
string + string // string              => ex. "100" + "점" //100점
string + boolean // string          => ex. "10" + false //100
number + boolean // number    => ex. 99 + true //100 

// %, /, -, *
string * number // number      
string * string // number
number * number // number
string * boolean //number      => ex. "2" * false //0
number * boolean //number   => ex. 2 * true //2

 

  1-2. 비교 연산자

  : 비교 연산자 중 엄격하지 않은 비교(==)는 비교하기 전 두 피연산자를 같은 타입으로 변환시킨다.

null == undefined    // true 0 == 0
“0” == 0                  // true 0 == 0
0 == false              // true 0 == 0
“0” == false           // true 0 == 0

 

 

 

2. 명시적 형변환 (Explicit type conversion)

: 개발자의 의도에 의해 타입을 변환시키는 방법

: 명시적 형변환은 주로 string, number, boolean 타입으로 이루어진다.

 

  2-1. String()

console.log(String(123)); // 123
console.log(String(NaN)); // NaN
console.log(String(true)); // true
console.log(String(false)); // false
console.log(String(undefined)); // undefined
console.log(String(null)); // null

 

  2-2. Number()

  : falsy한 값(빈문자열, false, null)에 대해서는 0으로 표현한다.

console.log(Number('')); // 0
console.log(Number('123')); // 123
console.log(Number('123a')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number({})); // NaN

 

  : 숫자와 문자가 혼합된 경우에는 parseInt나 parseFloat함수를 사용해 숫자 형태로 변환이 가능하다.

// 첫 문자가 숫자인 경우 parseInt는 정수형으로 해석이 가능한 만큼 숫자로 변환한다.
console.log(parseInt('123a')); // 123
console.log(parseInt('1.23a')); // 1

// 첫 문자가 숫자이거나 소숫점인 경우 parseFloat은 소수형으로 해석이 가능한 만큼 숫자로 변환한다.
console.log(parseFloat('1.23a')); // 1.23
console.log(parseFloat('.23a')); // 0.23

// 첫 문자가 문자일 경우는 NaN값으로 변환한다.
console.log(parseInt('a123')); // NaN
console.log(parseFloat('a1.23')); // NaN

 

 

  2-3. Boolean()

  : 빈문자열, 0, NaN, null, undefined를 falsy값이라고 하고 그 외 모든 값들은 truthy값이라고 한다.

console.log(Boolean("")); // false
console.log(Boolean("abc")); // true
console.log(Boolean("123")); // true
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean({name: 'bigtop'})); // true
console.log(Boolean({})); // true

 

 

 

참고

: https://bigtop.tistory.com/18

:https://medium.com/gdana/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%95%EB%B3%80%ED%99%98%EC%9D%80-%EB%91%90%EA%B0%80%EC%A7%80%EB%8B%A4-b46875be4a88