B4 : 원시형의 형변환

목차

1. 형변환

2. 문자형으로 변환

3. 숫자형으로 변환

4. 불린형으로 변환

5. 암시적 강제 변환

    5-1. 덧셈 연산자

    5-2. 동등 연산자

    5-3. 비교 연산자

    5-4. 논리 연산자

    5-5. 조건 표현식

---

1. 형변환

자바스크립트는 관대한 타입 변환을 수행하여, 어떤 경우에 데이터 타입 변환이 발생하는 지 알아야 한다.

자바스크립트의 타입 변환은 두 가지가 있다.

• 명시적 강제 변환: 개발자의 의도적인 타입 변환
• 암시적 강제 변환: 연산 중 내부적으로 타입 변환

각 타입(형)마다의 명시적 강제 변환들을 보고 암시적 강제 변환은 몰아서 봐보자.

---

2. 문자형으로 변환

다른 타입에서 문자열 타입으로의 변환은 ToString 추상 연산 명세를 기준으로 이루어진다.

문자열의 변환은 대부분 예측 가능한 방식으로 일어난다.

타입	문자열 변환 결과
undefined	'undefined'
null	'null'
boolean	true ⇢ 'true', false ⇢ 'false'
number	Number.toString()의 결과 반환(3 ⇢ '3')
Symbol	*TypeError
BigInt	BigInt.toString()의 결과 반환(3n  ⇢ '3n')
object	객체를 원시 타입으로 반환(ToPrimitive추상연산)  ⇢ ToString 추상 연산 수행값 반환

*Symbol이 변환되어 객체의 다른 프로퍼티에 접근하는 것을 방지하고자 TypeError 발생

 

String(), toString() 메서드를 사용해서 형변환을 일으킨다.

// String()
console.log(String(false));	// 'false'
console.log(String(3));	// '3'

// toString()
const bool = false;
console.log(bool.toString());	// 'false'

const num = 4;
console.log(num.toString());	// '4'

 

String()과 toString()이 차이를 보이는 곳은 null, undefined를 변환할 때이다.

console.log(String(null))	// 'null'
console.log(String(undefined))	// 'undefined'

undefined.toString();	// TypeError
null.toString();	// TypeError

 

null과 undefined는 원시 타입이며, 객체가 아니기 때문에

객체에서 사용할 수 있는 프로퍼티인 toString()을 사용할 수 없다.

 

String()은 모든 타입이 명세 규칙을 정확하게 따르므로, 명시적 강제 변환을 하고 싶다면 String() 함수를 사용하는 것이 더 좋다.

---

3. 숫자형으로 변환

다른 타입에서 숫자 타입으로의 변환은 ToNumber 추상 연산 명세를 기준으로 이루어진다.

타입	숫자 변환 결과
undefined	NaN
null	+0
boolean	true ⇢ 1, false ⇢ 0
string	숫자로 변경 불가능한 값 ⇢ NaN, 숫자형 문자열 ⇢ 숫자
Symbol	TypeError
BigInt	TypeError
object	객체를 원시 타입으로 반환(ToPrimitive추상연산)  ⇢ ToNumber 추상 연산 수행값 반환

 

 

Number(), parseInt() 메서드를 사용해서 형변환을 일으킨다.

// Number()
console.log(Number('3'));	//3
console.log(Number(true));	// 1
console.log(NUmber(null));	// 0

// parseInt(문자열, 기수(진수))
console.log(parseInt('10', 10));	// 10
console.log(parseInt('-1', 10));	// -1

console.log(Number('10A', 10));	// NaN
console.log(parseInt('10A', 10));	// 10

 

• parseInt() 함수
  → 문자열만 대상으로 변환한다.
  → 값이 문자열이 아니라면 문자열로 반환 후 사용하며, 그 과정은 ToString 연산 과정을 따른다.
• Number()는 변경 불가능한 문자에 대해 바로 NaN을 반환하지만,
  parseInt()는 불가능한 문자가 나타날 때까지 최대한 변환한다.

---

4. 불린형으로 변환

다른 타입에서 불리언 타입으로의 변환은 ToBoolean 추상 연산 명세를 기준으로 이루어진다.

논리 연산자의 truthy/falsy 값의 기준도 ToBoolean이다.

타입	불리언 변환 결과
undefined	false
null	false
number	+0, -0, NaN ⇢ false, 그 외 숫자 ⇢ true
string	빈 문자열 ⇢ false, 그 외 문자열 ⇢ true
Symbol	true
BigInt	0n ⇢ false, 그 외 BigInt 정수 ⇢ true
object	true

 

 

