자바스크립트에서 형 변환은 데이터 타입을 다른 데이터 타입으로 변환하는 과정입니다.

명시적 변환(Explicit Conversion): 개발자가 의도적으로 데이터 타입을 변환하는 것
암시적 변환(Implicit Conversion): 자바스크립트 엔진이 데이터 타입을 자동으로 변환하는 것

1. 문자열 변환

1.1 String() 생성자 함수

String() 생성자 함수를 사용하면 다른 데이터 타입을 문자열로 변환 할 수 있습니다.

console.log(String(10)); console.log(String(Infinity)); console.log(String(NaN)); console.log(String(true)); console.log(String(false)); console.log(String(null)); console.log(String(undefined)); console.log(String({name: '라이캣'})); console.log(String([1, 2, 3]));

1.2 toString() 메서드

toString() 메서드로 문자열로 변환할 수 있습니다. null과 undefined는 toString() 메서드를 사용할 수 없습니다.

숫자의 toString() 메서드는 특정 진법으로 변환할 수 있는 기능도 제공합니다.

console.log((10).toString()); console.log((10).toString(2)); // 2진수로 변환 console.log(Infinity.toString(2)); // 2진수로 변환 console.log(NaN.toString(2)); // 2진수로 변환 console.log(true.toString()); console.log(false.toString()); console.log({name: '라이캣'}.toString()); console.log([1, 2, 3].toString());

1.3 연산자를 이용한 문자열 변환

빈 문자열과 문자열 연결 연산을 이용하여 값을 문자열로 변환할 수 있습니다.

console.log('' + 10); console.log('' + Infinity); console.log('' + NaN); console.log('' + true); console.log('' + false); console.log('' + null); console.log('' + undefined); console.log('' + {name: '라이캣'}); console.log('' + [1, 2, 3]);

2. 숫자 변환

2.1 Number() 생성자 함수

Number() 생성자 함수를 사용하면 다른 데이터 타입을 숫자로 변환 할 수 있습니다.

console.log(Number('10')); console.log(Number('10.5')); console.log(Number('0x1F')); console.log(Number(true)); console.log(Number(false)); console.log(Number(null)); // 0 console.log(Number(undefined)); // NaN console.log(Number({name: '라이캣'})); // NaN console.log(Number([1, 2, 3])); // NaN console.log(Number(['5'])) // 5 console.log(Number({})) // NaN console.log(Number([])) // 0

객체의 원시타입 변환

객체 타입이 원시 타입으로 변환될 때는 다음 과정을 거칩니다.

원시 값으로 변환하기 위해 valueOf() 메서드 호출
원시 값이 반환되지 않으면 toString() 메서드 호출
toString() 메서드도 원시 값이 반환되지 않으면 에러 발생

console.log(Number([false]));

console.log(Number([false]));

[false]는 객체이므로 valueOf() 메서드 호출
원시값을 반환하지 않으므로 toString() 메서드 호출 -> 'false'
'false'는 숫자로 변환할 수 없으므로 NaN 반환

2.2 ParseInt(), parseFloat() 함수

parseInt()와 parseFloat() 함수를 사용하여 문자열을 정수 또는 부동 소수점 숫자로 변환할 수 있습니다. 문자가 중간에 있으면 해당 문자까지만 변환합니다. 숫자로 변환할 수 없는 경우에는 NaN을 반환합니다.

console.log(parseInt('10')); console.log(parseInt('10.5')); console.log(parseInt('0x1F')); console.log(parseFloat('10')); console.log(parseFloat('10.5')); console.log(parseFloat('0x1F'));

parseInt는 두 번째 인자로 진법을 지정할 수 있습니다.

parseInt()는 두 번째 인자로 **진법(radix)**을 지정할 수 있습니다.

console.log(parseInt('11', 2)); // 3 (2진수로 해석) console.log(parseInt('11', 8)); // 9 (8진수로 해석) console.log(parseInt('11', 10)); // 11 (10진수로 해석) console.log(parseInt('11', 16)); // 17 (16진수로 해석)

2.3 연산자를 이용한 숫자 변환

+ 단항 연산자 또는 산술 연산자 (*, /)를 이용하면 값을 숫자로 변환할 수 있습니다.

console.log(+'10'); console.log(+'10.5'); console.log(+'0x1F'); console.log(+true); console.log(+false); console.log(+null); console.log(+undefined);

console.log('10' * 1); console.log('10' / 1); console.log('10.5' * 1); console.log('10.5' / 1); console.log('0x1F' * 1); console.log(true * 1); console.log(true / 1);

3. 불리언 변환

3.1 Boolean() 생성자 함수

Boolean() 생성자 함수를 사용하면 다른 데이터 타입을 불리언으로 변환 할 수 있습니다.

console.log(Boolean('')); console.log(Boolean('Hello')); console.log(Boolean(0)); console.log(Boolean(1)); console.log(Boolean(-10)); console.log(Boolean(null)); console.log(Boolean(undefined)); console.log(Boolean({})); console.log(Boolean([]));

3.2 논리 부정 연산자(!)를 이용한 불리언 변환

! 논리 부정 연산자를 이용하면 값을 불리언으로 변환할 수 있습니다.

console.log(!!''); console.log(!!'Hello'); console.log(!!0); console.log(!!1); console.log(!!-10); console.log(!!null); console.log(!!undefined); console.log(!!{}); console.log(!![]);

JavaScript 에센셜

형 변환