JAVASCRIPT) 데이터 형 변환

자바스크립트 데이터 형 변환

안녕하세요. 오늘은 자바스크립트 데이터 형 변환에 대해 알아보도록 하겠습니다.

정의와 개요

자바스크립트 데이터 형 변환이란 값의 데이터 타입을 다른 데이터 타입으로 변경하는 과정을 말합니다. 자바스크립트는 동적 타입 언어로, 변수에 다양한 데이터 타입을 저장할 수 있으며, 데이터 타입 간 변환이 자주 발생합니다. 데이터 형 변환은 두 가지 주요 방식으로 나눌 수 있습니다: 명시적 형 변환과 암묵적 형 변환입니다.

1. 명시적 형 변환 (Explicit Type Conversion)

명시적 형 변환은 개발자가 의도적으로 데이터 타입을 변환하는 것을 말합니다. 이를 위해 자바스크립트는 여러 가지 내장 함수를 제공합니다.

• 숫자로 변환: Number(), parseInt(), parseFloat()
• 문자열로 변환: String()
• 불리언으로 변환: Boolean()

// 문자열을 숫자로 변환
let str = "123";
let num = Number(str); // 123
console.log(num); // 123

// 문자열을 정수로 변환
let floatStr = "123.45";
let intNum = parseInt(floatStr); // 123
console.log(intNum); // 123

// 문자열을 부동 소수점 숫자로 변환
let floatNum = parseFloat(floatStr); // 123.45
console.log(floatNum); // 123.45

// 숫자를 문자열로 변환
let numToStr = String(num); // "123"
console.log(numToStr); // "123"

// 값을 불리언으로 변환
let truthy = Boolean(1); // true
let falsy = Boolean(0); // false
console.log(truthy); // true
console.log(falsy); // false

2. 암묵적 형 변환 (Implicit Type Conversion)

암묵적 형 변환은 자바스크립트 엔진이 자동으로 데이터 타입을 변환하는 것을 말합니다. 이는 주로 연산자나 표현식 내에서 발생합니다.

• 숫자로 변환: Number(), parseInt(), parseFloat()
• 문자열로 변환: String()
• 불리언으로 변환: Boolean()

// 숫자와 문자열의 덧셈
let result = 123 + "456"; // "123456"
console.log(result); // "123456"

// 문자열과 숫자의 뺄셈
let subtract = "123" - 23; // 100
console.log(subtract); // 100

// 불리언과 숫자의 덧셈
let booleanNum = true + 1; // 2
console.log(booleanNum); // 2

// null과 undefined의 연산
let nullSum = null + 1; // 1
console.log(nullSum); // 1

let undefinedSum = undefined + 1; // NaN
console.log(undefinedSum); // NaN

3. 데이터 형 변환의 규칙

1. 숫자로 변환:
   • true는 1, false는 0으로 변환됩니다.
   • null은 0, undefined는 NaN으로 변환됩니다.
   • 문자열이 숫자로 변환될 수 있으면 해당 숫자로, 그렇지 않으면 NaN으로 변환됩니다.
2. 문자열로 변환:
   • 모든 값은 String() 함수에 의해 문자열로 변환될 수 있습니다.
   • true는 “true”, false는 “false”로 변환됩니다.
   • null은 “null”, undefined는 “undefined”로 변환됩니다.
3. 불리언으로 변환:
   • 0, NaN, null, undefined, 빈 문자열 ““은 false로 변환됩니다.
   • 그 외의 모든 값은 true로 변환됩니다.

// 다양한 값의 숫자 변환
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("123")); // 123
console.log(Number("123abc")); // NaN

// 다양한 값의 문자열 변환
console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"

// 다양한 값의 불리언 변환
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

주의사항 및 팁

• NaN: 숫자로 변환할 수 없는 값은 NaN(Not-a-Number)이 됩니다. 이는 연산에서 주의해야 합니다.
• • 연산자: 문자열을 숫자와 더할 때, 숫자가 문자열로 변환됩니다. 예: “123” + 1은 “1231”이 됩니다.
• == vs ===: == 연산자는 암묵적 형 변환을 수행할 수 있지만, === 연산자는 엄격한 비교를 합니다.
• 가능한 ===을 사용하는 것이 좋습니다.

결론

자바스크립트 데이터 형 변환은 다양한 데이터 타입 간의 변환을 통해 유연하고 동적인 코드를 작성할 수 있게 합니다. 그러나 암묵적 형 변환은 예상치 못한 결과를 초래할 수 있으므로 주의가 필요합니다. 명시적 형 변환을 통해 의도를 명확히 하는 것이 좋습니다. 다양한 형 변환 방법을 이해하고 적절하게 활용함으로써, 안정적이고 예측 가능한 코드를 작성할 수 있습니다.