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

🤔형변환은 왜 필요한가 ?

"Hi" + "Cherry" = "Hi Cherry"
문자형과 문자형을 더 하면 문자형,
20 + 3 = 23
숫자형과 숫자형을 더하면 숫자형이 된다.
만약 자료형이 다르면 의도치않은 결과값이 나올 수도 있다.
아래의 예시로 함께 알아보자.

✍️작성

const mathScore = prompt("수학점수")
const EngScore = prompt("영어점수")
const result = (mathScore + EngScore)/2;
console.log(result)

💻출력

4540

수학점수와 영어점수의 평균값을 구하는 식에 전혀 다른 값이 출력된 것을 확인 할 수 있다.

이유는 prompt로 입력된 값은 모두 문자형으로 반환되기 떄문이다.

만약 수학점수 90점, 영어점수 80점으로 입력했다면 숫자 90 과 숫자 80의 합, 170이 아닌, 문자 "90"과 문자 "80"의 합인 "9080"으로 계산되었다는 것이다.

그런데 왜 "9080" / 2 = 4540은 계산이 되었을까?

🪄바로 자동형변환이다.

자동으로 형변환을 시켜줘서 편리할 수 있겠지만, 원인을 찾기 힘든 에러를 발생기킬 수 있다.
그래서 의도를 가지고 원하는 type으로 변환시켜주는 것이 중요하다.

의도를 가지고 원하는 type으로 형변환을 시키는 것을 명시적 형변환이라고 한다. 함께 알아보자 ✨

✔️String

string() 👉 문자형으로 반환

✍️작성

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

💻출력

3 true false null undefined

문자로 값이 출력되는 것을 확인 할 수 있다.

✔️Number

number() 👉 숫자형으로 반환

✍️작성

console.log(
Number("1234")
)

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

💻출력

1234
NaN

문자 "1234"는 숫자 1234로 변환되었고,
🚨문자열안에 글자가 들어있으면 NaN을 반환한다.

또한 Number 는 true와 false 또한 숫자로 반환시켜준다.

✍️작성

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

💻출력

1 0

true는 1의 값을 반환하고, false는 0의 값을 출력한다.

✔️Bloolean

bloolean() 👉 블린형으로 반환

블린형으로의 반환은 false의 경우만 기억하면 된다.

false

• 숫자0
• 빈 문자열
• null
• undefined
• NaN

위의 값들은 모두 false를 반환하고 다른값들은 true를 반환한다고 생각하면 된다.

✍️작성

console.log(
Boolean(1),
Boolean(123),
Boolean("javascript")
)

console.log(
Boolean(0),
Boolean(""),
Boolean(undefined),
Boolean(NaN)
)

💻출력

true true true
false false false false

🚨주의사항

Number(null) 👉 0
Number(undefined) 👉 NaN


Number(0)👉false
Number('0')👉true


Number('')👉false (공백無)
Number(' ')👉true (공백有)