본문 바로가기
코딩/자바스크립트

형 변환

by rosemarie 2022. 10. 11.
반응형

형 변환

 

형 변환(type conversion): 함수와 연산자에 전달되는 값이 적절한 자료형으로 자동 변환되는 것

ex> alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환해 줌, 수학 관련 연산자가 전달받은 값을 숫자로 변환, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)

 

문자형으로 변환

문자형의 값이 필요할 때 일어난다.

alert메서드는 매개변수로 문자형을 받기 때문에, alert(value)의 value는 문자형. 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환.

String(value) 함수: 전달받은 값을 문자열로 변환

let value = true;
alert(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

 

숫자형으로 변환

 

수학과 관련된 함수와 표현식에서 자동으로 일어난다.

숫자형이 아닌 값에 나누기 /를 적용한 경우와 같이 말이죠.

 

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

Number(value) 함수: 주어진 값(value)을 숫자형으로 명시해서 변환.

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

 

한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다. 

let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.

 

숫자형으로 변환 시 적용되는 규칙

전달받은 값  형 변환 후

undefined NaN
null 0
true and false 1  0
string 문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.
alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

 

불린형으로 변환

논리 연산을 수행할 때 발생. 

Boolean(value): 명시적으로 불리언으로의 형 변환을 수행

불린형으로 변환 시 적용되는 규칙은 다음과 같습니다.

  • 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false
  • 그 외의 값은 true로 변환
  • 주의: 문자열 "0"은 true!
alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

 

 

<복습 질문> string에서 숫자형으로 변환할 시 어떻게 동작하나요?

'코딩 > 자바스크립트' 카테고리의 다른 글

비교연산자  (0) 2022.10.11
기본 연산자와 수학  (0) 2022.10.11
alert, prompt, confirm을 이용한 상호작용  (0) 2022.10.11
자료형  (1) 2022.10.11
변수와 상수  (0) 2022.10.11