데이터 타입변환(형 변환)

형 변환이란?

코드를 작성하다 보면 종종 문자를 숫자로 변환한다거나 숫자를 문자로 변환해야 하는 경우가 발생합니다.

이런 경우를 형변환(데이터 타입변환)이라고 합니다.

형 번환 종류

형변환에는 다음과 같이 두가지가 있습니다.

1. 암시적 형변환 

- 자바스크립트 엔진이 필요해 의해 암시적으로 형(데이터타입)을 자동으로 변환시키는 것을 암시적 형변환이라고 합니다.

2. 명시적 형변환

- 개발자가 자바스크립트를 이용해서 직접 어떤 형으로 변환할 지를 명시해주는 것을 명시적 형변환이라고 합니다.

형변환	변경 주체	변경 방식
암시적 형변환	자바스크립트 엔진	자동(암시적)
명시적 형변환	개발자	수동(명시적)

암시적 형변환

암시적 형변환이란 앞선 내용에서와 같이 자바스크립트 엔진에 의해 자동으로 데이터 타입이 변환되는 것을 말합니다.

즉, 개발자가 원하지 않았는데도 불구하고 강제로 형변환을 시킵니다.

다음의 코드를 살펴보겠습니다.

var result = 1 + '2';
console.log('result = ' + result); // 12
console.log( typeof result );

위의 코드는 문자열과 숫자를 더하고 있는 코드입니다.

상식적으로 숫자를 더하기 연산을 한다면 3 이란 결과값을 출력해야 하지만 12가 출력되고 있습니다.

이처럼 자바스크립트는 이미 규칙을 만들어 놓고 형변환을 강제시키고 있습니다.

숫자 + 문자열 을 연산하는 경우에 숫자를 문자열(원시데이터타입)로 강제로 형변환을 시킨 후에 연산을 실행하게 됩니다.

다음의 표는 강제 형변환을 시키는 경우입니다.

경우	결과	예제
숫자형 + 문자형	문자형	var a = 10 + '10'; // 1010 (문자열 타입)
불린형 + 문자형	문자형	var a = true + '10'; // true10 (문자열 타입)
불린형 + 숫자형	숫자형	var a = true + 10; // 11 (숫자형 타입)

위 표의 불린형 + 숫자형의 경우는 불린 타입인 true를 1 로 강제 형변환을 시킨 후 연산을 한 결과 11 이 나오게 됩니다. 

(true = 1, false = 0)

명시적 형변환

명시적 형변환은 개발자가 직접 스크립트를 이용해 어떤 형으로 변경할 지를 명시해 주는 것을 명시적 형변환이라고 합니다.

다시말해서, 자바스크립트에게 숫자형을 문자형 데이터로 변경해 달라고 요청하는 것입니다.

다음의 표를 통해 문자를 숫자로, 숫자를 문자로 변경하는 명시적 형변환에 대해 알아보겠습니다.

문자를 숫자 타입으로 형변환하는 방법

변환 결과	사용 함수	예 제
정수 형	parseInt()	var val = '12.34'; parseInt(val); // 12 (숫자형 타입으로 형변환)
	Number()	var val = '12' Number(val); // 12 (숫자형 타입으로 형변환)
실수 형	parseFloat()	var val = '12.34'; parseFloat(val); // 12.34 (숫자형 타입으로 형변환)
	Number()	var val = '12.34'; Number(val); // 12.34(숫자형 타입으로 형변환)

숫자를 문자타입으로 형변환하는 방법

변환 결과	사용 함수	예 제
일반 문자형	String()	var val = 15; String(val); // 15 (문자타입으로 형변환)
16진수 문자형	Number.toString()	var val = 15; val.toString(16); // f (문자타입으로 형변환)
실수 문자형	Number.toFixed()	var value = 15.1234; value.toFixed(2) // 15.12 (문자타입으로 형변환)

Jaehee's WebClub