[JS] 형 변환

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

이런 과정을 '형 변환 (type conversion)' 이라고 함

 

[대표적 예시]

1. alert 가 전달받은 값의 자료형 관계없이 문자열로 자동 변환해 보여주는 것

2. 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우

 

* 원시형 형변환 먼저 다루기 *

 

문자형으로 변환

문자형의 값이 필요할 때 일어나며, alert 메서드는 매개변수로 문자형을 받음

따라서 alert(value) 에서 value 는 문자형이어야 함 (만약, 다른 형의 값을 전달받으면 문자형으로 자동변환)

또는 String(value) 함수 호출해 전달받은 값 문자열로 변환

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

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

value = String(true) 이므로 value 는 "true"가 된다!

 

숫자형으로 변환

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

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

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

Number(value) 함수 사용해 주어진 값 (value) 를 숫자형으로 명시해 변환 가능

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

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

alert(typeof num); // number

숫자형 값을 사용해 무언가 할 때 그 값을 문자 기반 폼(form) 통해 입력 받을 경우, 명시적 형 변환 필수!

 

한편, 숫자 이외 글자 들어간 문자열 숫자형 변환시 결과는 NaN (Not a Number)

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

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

 

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

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	문자열의 처음, 끝 공백 제거 공백 제거 후 남아있는 문자열이 없음 -> 0 공백 제거 후 남은 문자열 있음 -> 문자열에서 숫자를 읽음 변환 실패시 NaN

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

null 과 undefined 는 숫자형 변환시 결과가 다름!!

대부분의 수학 연산은 형 변환 수반함

 

불린형으로 변환

아주 간단. 이 형변환은 논리 연산을 수행할 때 발생함

- 숫자 0, 빈 문자열 "", null, undefined, NaN 과 같이 직관적으로 '비어있다' 느껴지는 값 = false

- 그 외의 값 = true

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

Boolean("hello"); // 문자열(true)
Boolean(""); // 빈 문자열(false)

//❗️주의 :  문자열 "0" 은 true
//PHP 등 일부 언어에서 문자열 "0"을 false로 취급, 하지만 JS에서는 비어있지 않은 문자열은 항상 true
Boolean("0"); // true
Boolean(" "); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환

 

요약

문자, 숫자, 논리형으로의 형 변환은 자주 일어남

 

문자형으로 변환

- 무언가 출력할 때 주로 일어남

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

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

 

숫자형으로 변환

- 수학 관련 연산시 주로 일어남

- Number(value) 로 형 변환

- 숫자형 변환 규칙 따를 것

 

불린형으로 변환

- 논리 연산시 발생

- Boolean(value) 로 변환

0, null, undefined, NaN, ""	false
그 외의 값	true

 

+ 예외적인 경우 기억할 것

1. 숫자형 변환 시 undefined 는 0 이 아니라 NaN

2. 문자열 "0" 과 " " 같은 공백은 불린형 변환 시 true

 

다음은 객체를 원시형으로 변환하기 정리 할 것.

 

참조

https://ko.javascript.info/type-conversions