본문 바로가기
✏️ 공부/JavaScript

형변환(Type conversion)

by minzyee 2022. 1. 23.

명시적 형변환

개발자가 의도를 가지고 원하는 데이터 타입으로 변환을 해주는 것

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

 

 

 

문자열 끼리의 덧셈은 피연산자가 이어진 형태로 반환된다.

"Hello" + " world" = "Hello world"
"집" + " 가고싶다" = "집 가고싶다"

 

숫자열 끼리의 덧셈은 연산이 된다.

100 + 20 = 120

 

만약 피연산자의 데이터타입이 서로 다르다면?

"20" + 30 = ? //결과: '2030' (string)

 

 

 


 

 

 

prompt() 함수를 이용해 사용자로 부터 입력 받은 값으로 간단한 점수 계산을 해보았다.

 

문자형을 숫자형으로 나눠서 벌어진 일

위와 같은 결과가 나온 이유는

prompt()로 입력받은 값은 문자형으로 반환되기 때문에

문자 '80'과 문자 '90'이 더해져서 '8090'이 되었고

그 값을 2로 나눠서 4045라는 결과값이 나왔다.

(여기서 문자형인 '8090'을 /2 해서 숫자형인 4045 값이 나왔는데 이것은 '자동 형변환'에 의해 일어난 것인데 다음에 다뤄보겠다...)

 

그래서 항상 의도를 갖고 원하는 타입으로 변환을 해주는 것이 좋다.

String(), Number(), Boolean() 이런 것들을 사용해 데이터 타입을 변환 해주는 것을 명시적 형변환 이라고 한다.

 

Number()를 사용해서 나름대로 고쳐본 코드

 

 

 


 

 

 

String()

문자형으로 변환 시, console창에서 확인한 결과

 

 

Number()

NaN은 Not a Number라는 의미로, 숫자가 아니라는 뜻이다.

여기선 숫자가 아닌 문자가 함께 포함된 경우 NaN이 반환된다.

숫자형으로 변환 시, console창에서 확인한 결과

* 주의사항 *

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

위의 내용은 외워둬라

prompt()에서 취소 버튼을 누르면 null로 받아드린다.

Number(null)이 할당되며 값이 0이 된다.

 

 

 

Boolean()

논리형으로 변환 시, console창에서 확인한 결과

논리형의 경우는 조금 다르다.

Boolean()의 경우에는 false의 케이스만 기억하면 된다.

(그것 외에는 전부 true 값으로 나오기 때문이다.)

 

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

 

* 주의사항 *

(미묘한 차이도 잘 알아두자)

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

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

 

 

 

 

 

 

코딩앙마님의 JS 기초 강좌를 참고하여 정리한 글 입니다.

반응형

'✏️ 공부 > JavaScript' 카테고리의 다른 글

[JS] 비교 연산자  (0) 2022.01.28
[JS] 연산자(operator)  (0) 2022.01.27
JS 대화상자 alert(), prompt(), confirm()  (0) 2022.01.17
자료형(string, number, boolean...)  (1) 2022.01.08
변수(let과 const)  (5) 2022.01.08