자바스크립트의 형변환

자바스크립트의 형변환

프로그래밍에서 종종 문자를 숫자로, 숫자를 문자로 형 변환해야 합니다.

Java에서는 String에서 int 형 변환을 위해 Integer.parseInt() 를 사용하는 것이 예로 들 수 있을 것 같습니다.

특히 자바스크립트에서는 C와 Java와 달리 변수를 var 하나로 선언하게 되면 적확한 변수의 형을 알 수 없어 애매모호한 경우가 있고, 개발자가 실수하거나 예상치 못한 결과를 얻게되는 결과가 있습니다.

아래의 소스는 prompt창에서 나이를 입력받아 30을 더하여 alert창에 결과를 보여줍니다. prompt에서 20을 입력받으면 결과가 50이 나올 것같지만 결과는...'2030'이 됩니다.

var age = window.prompt('please input age');
age = age + 30;
alert(age);

'2030'이 나오는 이유는 prompt에서 입력받은 값은 숫자가 아니라 문자로 처리되기 때문에 "20" + "30"으로 처리되어 문자열이 붙어 "2030"이 되는 것입니다.

이런 문제를 없애기 위해 형변환을 해야하고 자바스크립트에서는 형변환이 두 가지 방법이 있습니다.

1. 암시적 형변환

2. 명시적 형변환

암시적 형변환은 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것입니다.

명시적 형변환은 개발자가 자바스크립트를 이용해서 직접 어떤 형으로 바꿀지 명시해주는 것입니다.

암시적 형변환

쉽게 설명하기 위해 아래의 예제가 있습니다. 상식적으로 숫자와 문자를 연산한다는 것 자체가 잘못된 거지만 값은 어떻게 나올지 고민됩니다. 3일까 아님 21일까  바로 이런 혼란을 막기 위해 자바스크립트는 규칙을 만들어 놓고 형변환을 해버립니다.

var result = 2 + "1";
console.log(result) //21

경우	결과	예
숫자 형 + 문자 형	문자 형	var result = 10 + "10"; // 1010
불린 형 + 문자 형	문자 형	var result = true + "10" //true10
불린 형 + 숫자 형	숫자 형	var result = true + 10 // 11

암시적 형변환은 자바스크립트가 친절하게 형변환을 할지 물어보거나 안내 없이 위와같은 규칙으로 과감하게 형변환을 해버립니다.

명시적 형변환

명시적 형변환은 암시적 형변환의 반대입니다. 개발자가 직접 코드를 작성하여 어떤 형으로 바꿀지 명시해주는 것을 명시적 형 변환이라고 합니다. 실무에서 가장 많이 사용하는 것은 문자를 숫자로, 또는 숫자를 문자로 변경하는 것입니다.

//문자를 정수 형으로
var result = "123.456";
result = parseInt(result); //실행결과 123

var result = "123";
result = Number(result); //실행결과 123

//문자를 실수 형으로
var result = "123.456";
result = parseFloat(value); //실행결과 123.456

var result = "123.456";
result = Number(result); //실행결과 123.456

//숫자를 문자로
//일반 문자형
var result = 15;
result = String(result); //실행결과 15

//16진수 문자 형
var result = 15;
result = result.toString(15); //실행결과 f

//실수 문자 형
var value = 123.456
value = value.toFixed(2); //실행결과 123.45