09. 모던 자바스크립트 Deep Dive (타입 변환과 단축 평가)

FE/Javascript

09. 모던 자바스크립트 Deep Dive (타입 변환과 단축 평가)

-Daniel- 2024. 12. 3. 11:49

⛅️ 타입 변환의 종류

명시적 타입 변환(타입 캐스팅): 개발자가 의도적으로 타입의 값을 변경하는 것

var age = 25; var age2 = String(25); // '25'
var age3 = (25).toString(); // '25'
console.log(typeof age, age); // number 25
console.log(typeof age2, age2, typeof age3, age3); // string 25 string 25

암묵적 타입 변환(타입 강제 변환): 자바스크립트 엔진에 의해서 타입의 값이 변경되는 것

// 🚨 암묵적 타입 변환이 기존 원시값을 직접 변경하는것은 아님! 기존 원시값을 사용해서 새로운 원시값을 생성 하는 것! 
// 10 + '25'를 평가하기 위해 문자열 '10'를 생성하여 이것으로 표현식 '10' + '25'를 평가함 
var age = 10 + '25'; 
console.log(typeof age, age); // string 1025

⛅️ 암묵적 타입 변환

문자열 타입 변환

// 숫자 타입 
0 + '' // -> '0' 
-0 + '' // -> '0' 
1 + '' // -> '1' 
-1 + '' // -> '-1'
NaN + '' // -> 'NaN
Infinity + '' // -> 'Infinity' 
-Infinity + '' // -> '-Infinity'

// 불리언 타입 
true + '' // -> 'true' 
false + '' // -> 'false' 

// null 타입 
null + '' // -> 'null' 

// undefined 타입 
undefined + '' // -> 'undefined' 

// 심벌 타입 
(Symbol()) + '' // -> TypeError 

// 객체 타입 
({}) + '' // -> '[object Object]' 
Math + '' // -> '[object Math]' 
[] + '' // -> '' 
[10,20] + '' // -> '10,20' 
(function(){}) + '' // -> 'function(){}' Array + + '' // -> 'function Array() { [native code] }

숫자 타입 변환

// 산술 연산자의 역할은 숫자 값을 만드는 것
// 연산 수행이 안되는경우 평가 결과가 NaN가 된다. 

// 문자열 타입 
+'' + // -> 0 
'0' + // -> 0 
'1' + // -> 1
'string' + // -> NaN 

// 불리언 타입 
true + // -> 1 
false + // -> 0 

// null 타입 
null + // -> 0 

// undefined 타입 
undefined + // -> NaN 

// 심벌 타입 
Symbol() + // -> TypeError 

// 객체 타입 
{} + // -> NaN 
[] + // -> 0 
+[10,20] // -> NaN 
function () {}; // -> NaN

불리언 타입 변환

🚨 if문이나 for문 같은 제어문, 삼항 조건 연산자의 조건식은 불리언값(참/거짓)으로 평가 되어야하는 표현식이다. 
이를 위해 자바스크립트 엔진은 조건식의 평과 결과를 불리언 타입으로 암묵적 타입변환 한다. 
이때, 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy, Falsy 값으로 구분한다. 

💡 false로 평가되는 Falsy 값들 (false, undefined, null, 0, -0, NaN, '') 💡

⛅️ 명시적 타입 변환

문자열 타입 변환
- 방법 1️⃣: String 생성자 함수를 new 연산자 없이 호출
- 방법 2️⃣: Object.prototype.toString 메서드 사용
- 방법 3️⃣: 문자열 연결 연산자 사용

String(1);
String(NaN);
String(true);
(1).toString();
NaN.toString();
false.toString();
1 + '';
NaN + '';
true + '';

숫자 타입 변환
- 방법 1️⃣: Number 생성자 함수를 new 연산자 없이 호출
- 방법 2️⃣: parseInt, parseFloat 함수 사용 => 문자열만 숫자 타입으로 변환 가능
- 방법 3️⃣: + 단항 산술 연산자 사용
- 방법 4️⃣: * 산술 연산자 사용

Number('1');
Number('10.53');
Number(true);
parseInt('0');
parseFloat('10.22');
+'-1'; +'10.33';
+true;
+false;
'0' * 1;
'-1' * 1;
true * 1;

불리언 타입 변환
- 방법 1️⃣: Boolean 생성자 함수를 new 연산자 없이 호출
- 방법 2️⃣: ! 부정 논리 연산자를 두번 사용 (!!)
```
Boolean('1');
Boolean('false');
Boolean('');
Boolean([]);
Boolean({});
Boolean(NaN);
!!'x';
!!'false';
!![];
!!{};
!!null;
```

⛅️ 단축 평가

논리 연산자를 사용한 단축 평가
- &&: 앞의 표현식이 true라면 뒤를 따름, 앞의 표현식이 false라면 false
- ||: 앞의 표현식이 false라면 뒤를 따름, 앞의 표현식이 true 라면 앞을 따름
- if문 대체 가능
- 객체를 가리키기 기대하는 변수의 값이 null 또는 undefined 일 경우 객체를 참조하면 타입에러가 나는데, 이를 && 연산자를 이용하여 해결 가능
- 값이 들어있지 않는 변수에 값을 할당해줄때 기본 값을 주게되는데 이때 || 연산자가 유용함
```
// && 연산자
var done = true;
var message = '';

if (done) message = '완료';

// 아래는 단축평가로 대체한 코드
message = done && '완료';
console.log(message); // 완료
```
```
// || 연산자
var done = false;
var message = '';

if (!done) message = '미완료';

// 아래는 단축평가로 대체한 코드
message = done || '미완료';
console.log(message); // 완료
```

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined일 경우 undefined를 반환하고 그렇지 않다면 우항의 프로퍼티 참조를 이어간다.
객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.
논리 연산자 && 대체 가능

var elem = null;

var value = elem?.value;
console.log(value); // undefined

// ?. 연산자와 && 연산자의 차이점
var str = '';

// 좌항 피연산자가 Falsy값 이면 좌항 피연산자를 그대로 반환
var length1 = str && str.length;
console.log(length1); // ''

// 좌항 피연산자가 Falsy 값이라도 null,undefined가 아니면 우항의 프로퍼티 참조를 이어나감
var length2 = str?.length;
console.log(length2); // 0

null 병합 연산자

?? 연산자는 좌항의 피연산자가 null,undefined인 경우 우항의 피연산자를 반환, 아니라면 좌항의 피연산자 반환
변수에 기본값을 설정할 때 유용
논리 연산자 || 대체 가능

var foo = null ?? 'default';
console.log(foo); // 'default'

// ?? 연산자와 || 연산자의 차이점
var foo1 = '' || 'default';
console.log(foo1); // 'default'

// 좌항이 Falsy 값 이라도 null 또는 undefined가 아니라면 좌항을 그대로 반환
var foo2 = '' ?? 'default';
console.log(foo2); // ''

📚 REFERENCE

모던 자바스크립트 Deep Dive 09장 타입 변환과 단축 평가