본문 바로가기

Study/JavaScript

[JS]자바스크립트 기초 | 형변환

728x90
String()  // 문자형으로 변환
Number()  // 숫자형으로 변환
Boolean() // 불린형으로 변환

"Hello " + "world" = "Hello world"
100 + 200 = 300
"100" + 200 = ???

문자형+ 문자형은 문자형을 숫자형 + 숫자형은 두 수를 더한 값을 보여주는데

자료형이 다르면 의도치 않은 동작이 일어날 수 있다.

const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const result = (mathScore + engScore) / 2;

console.log(result);
  1. prompt를 통해 숫자 받아왔을 경우
const mathScore = 90;
const engScore = 80;
const result = (mathScore + engScore) / 2;

console.log(result);
  1. 변수에 값을 직접 입력 받아왔을 경우

1번째 방법의 경우, 값은 "4540"이 나오며 그와 달리 2번째 방법의 경우,

변수 자체에 숫자형으로 값을 받아왔기 때문에 예상했던 평균값 85가 나온다.

1번째 방법이 왜 "4540"이 나왔을까?

이유는 prompt입력하여 받아올 경우 문자형으로 받아오기 때문에

값은 mathScore + engScore = "9080"이 되었으며

나누기(/)와 같은 표현식은 자동 형변환이 되어 문자형이 숫자형으로 변형되었다.

자동 형변환의 경우 원인을 찾기 힘든 에러가 나타나기 쉬우니 의도를 가지고

원하는 타입으로 변환해주는 명시적 형변환을 해주는 것이 좋다.

1. String()

console.log(
	String(3),
	String(true),
	String(false),
	String(null),
	String(undefined)
)

// "3", "true", "false", "null" "undefined"로 변환됨

console.log()는 콤마(,)를 찍어서 여러가지를 확인해볼 수 있다.

2. Number()

보통 사용자의 값이 문자형인 경우 자주 사용된다.

console.log(
	Number("1234")
)

//  숫자 1234로 변환됨

console.log(
	Number("1234fkkdl")
)

// NaN

문자열 안에 글자가 들어있을 경우 "NaN"된다.

console.log(
	Number(true),
	Number(false)
)

true와 false의 경우, true는 0으로 false는 1 0으로 변환된다.

Number(null) // 0
Number(undefined) //NaN

Boolean(0)   //false
Boolean('0') //true

Boolean('')  //false
Boolean(' ') //true

3. Boolean()

boolean형은 false인 경우만 기억해주면 된다.

false

  1. 숫자 0
  2. 빈 문자열(" ")
  3. null
  4. undefined
  5. NaN

이 외의 경우를 제외하고는 모두 true를 반환한다.