[모딥다] 09장 타입 변환과 단축 평가

🌿 9.1 타입 변환이란?

 

1️⃣ 명시적 타입 변환 (=== 타입 캐스팅) 

: 개발자가 의도적으로 값의 타입을 변환하는 것. 

 

2️⃣ 암묵적 타입 변환 (=== 타입 강제 변환)

: 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것. 

 

✅ 타입 변환이 원시값을 직접 변경하는 것은 아님. 

=> 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것. 

-> 새로운 타입의 값을 만들어 단 한번 가용하고 버림. 

 

암묵적 타입 변환은 코드 상에서 명백히 나타나지 않기 때문에, 

개발자 자신이 작성한 코드에서 암묵적 타입 변환이 발생하는지, 

발생한다면 어떤 값으로 변환되는지, 

그리고 타입 변환된 값으로 표현식이 어떻게 평가될 것인지 예측 가능해야 한다.

 

=> 타입 변환이 어떻게 동작하는지 정확이 이해하고 사용해야한다. 

 

 

 

 

🌿 9.2 암묵적 타입 변환

 

- 개발자와 상관 없는 자바스크립트 엔진의 강제적 변환

- 문자열, 숫자, 불리언 과 같은 원시타입 중 하나로 자동 변환됨. 

 

 

9.2.1 문자열 타입으로 변환

 

1 + '2' = '12'

+ : 피연산자 중 하나가 문자이므로 문자열 연결 연산자로 동작. 

 

`1 + 1  = ${1 + 1}` // "1 + 1 = 2"

 

리터럴 표현식 삽입도 평가 결과를 문자열 타입으로 암묵적 타입 변환. 

 

+ '' 를 하면 다 문자열로 변화됨. 

ex)

NaN + "" => "NaN"

null + "" => "null" 

({}) + "" => "[object object]"

[10, 20] + "" => "10, 20"  🔖

 

 

9.2.2 숫자 타입으로 변환

 

산술 연산자의 역할 : 숫자 값을 만드는 것. 

=> 산술 연산자의 피연산자는 코드 문맥상 모두 숫자타입이여야. 

숫자타입으로 변환하지 못할 경우 표현식의 평가 결과는 NaN 이 된다. 

 

> 비교 연산자도 비교를 해야하기 때문에, 피연산자가 숫자여야함. 

=> 피연산자 중 숫자 타입이 아닌 건 숫자타입으로 암묵적 변환함. 

 

+ 를 붙이면 간단하게 숫자탕비으로 암묵적 변환을 시킬 수 있다. 

 

빈 문자열(' '), 빈 배열([ ]) , null, false  => 0

true => 1

객체, 빈배열이 아닌 배열, undifined는 변환 x -> NaN 가 됨. 

 

 

 

9.2.3 불리언 타입으로 변환

 

if 문, for 문 등의 조건식은 불리언값으로 평가되어야함. 

 

Truthy 값 (참값으로 평가되는 값)

- falsy 값 외의 무든 값

 

Falsy 값 (거짓으로 평가되는 값)

- false

- undifined

- null

- 0, -0

- NaN

- 빈 문자열 ''

 

✅ 헷갈릴 수 있는 Truthy

- {}

- []

- '0'

 

 

 

 

 

🌿 9.3 명시적 타입 변환

 

개발자가 의도적으로 타입을 변환하는 방법

1️⃣ 표준 빌트인 생성자 함수를 new 없이 호출하는 방법

2️⃣ 빌트인 메서드를 사용하는 방법

3️⃣ 암묵적 타입 변환을 이용하는 방법

 

 

9.3.1 문자열 타입으로 변환

 

1️⃣ String 함수를 new 연산자 없이 호출

String(1); // "1"

2️⃣ .toString() 이용

(Infinity).toString(); // "Infinity"

3️⃣ 문자열 연결 연산자를 이용

1 + '';  // "1"
true + ''; // "true"
NaN + ''; // 'NaN'

 

 

9.3.2 숫자 타입으로 변환

 

1️⃣ Number 생성자 함수를 new 연산자 없이 호출

2️⃣ parseInt, parseFloat 함수 이용 (문자열만 변환 가능)

parseInt('0') // 0

3️⃣ + 단항 산술 연산자 이용

+'1';  // 1
+true; // 1

4️⃣ * 산술 연산자를 이용

'1' * 1;  // 1
true * 1; // 1

 

 

 

9.3.3 불리언 타입으로 변환

 

1️⃣ Boolean 생성자 함수를 new 연산자 없이 호출

2️⃣ ! 부정논리 연산자를 두번 사용

 

 

 

 

🌿 9.4 단축 평가

 

9.4.1 논리 연산자를 사용한 단축 평가

 

논리합 ( || ) 또는 논리곱 ( && ) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.  

 

논리곱  &&

: 두 값 모두 true 로 평가 될 때 true 를 반환. 

좌항 -> 우항 으로 평가 진행

좌항이 true -> 우항 진행 : 두번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정. 

 

논리합 || 

: 하나만 true로 평가되어도 true 반환. 

좌항이 true 면 뒤에껀 계산 안함. 

 

단축 평가

: 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 진행. 

& 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평과 과정을 생략함. 

 

-> if 문 대체 가능. 

 

 

< 단축평가가 유용하게 쓰이는 상황들 >

 

🎵 객체를 가리키지를 기대하는 변수가 null 또는 undefined 가 아닌지 확인하고 프로퍼티를 참고할 때.

-> 기대하는 변수의 값이 null 또는 undefined 인 경우 

const elem;

const value = elem && elem.value;

 

🎵 함수 매개변수에 기본값을 설정할 때

- 인수 전달 안하면 undefined 가 되는데 이를 방지함. 

...
str = str || ''

 

 

 

9.4.2 옵셔널 체이닝 연산자 ?.

 

좌항의 피연산자가 null 또는 undefined 인 경우, undefined 를 반환하고 그렇지 않으면 우항의 프로퍼치 팜조를 이어감. 

elem?.value //elem가 있으면 value 를 가져옴

 

옵셔널 체이닝이 생기기 전에는, && 를 사용함. 

- 하지만 0, '' 인 경우는 객체로 평가될 때가 있어서 부정확함. 

const str = '';

const length = str && str.length;

console.log(length) // ''

=> 문자열의 길이를 참조하지 못했음. 

 

옵셔널 체이닝 : Falsy 값 과 null, undefined 까지 포함한 값이면 -> 우항의 프로퍼티 참조로 감.

 

 

9.4.3 null 병합 연산자

?? 

좌항의 피연산자가 null 또는 undefined 인 경우 우항 반환, 

그렇지 않으면 좌항 반환

 

??는 변수에 기본값을 설정할 때 유용함. 

얘도 전에는 || 가 대신 사용됐는데, 

'', 0 을 가질 경우 에도 기본값으로 유효했기 때문에 예기치 않은 동작이 발생함. 

하지만 ?? 는 Falsy 값, 이라도 null, undefinde 가 아니면 좌항의 피연산자를 그래도 반환.