본문 바로가기

바닐라 코드/Java Script

7. 자료형 변환

자바스크립트에서 자료형 변환

자바스크립트는 자료형을 유연하게 다룰 수 있지만, 문자 ↔ 숫자 간 변환은 실무에서 자주 필요하다. 여기서는 숫자, 문자, 불리언 간 변환 방법을 설명한다.


1. 숫자를 문자로 바꾸기

숫자를 문자로 변환할 때는 String() 함수나 문자열 연산을 사용할 수 있다.

// 방법 1: String() 함수 사용
let age = 30;
let ageAsString = String(age); // "30"
console.log(typeof ageAsString); // "string"

// 방법 2: 빈 문자열과 더하기
let score = 100;
let scoreAsString = score + ""; // "100"
console.log(typeof scoreAsString); // "string"
  • 실제 사용 팁:
    • String() 함수는 명시적이고 직관적이다.
    • + "" 방법은 간결하지만 코드의 의도를 명확히 드러내지 않아 초보자에게는 헷갈릴 수 있다.

2. 문자를 숫자로 바꾸기

숫자로만 이루어진 문자열은 아래 방법으로 숫자로 변환할 수 있다.

// 방법 1: Number() 함수 사용
let height = "175";
let heightAsNumber = Number(height); // 175
console.log(typeof heightAsNumber); // "number"

// 방법 2: 곱하기 연산 사용
let width = "200";
let widthAsNumber = width * 1; // 200
console.log(typeof widthAsNumber); // "number"

// 주의: 문자가 포함된 문자열은 NaN을 반환한다.
let invalidNumber = Number("123abc"); // NaN
console.log(invalidNumber); // NaN
  • 실제 사용 팁:
    • Number() 함수는 명시적으로 변환 의도를 드러낸다.
    • 곱하기 연산(1)은 간결하지만 의도를 드러내지 않아 코드 가독성을 떨어뜨릴 수 있다.

3. 자료형을 불리언(true/false)으로 바꾸기

자바스크립트에서 0, null, undefined, NaN, ""false로 평가되며, 나머지는 모두 true로 평가된다.

3.1. 문자를 true/false로 변환

let greeting = "Hello";

// Boolean() 함수 사용
console.log(Boolean(greeting)); // true

// if 문에서 바로 사용
if (greeting) {
  console.log("greeting은 true로 평가됩니다.");
}

let emptyString = "";
console.log(Boolean(emptyString)); // false
  • 핵심: 빈 문자열("")은 false, 나머지 문자열은 내용과 상관없이 true로 평가된다.

3.2. 숫자를 true/false로 변환

let number = 42;
console.log(Boolean(number)); // true (0이 아닌 숫자는 true)

let zero = 0;
console.log(Boolean(zero)); // false (0은 false)

// if 문에서 사용
if (number - zero) {
  console.log("0이 아닌 결과는 true로 평가됩니다.");
}
  • 핵심: 0은 false, 나머지 숫자는 모두 true로 평가된다.

4. 예외 및 주의사항

4.1. 문자열에 숫자가 섞여 있는 경우

let invalid = "123abc";
console.log(Number(invalid)); // NaN
console.log(invalid * 1); // NaN
  • 숫자로 변환하려는 문자열에 문자가 포함되어 있으면 NaN(Not a Number)이 반환된다. 데이터가 숫자인지 검증이 필요하다.

4.2. 불리언 평가 주의

console.log(Boolean("0")); // true ("0"은 빈 문자열이 아니므로 true)
console.log(Boolean(0)); // false (숫자 0은 false)
  • 문자열 "0"true로 평가된다. 숫자 0과 혼동하지 않도록 주의해야 한다.

5. 요약

  1. 숫자 ↔ 문자 변환
    • String(value) 또는 value + ""로 숫자를 문자로 변환.
    • Number(value) 또는 value * 1로 문자를 숫자로 변환.
  2. 불리언 변환
    • Boolean(value) 또는 if (value)true/false 평가.
    • 0, 빈 문자열, null, undefined, NaNfalse, 나머지는 모두 true.

'바닐라 코드 > Java Script' 카테고리의 다른 글

9. 연산  (1) 2024.12.11
8. 브라우저 알림창 띄우기  (0) 2024.12.10
6. 자바스크립트의 자료형  (0) 2024.12.06
5. 변수와 상수  (3) 2024.12.05
4. use strict  (1) 2024.12.04