Boolean(), 이중 부정 연산자를 사용해서 형변환을 일으킨다.

const a = null;
const b = 0;
const c = '';
const d = {};
const e = [];

console.log(Boolean(a));	// false
console.log(Boolean(b));	// false
console.log(Boolean(c));	// false
console.log(Boolean(d));	// true
console.log(Boolean(e));	// true

console.log(!!a);	// false
...

 

 

---

5. 암시적 강제 변환

암시적 강제 변환은 연산 중에 내부적으로 타입을 변환하는 것이다.

연산자 글 >>

 

 

1. 덧셈 연산자

1. 피연산자 중 하나가 문자열 타입인 경우, 나머지 타입도 문자열로 변환하여 병합

2. 피연산자 중 하나가 객체이며 문자열 변환이 가능할 경우, 문자열로 변환하여 병합

3. 피연산자가 모두 문자열/객체가 아닌 경우, 숫자로 변환하여 연산. 변환 결과의 타입이 각각 다르면 TypeError 발생

//1
console.log(1 + '');	// '1'

//2
console.log(1 + {});	// '1[Object object]'

//3
console.log(1 + true);	// 2

 

2. 동등 연산자

1. 피연산자 중 하나는 String, 하나는 Number인 경우, String ⇢ Number 변환

2. 피연산자 중 하나는 String, 하나는 BigInt인 경우, String ⇢ BigInt 변환

3. 피연산자 중 하나는 null, 하나는 undefined인 경우, 동등하게 판단

4. 피연산자 중 하나가 Boolean일 경우, Boolean ⇢ Number 변환

5. 피연산자 중 하나는 Object, 하나는 String/Number/BigInt/Symbol 중 하나일 경우, Object ⇢ Primitive 변환

6. 피연산자 중 하나는 Number, 하나는 BigInt인 경우 내부적인 숫자 비교 알고리즘에 따라 비교한 결과 반환

// 1. Str to Num
console.log(1 == '1');	// true

// 2. Str to BigInt
console.log(1n == '1');	// true

// 3. null & undefined
console.log(null == undefined);	// true
console.log(undefined == null);	// true

// 4. Boolean
console.log(true == 1);	// true

// 5. Object to Primitive
console.log('[object Object]' == {});	// true

// 6. Num & BigInt
console.log(1 = 1n);	// true

동등 연산에서의 타입 변환은 가독성이 떨어지는 경우가 있다.

따라서 사용할 때 팀원들과 컨벤션을 정해두고 사용하는 것이 좋다.

 

3. 비교 연산자

문자열의 비교 : 각 문자를 알파벳 순서로 비교

console.log('a' < 'b');	// true
console.log('a' < '04');	// true : '1'과 '0'을 먼저 비교하고, 그 다음 문자를 비교

 

배열의 비교 : 각 문자열로 변환되기 때문에 문자열끼리의 비교를 수행

console.log(['a'] < ['b']);	// true

 

문자열 외의 비교 : 숫자로 변환하여 비교

console.log('1' < 2n);	// true
console.log(1 < true);	// false
console.log(1n < 2);	// true

 

4. 논리 연산자

논리 연산 결과값은 boolean 타입이 아닐 수도 있다.

const a = null;
const b = 'javascript';
const c = 1;

console.log(a && b );	// null
console.log(b || c );	// 'javascript'

// 리액트에서 조건에 따라 컴포넌트 렌더링할 때 자주 사용하는 방식
const a = true;
function doSomething() { ... }
...
a && doSomething()	// a가 truthy일 때만 함수 실행

 

5. 조건 표현식

조건 표현식에서는 모든 값이 boolean으로 변환되어 평가된다.

const a = 0;	// 숫자형
const b = 'javascript';	// 문자열형
const c = null;	// 불린형

if (a) {	// falsy
	console.log('호출되지 않음');
}

while (b) {	// truthy
	console.log('truthy');
    break;
}

console.log( c ? 'truthy' : 'falsy');	// 'falsy'

 

 

 

 

+퀴즈

null == undefined;	// true

false == 0;	// true

0 == [];	// false

String([1, 2, 3]);	// '1, 2, 3'

'a' + {};	// 'a[Object object]'

'1' < ['02'];	// false

NaN === NaN;	// false

[] && 'null' || 'default';	// 'null'

[] || 'default';	// []

const obj = {
	valueOf() {
    	return 1;
    },
    toString() {
    	return 'string'
    }
};

Number(obj);	// 1

 

 

 

 

참고

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

형 변환

기초부터 완성까지, 프런트엔드 (이재성|한정)

기초부터 완성까지, 프런트엔드 - 예스24