자바스크립트 형 변환(int, string 등) 방법 및 사용 예제

형 변환이란 변수의 값을 다른 자료형으로 변환하는 것을 말합니다. 자바스크립트에서는 크게 암시적 형 변환과 명시적 형 변환이 있습니다. 그리고 다양한 함수로 형 변환 방법을 제공하고 있습니다. 그럼 자바스크립트에서 형 변환하는 방법에 대해서 알아보겠습니다.

1. 암시적 형 변환

암시적 형 변환은 자바스크립트 엔진이 자동으로 형 변환을 하는 것을 말합니다.

▼ 숫자와 문자열의 덧셈 연산에서는 자동으로 숫자를 문자열로 변환합니다. 예제 코드에서는 덧셈 연산자는 문자열 연결(concatenation) 연산자로 동작합니다.

let x = 10;
let y = '10';

let result = x + y;
console.log(result);   // 1010

console.log(typeof result);   // string

2. 명시적 형 변환

명시적 형 변환은 명시적으로 변수의 자료형을 변환하는 것을 말합니다.

1. 자바스크립트에서 명시적 형 변환 방법

☞ 이외에도 Boolean(), Number.isNaN(), String.concat()등 다양한 방법으로 명시적 형 변환을 수행할 수 있습니다.

2. 형 변환 사용 예제

// 1. Number() : 주어진 값을 숫자로 변환합니다.
let str1 = '123';
let str2 = '1.23';
console.log(Number(str1));   // 123
console.log(Number(str2));   // 1.23

// 2. Number.parseInt() : 문자열을 정수로 변환합니다.
console.log(Number.parseInt(str1));  // 123
console.log(Number.parseInt(str2));  // 1

// 3. Number.parseFloat() : 문자열을 부동소수점 숫자로 변환합니다.
console.log(Number.parseFloat(str1));  // 123
console.log(Number.parseFloat(str2));  // 1.23


// 4. String() : 값을 문자열로 변환합니다.
let num1 = 123;
let num2 = 1.23;
console.log(String(num1));   // '123'
console.log(String(num2));   // '1.23'


// 5. Date() : 날짜를 나타내는 문자열을 Date 객체로 변환합니다.
let date1 = '2023-03-04';
console.log(Date(date1)); // Sat Mar 04 2023 17:17:22 GMT+0900 (한국 표준시)


// 6. JSON.stringify() : 객체를 문자열로 변환합니다.
let obj1 = {name: 'BlueShare', age: 20};
console.log(JSON.stringify(obj1));   // '{"name":"BlueShare","age":20}'

☞ Number() 함수를 사용하는 것보다 정수로 변환해야 하는 경우에는 Number.parseInt() 함수를 사용하는 것이 더 직관적이고 적합하며, 부동소수점 숫자로 변환해야 하는 경우에는 Number.parseFloat() 함수를 사용하는 것이 더 적합합니다.

자바스크립트 기초 이전 게시글

1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
3. 자바스크립트 자료형 종류 및 사용 예시
4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!