[모던JS] 011. [기본] 원시 타입 자료형의 형 변환(숫자형, 문자형, 불리언, 묵시적, 명시적)

원문

형 변환(type conversion)의 의미

원시 타입의 데이터 타입들(number, string, boolean, null, undefined)은 서로 그 자료형을 변환시킬 수 있다. 이것을 형 변환(type conversion)이라 한다.

문자형으로 형 변환

문자형 형 변환 기본형

String();

대소문자 주의

문자형 형 변환 예제

let value = true;
console.log(value); // boolean

value = String(value) // value라는 변수의 값을 string 타입으로 변환하라
console.log(typeof value); // string

true라는 불리언 값을 string으로 변환하라고 했다. 값 자체는 "true"로 바뀌었다. 이상하게 다른 문자로 바뀌지 않는다.

숫자형으로 형 변환

숫자형 형 변환 기본형

숫자형으로의 형 변환은 사칙연산과 관련된 연산기호가 들어가는 경우 자동으로 변환된다.

Number()

// 또는 + 하나만 붙여도 됨. 012. 수학 연산자에서 내용을 다룸.

대소문자 주의

숫자형 형 변환 예제

console.log( "6" / "2" ); // 3

위 코드는 문자 6과 문자 2를 나누라는 말이 안 되는 연산이지만 자동으로 숫자 6, 숫자 2로 변환한 후 연산한다.

묵시적 형 변환과 명시적 형 변환

이렇게 자동으로 형 변환이 발생하는 것을 묵시적 형 변환(implicit type conversion)이라 하고, Number()과 같은 함수를 이용해서 일부러 바꾸는 것을 명시적 형 변환(explicit type conversion)이라 한다.

묵시적으로 형 변환이 이루어지는 것은 오류를 막아주기도 하지만 개발자가 의도하지 않은 오류를 발생시키기도 하기 때문에 이런 경우 의도적으로 명시적 형 변환을 이용한다.

let str = "123"
let num = Number(str);
console.log(typeof num); // Number

주의
위 코드에서 Number(str);만 단독으로 사용하면 그 코드 줄에서 변환만 할 뿐, 그 값을 변수에 저장하거나 수정한 것이 아니기 때문에 콘솔에 데이터 타입을 반환시켜봐도 여전히 string으로 출력된다.

Number()를 이용해서 명시적으로 형 변환을 해야 하는 경우로는 또 form을 통해서 사용자에게 숫자 데이터를 받을 때 사용한다. form에서 사용자가 입력한 값은 무조건 string 타입으로 들어오기 때문에 숫자로 활용하려면 Number()를 통해 형 변환을 해주어야 한다.

숫자로 형 변환이 안 되는 경우

형 변환 하려는 문자열에 진짜 문자가 포함된 경우에는 형 변환이 안 된다.

let age = Number("나이 23세");
console.log(age); // NaN

console.log(typeof age); // number

위 코드를 보면 '나이', '세'라는 진짜 문자가 들어있기 때문에 Number() 통해 명시적 형 변환이 이루어지지 않았고, NaN이 반환되었다.

그런데 typeof를 통해서 자료형을 반환시켜보면 number라고 뜬다. 이유는 '나이'와 '세'를 빼고 '23'이라는 숫자 자체만 형 변환 시켰기 때문이고 이를 인식하기 때문이다. 크게 의미는 없다. 어차피 age라는 변수는 다른 곳에서 접근해봐야 NaN이기 때문에 의미 없는 변수이다.

자료형별 숫자 형 변환 시 반환값

어떤 자료형을 숫자형으로 형 변환하느냐에 따라서 반환되는 숫자가 달라진다.

전달받은 값	형 변환 후
undefined	NaN
null	0
true	1
false	0
string	처음과 끝의 공백은 모두 제거 후 남은 문자열이 없으면 0, 아니면 문자열에서 숫자만 형 변환, 반환 실패시 NaN

let name;

console.log(Number(name)); // NaN
console.log(Number(null)); // 0
console.log(Number("123z")); // NaN 문자 z 때문에 형 변환 실패
console.log(Number("  123  ")); // 123 앞 뒤 공백 모두 제거
console.log(Number(" ")) // 0 공백 제거 후 문자열이 없어 0
console.log(Number(true)); // 1
console.log(Number(false)); // 0

불리언으로 형 변환

불리언 형 변환 기본형

Boolean();

자료형 별 변환되는 불리언 값

'비어있다'라는 의미를 주는 자료형들은 false, 그 외의 값은 true로 반환된다.

자료형	변환되는 불리언 값
0	false
빈 문자열(공백, 값이 아무 것도 없는 경우)	false
null	false
undefined	false
NaN	false
그 외	true

console.log(typeof ""); // false