4.형변환

✔️ 형변환

오늘은 형변환에 대해 알아보고자 한다.

형변환이란 문자를 숫자형으로 숫자를 문자형으로 boolean을 문자형으로 바꾸는 등
형태를 변환해주는 것을 뜻한다.

📌 형변환이 왜필요할까!

문자형과 문자형을 더해주면 이어서 보여준다.
숫자와 숫자를 더하면 두수를 더한 합을 보여준다.
그런데 만약 자료형이 다르면 의도치 않은 동작이 발생할 수 있다.
이러한 것을 막기 위해 형변환이 필요하다!

수학과 영어의 점수를 입력받아 평균을 구하는 프로그램을 작성해보자!

각 점수는 배웠던 prompt를 통해 입력받을 수 있다!

⌨︎ 입력

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

console.log(result);

mathScore + engScore 에 괄호( )를 안쳐주면 나누기 먼저 계산되므로 괄호를 쳐주기!

💻 실행결과

4540

그랬더니 이상한 값이 나왔다!
그래서 사용자에게 점수를 입력받지 않고 직접 점수를 지정해보기로 했다!

⌨︎ 입력

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

console.log(result);

💻 실행결과

85

그랬더니 올바른 값이 나왔음을 확인할 수 있다.

📌 처음에는 왜 저런숫자가 나왔을까?

prompt로 입력받은 값은 무조건 문자형이다.
그래서 숫자 90이 아닌 문자 90이었던 것이다.

문자와 문자를 더하면 그대로 이어주므로

즉 "90"과 "80"을 prompt로 입력받아 더해주면 170이 아니라 "9080"이 되는것이다.

"9080" / 2 = 4540
9080을 2로 나누었으니 4540이라는 값이 나온 것이다.

📌 나누기는 왜 제대로 작동했는가?

숫자형이 아니더라도 나누기 같은 표현식을 쓰면 숫자형으로 자동변형되어 계산된다.

"6" / "2" = 3
▶ 이와 같은 경우에도 숫자형으로 자동변환되어 계산된것.
이러한 과정을 자동형변환 이라고 한다!

자동으로 되어 편리하다고 생각할 수 있지만
이런 작업들은 원인을 알 수없는 에러를 발생시키는 경우가 있으므로 항상 의도를 가지고
원하는 타입으로 변환해주는것이 좋다.
이러한 것을 명시적 형변환이라고 한다!

그렇다면 명시적 형변환을 할 수 있는 방법을 알아보자!

1. String()

String은 ()안에 타입을 문자형으로 바꾸어준다.
앞에 S는 대문자로 써줄것!

⌨︎ 입력

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

💻 실행결과

console.log는 ,로 구분을 해서 여러가지의 값을 한번에 찍을 수도 있다.

String()을 이용해 문자형으로 바꾸어 주었기 때문에
숫자 3은 문자열3으로
Boolean값인 true와 false는 각각 문자열로 변경되었고
null과 undefined도 각각 문자열로 잘 변형된것을 알 수 있다.

2. Number()

Number도 마찬가지로 제일 앞에 N은 대문자로 써주어야한다!
Number는 ()안에 있는타입을 숫자형으로 바꾸어준다.
보통 사용자로부터 입력받은 값이 문자형인 경우 자주 사용된다.

⌨︎ 입력

console.log(
  Number("1234"),
  Number("1234dadasffd")
)

💻 실행결과

문자열 1234가 숫자 1234로 바뀌는 것을 확인할 수 있다.
만약 문자열 안에 글자가 들어있으면 NaN이 되므로 주의해야한다.

조금 특이하게 true와 false는 number로 형변환을 시키면
1과 0의 값을 가진다!

⌨︎ 입력

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

💻 실행결과

3. Boolean()

Boolean(): Boolean형으로 바꾸어준다.

Boolean형으로의 변환은 false의 케이스만 기억하면된다.

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

이는 무언가 비어있거나 부정적인 표현이다!

이 값들은 모두 false가 되고
이 외에는 모두 true를 반환한다라고 기억하면됨!

⌨︎ 입력

console.log(
	Boolean(1),
	Boolean(123),
	Boolean("javascript")
)
    
console.log(
  Boolean(0),
  Boolean(""),
  Boolean(null),
  Boolean(undefined),
  Boolean(NaN)
)

💻 실행결과

위의 값들은 모두 true를, 아래의 값들은 모두 false를 반환하고 있다는 것을 알 수 있다.

⭐ 정리

String() : 괄호안의 자료형을 문자형으로 변환
Number(): 괄호안의 자료형을 숫자형으로 변환

만약 숫자가 아닌 문자가 포함되어있다면 NaN
Number("문자") //NaN

Boolean(): 괄호 안의 자료형을 불린형으로 변환
0,''(빈문자열),null,undefined,NaN ▶false
이 외에는 true값을 도출한다.

⚠ 주의사항

버그없는 코드를 만들기 위해 주의사항을 기억하자!

Number(null) // 0

prompt 값에서 취소를 눌렀을때 null로 입력됨
그러므로 Number(null)은 0으로 변환된다.

Number(undefined) // NaN

Number(undefined)는 NaN(Not a Number) 값이 나온다.

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

Boolean 0은 false지만 문자열 0은 true이다

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

Boolean 빈문자열은 false지만 공백은 true이다.