JS : 형 변환(Type Casting)

JS : 형 변환(Type Casting)

---

형 변환 (Type Casting)

- 데이터의 타입을 변경하는 것을 말한다.   ( 문자형 → 숫자형 숫자형 → 문자형 등 )
- 첫글자를 대문자로 바꿔서 적는다.

• String() → 문자형으로 변환
• Number() → 숫자형으로 변환
• Boolean() → 불린(논리)형으로 변환

---

예시  : 점수를 받아서 평균점수를 내는 상황

• 사용자에게 수학 점수와 영어 점수를 입력받아 평균점수를 내려고 한다. 아래와 같이 했을 때 평균값은 얼마로 나올까
  • 만약 수학점수를 90 영어를 80이라고 가정했을 때 나누기( / ) 2를 했기 때문에 90+80/2 = 85가 나와야 한다. 

 

예제 01-01 : prompt로 정보를 입력받아 평균점수를 낸다.

//ex 01
const mathScore = prompt("수학점수 몇점인가요?");
const engScore = prompt("영어점수 몇점인가요?");
const result = (mathScore + engScore)/2
console.log(result);

 

예제 01-02 : 정보 값을 직접 입력한다.

// ex 02
const mathScore1 = 90;
const engScore1 = 80;
const result1 = (mathScore1 + engScore1)/2;
console.log(result1);

 

---

예제 01-01 과 01-02의 결과값이 다른 이유

• prompt로 데이터를 입력했을 경우 숫자 90이 아닌 문자형 "90"이 되어 90+80/2 가 아닌 "90"+"80" / 2 가 되었기 때문에 "9080" /2 = 4540 이 된 것이다.
  • 문자형인데 "9080"이 나누기가 된 이유는 나누기는 자체적으로 문자형을 숫자형으로 바꿔서 인식하기 때문에 나누기가 적용된 것이다. (자동형 변환) → 원인 모를 오류를 발생할 수 있기 때문에 조심해야 한다.
• 반면, 예제 01-02는 각 상수에 숫자를 직접 입력했기 때문에 원하는 결과값이 나온 것이다.

이러한 예상치 못한 오류를 낼 수 있기 때문에 데이터를 받아서 사용할 경우에 형변환은 꼭 해주어야 한다.

 

---

명시적 형변환                  

String() : 문자형

• 첫 글자를 대문자로 쓴다.

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

//'3' 'true' 'false' 'null' 'undefined' 문자형이 되었다.

console.log() 는 쉼표(,)를 이용하여 여러개를 넣을 수 있다.

문자형이 된 모습을 볼 수 있다.

 

---

Number() : 숫자형

• 첫 글자를 대문자로 쓴다.
• 사용자로부터 받은 값이 문자형일 경우 자주 사용한다. (예제 02-01 참고)
• 큰따옴표("") 안에 숫자가 아닌 다른 것이 있으면 NaN (Not a Number)가 되므로 주의해야 한다. ( 예제 02-02 참고 )
• false는 0, true는 1의 값을 가지고 있다. ( 예제 02-03 참고)

 

예제 02-01 : 사용자로부터 받은 값이 문자형일 경우 자주 사용한다. 

console.log(
	Number("1234")
)

문자형 "1234"가 숫자형 1234로 변환되었다.

 

예제 02-02 : 큰따옴표("") 안에 숫자가 아닌 다른 것이 있으면 NaN (Not a Number)가 되므로 주의

console.log(
	Number("안녕하세요")
)

 

예제 02-03 : false는 0, true는 1의 값을 가지고 있다.

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

true 는 1 false 는 0의 값을 갖고있다.

 

---

Boolean() : 논리형

• fasle의 케이스만 기억하면 된다. ( 비어 보이면 false, 그 외엔 모두 true이다.)
  • 숫자 0
  • 빈 문자열 ""
  • null
  • undefined
  • NaN

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

모두 false 이다.

위의 조건이 아니면 모두 true이다.

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

 

 

---

정리

• String() → 문자형으로 변환한다.
• Number() → 숫자형으로 변환한다. // Number("문자") → NaN (Not a Number)
• Boolean() → 불린(논리)형으로 변환한다. // 0, "", null, undefined, NaN → false 그 외 모두 true

주의사항

Number(null) //0  → 나이를 prompt로 받으려고 할때 취소를 하면 null을 받고 null은 0이다. 0은 false 이다.

Number(undefined) //NaN 이다.

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

Boolean("")//false
Boolean(' ') //true(공백이들어있기때문에 true)

 

 

---

2022.05.03 - [TIL/JavaScript] - JS : alert, prompt, confirm - 대화상자를 나타내는 메서드

JS : alert, prompt, confirm - 대화상자를 나타내는 메서드

2022.04.14 - [TIL/JavaScript] - JS : 자료형 - 원시 타입(primitive type)

JS : 자료형 - 원시 타입(primitive type)