자바스크립트에서 형 변환은 데이터 타입을 다른 데이터 타입으로 변환하는 과정입니다.
- 명시적 변환(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(!![]);