형 변환 (type conversion)

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동으로 변환된다.

이러한 과정을 형 변환( type conversion )이라고 한다.

 

alert가 전달 받은 값의 자료형과 관계없이 이를 문자열로 자동으로 변환하여 보여주는 것이나,

수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시이다.

 

문자형으로 변환

---

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

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

• String(value) 함수를 호출해 전달받은 값을 문자열로 변환할 수도 있다.
• false는 문자열 "false"로, null은 문자열 "null"로 변환되는 것과 같이, 문자형으로의 변환은 대부분 예측이 가능한 방식이다.

 

 

숫자형으로 변환

---

숫자형으로의 변환은 수학과 관련된 함수, 표현식에서 자동으로 일어난다.

숫자형이 아닌 값에 나누기( / )를 적용한 경우가 그 예시이다.

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

 

 

Number(value)함수를 사용하면 전달받은 값을 숫자형으로 명시해서 변환할 수 있다. 

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

let num = Number(str); // 문자열 "0706"이 숫자 706으로 변환

alert(typeof num); // number
alert(num) // 706

• 숫자형 값을 사용해 무언가를 하려고 하면 그 값을 문자 기반 폼( form )을 통해 입력받는 경우엔, 이런 명시적 형 변환이 필수이다.
• 한편, 숫자 이외의 글자가 들어있는 문자열을 숫자형으로 변환하고자 하면, 그 결과는 NaN이 된다.

let age = Number("문자열 706");

alert(age); // NaN, 형 변환이 실패한다

 

NaN 이란 ?

Not a Number (숫자가 아님)의 약어이다.

alert(typeof NaN); // Number

• 하지만 놀랍게도 typeof를 해 보면 "number"라는 값이 출력된다.
• NaN은 이름과는 다르게 숫자라는 점을 기억하자.

 

 

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

전달받은 값	형 변환 이후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됨. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽는다. 변환에 실패하면 NaN이 된다.

 

예시

alert( Number("   706   ") ); // 706
alert( Number("706z") );      // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

• undefined와 null은 숫자형으로 변환 시 결과가 다르다는 점에 유의할 것.
• null은 0이 되고 undefined은 NaN이 된다. 

 

 

불린형으로 변환

---

• 불린형으로 변환은 간단하다.
• 해당 형 변환은 논리 연산을 수행할 때 발생한다. 
• Boolean(value)를 호출하면 명시적으로 불리언으로의 형 변환을 수행할 수 있다.

불린형으로 변환 시 적용되는 규칙

전달받은 값	형 변환 이후
0, null, undefined, NaN, ""	false
그 외의 값	true

• 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 '비어있다고' 느껴지는 값들은 false가 된다.
• 그 외의 값은 true로 반환

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("record") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)
alert( Boolean(" ") ); // 문자열(true)
alert( Boolean("0") ); // 문자열(true)

• *주의* 문자열 "0"은 true 이다. 
• PHP 등 일부 언어에서 문자열 "0"을 false로 취급한다. 그러나 JS에선 비어 있지 않은 문자열은 항상 true 이다.

 

 

정리

---

문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환이다.

 

문자형으로 변환은 무언가를 출력할 때 주로 일어난다.

String(value)을 사용하면 문자형으로 명시적 변환이 가능하다.

원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어난다.

 

숫자형으로 변환은 수학 관련 연산시에 주로 일어난다. 

Number(value)로 형 변환을 할 수 있다.

 

불린형으로 변환은 논리 연산 시 발생한다.

Boolean(value)으로 변환할 수 있다.

 

형 변환 시 적용되는 규칙은 이해하고 기억하기 쉬운 편이다.

다만 예외적인 경우가 있기 때문에 실수를 방지하기 위해서 따로 기억해두도록 하자.

• 숫자형으로 변환 시 undefined는 0이 아닌 NaN이 된다.
• 문자열 "0"과 " " 과 같은 공백은 불린형으로 변환 시 true가 된다.

 

 

 

 

 

참고

---

형 변환 (javascript.info)

형 변환

Let's Get IT 자바스크립트 프로그래밍: 2.2.2 숫자 - 5 (thebook.io)

Let's Get IT 자바스크립트 프로그래밍: 2.2.2 숫자 - 5

47페이지