자바스크립트 암묵적 / 명시적 형변환 정리

자바스크립트의 7가지 데이터 타입

Number, String, Boolean, undefined, null, Object, Symbol

변경 불가능한 원시 타입, 변경 가능한 참조 타입이 있다

 

원시 타입은 한번 생성하면 값을 바꿀 수 없다 

흔히 많이 사용하는 String, Number을 +로 연결하는 것은 새로운 메모리 공간에 변경된 값을 저장하는 것이다

 

암묵적 형변환

자바스크립트 엔진은 표현식을 평가할 때, 코드 문맥에 부합하도록 암묵적으로 타입 변환을 실행한다

 

암묵적 형변환은 형변환 된 변수값을 재할당하는 것이 아니라 변환된 변수를 평가를 위해 한번 사용하고 버린다

즉, 기존 원시값을 사용해 새로운 타입의 원시값을 생성하는 것이다!

 

String

1. 템플릿 리터럴 (``)

문자열 안에 변수, 표현식을 쉽게 포함할 수 있는 문자열 표기법이다

const name = 'John';
const age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);

2. + (문자열 연결 연산자)

피연산자 중 문자열이 하나라도 있다면 문자열 연결 연산자로 동작한다

1 + '2' = 12

만약 객체 타입이 문자열과 연결이 되면, 자동으로 toString() 메소드가 호출되어 [object Object] 로 변환한다

const obj = {
  name: 'John',
  age: 30
};

const str = 'User: ' + obj;
console.log(str); // User: [object Object]

 

Number

1. 산술(+,-,*, / ..) 연산자

피연산자가 숫자 타입으로 변환할 수 없는 경우는 표현식의 평가 결과로 NaN가 반환된다

const result1 = 1 / 'one'
console.log(result1); // NaN

const result2 = parseInt('Hello'); 
console.log(result2); // NaN

const result3 = parseFloat('3.14');
console.log(result3); // 3.14

0 = false, null, 빈 문자열/배열
NaN = 객체, undefined, 요소 있는 배열

2. 비교(>, < ..) 연산자

 

Boolean 

조건식의 평가 결과

자바스크립트 엔진은 boolean 타입이 아닌 값을 truthy(참으로 평가되는 값), falsy(거짓으로 평가되는 값)로 구분한다

if('') // false
if(true) // true
if(0) // false
if(null) // false
if('str') // true

falsy : 0, null, false, undefined, NaN, 빈 문자열

---

명시적 형변환 (= 타입 캐스팅)

모든 타입에서 new 연산자를 호출하지 않는 생성자 함수로 가능하다

String

1. String() 

2. toString()

3. + (문자열 연결 연산자)

 

Number

1. Number()

2. parseInt(str), parseFloat(str)

    문자열만 숫자 타입으로 변환 가능하다

3. + (단항 연산자)

const strNum = '123';
const num = +strNum;
console.log(num); // 123

const str = 'Hello';
const notANumber = +str; 
console.log(notANumber); // NaN

4. * (산술 연산자)

'0' * 1 // 0
'-1' * 1 // -1
'10.23' * 1 // 10.23
false * 1 // 0

 

Boolean

1. Boolean()

2. !! 

    부정 논리 연산자(!)를 한번 호출하면 현재 값의 반대를 나타내고, 

    두번 사용하면 원래 값의 boolean으로 변환된다