형 변환

hee·2023년 2월 4일
0
post-custom-banner

'형 변환(type conversion)'은 함수와 연산자에 전달되는 값을 적절한 자료형으로 자동 변환되는 것을 말한다.

alert이 전달받은 값은 자료형 관계X => 문자열로 자동 변환
수학관련 연산자가 전달받은 경우 => 숫자로 변환

이 외에도 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 한다.

1. 문자형으로 변환

문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다.

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

String(value) 함수를 호출해 전달받은 값을 문자열로 변환도 가능

let value = true;
alert(typeof value); //결과: boolean

value = String(value); // 변수 value엔 문자열 'true' 저장
alert(typeof value); //결과: string

false는 문자열 'false'로, null은 문자열 'null'로 변환

2. 숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다. ex) 숫자형이 아닌 값에 나누기 (/)를 적용

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이된다.

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

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

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

전달받은 값형 변환 후
undefinedNaN
null0
true and false1과 0
string문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남는 문자열이 없다면0, 그렇지 않다면 문자열에서 숫자를 읽음. 변환에 실패하면 NaN
alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

!nullundefined는 숫자형으로 변환 시 결과가 다르다는 점 주의
(null은 0, undefined는 NaN)

3. 불린형으로 변환

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

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

• 숫자 0, 빈 문자열, null, undefined, NaN과 같이 비어있는 값들은 false가 된다.
• 그 외의 값은 true로 변환

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

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

! 주의: 문자열 "0"은 true이다.
(PHP 등의 일부 언어에선 문자열 "0"을 false로 취급하지만 자바스크립트에서는 비어 있지 않은 문자열은 무조건true이다.)

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // true (공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 로 변환)
profile
고군분투 코린이의 코딩일기
post-custom-banner

0개의 댓글