[자바스크립트] 형변환

권가야·2022년 9월 23일
0
post-thumbnail
형변환이란?

자바스크립트의 모든 값은 타입이 있다.
개발자가 본인의 의도에 따라 타입을 변환하는 것을 명시적 타입 변환( explicit ) 또는 타입 캐스팅 ( type casting ) 이라고 한다.

예시를 들어보자


let x = 10; // number

// 숫자를 문자열로 형변환 한다. (명시적 형변환)
let str = x.toString();
console.log(typeof str, str); // string 10

// 원본 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x) // number 10

그러면 원하지 않는데 타입이 바뀌는 경우가 있어요 ???

개발자의 의도와는 상관없이 코드를 작성하는 도중에 자바스크립트 엔진이 개입하여 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 ( implicit coercion ) 또는 타입 강제 변환 ( type coercion ) 이라 한다.

예시를 들어보자


let x = 10 ; // number

// 문자열 연결 연산자는 숫자 타입의 값을 바탕으로 새로운 문자열을 생성한다. ( 암묵적 타입 변환 )
let str = x+''; // 개발자의 의도와는 상관 없이 문자열 연결 연산자로 인해 문자열 타입으로 변환된다.
console.log(typeof str, str); // string 10

// 원본 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

형변환의 의미는 기존 원시 값을 직접적으로 변경하는 것이 아니다.
위의 예제를 들면 x의 변수 값이 변하지 않고 x의 값을 바탕으로 새로운 변수에 할당하는 것이다.
즉, 기존 변수에 재할당하여 변경하는 것이 아니다.


다양한 명시적 타입 변환

// 문자열로 형변환
String(30);			// '30'
NaN.toStriong();	// 'NaN'
true+'';			// 'true'

// 숫자열로 형변환
Number('999');		// 999
parseInt('-30');	// -30
+56					// 56
+true				// 1
Number(false);		// 0

다양한 암묵적 타입 변환 ( 예측하기 힘든 암묵적 타입 변환 )

'10'+2 // '102'
5*'10' // 50
!0 // true
if(1) console.log('메롱') // '메롱'
if(0){ console.log('메롱') }else{ console.log('바보') } // '바보'

// 템플릿 리터럴
`1+1 = ${1+1}` // '1 + 1 = 2'

요약
1.개발자가 본인의 의도에 따라 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라고 한다.
2.발자의 의도와는 상관없이 자바스크립트 엔진이 개입하여 타입을 변환하는 것을 암묵적 타입 변환 혹은 타입 강제 변환이라고 한다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!

0개의 댓글