[JavaScript] 자바스크립트 타입변환, 묵시적 타입변환, 명시적 타입변환

 

자바스크립트의 타입 변환

자바스크립트의 변수는 타입이 고정되어 있지 않으며, 같은 변수에 다른 타입의 값을 대입할 수 있습니다.

a = 10; // 숫자형
a = "10"; // 문자열형
👉🏻 a의 값이 숫자형에서 문자열형으로 바뀌어버린다.

 

1. 묵시적 타입 변환

자바스크립트에서는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환해서 사용한다.

const a = "10";
const b = "20";
const result = a + b;
console.log(result);    // 1020

result = a - b;
console.log(result);    // -10

result = a * b;
console.log(result);	// 200

const c = "문자";
result = c - a;		// NaN

* NaN(Not a Number)
정의되지 않은 값이나 표현할 수 없는 값이라는 의미이다. 예를 들어 0을 0으로 나누거나, 숫자로 변환할 수 없는 연산을 시도하는 경우 반환된다.

 

2.명시적 타입변환

자바스크립트는 자동으로 타입 변환을 사용하지만, 종종 명시적으로 타입을 변환할 필요가 있다.

 

const a = "10";
const b = "5";
const result = a + b;    // 숫자 계산을 원함

 

 

예를 들면 서버에서 값을 받아오면 String으로 가져온다. 그렇다면 꼭 Number로 바꿔줘야 하는 필요성이 생긴다.

• Number( ) : 문자를 숫자로 변환한다.
• String( ) : 숫자나, 불린 등을 문자형으로 변환한다.
• Boolean( ) : 문자나 숫자 등을 불린형으로 변환한다.    // 값이 0 이면 true, 1 이면 false 
• Object( ) : 모든 자료형을 객체형으로 변환한다    // 하위에 값을 줄 수 있게 된다.
• parseInt( ) : 문자를 int형으로 변환한다. (정수)    // 소수점 아래 숫자를 자른다.
• parseFloat( ) : 문자를 float형으로 변환한다. (소수)    // 소수점 아래 숫자까지 살려준다.

const num1 = "10";
const num2 = "5";
console.log(`현재 num1의 타입은 : ${typeof num1}`);
console.log(`num1 + num2 : ${num1 + num2}`);
console.log(`Number(num1) + Number(num2) : ${Number(num1) + Number(num2)}`);

결과값