[스터디 1주차]9장 타입변화 와 단축 평가

타입 변환과 단축 평가

• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅 * 이라고 합니다
• 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 자동으로 변환 되는 것을 암묵적 타입 변환 또는 타입 강제 변환 이라 합니다.

암묵적 타입 변환

• 암묵적 타입변환이 발생하면 문자열, 숫자, 불리언 같은 원시타입 중 하나로 타입을 자동 변환한다.

  문자열타입으로 변환

• +연산자는 문자열을 만나면 문자열 연결 연산자로 동작하여 암묵적으로 문자열로 타입을 변환함

// 숫자 타입
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: Cannot convert a Symbol value to a string

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

숫자 타입으로 변환

• 산술연산자의 경우 피연산자를 숫자타입으로 변환

  '12' + 3 // 결과 : '123' 문자열 연결 연산자로 동작 3을 문자열로 변환
  '12' - 3 // 결과 : 9 산술 연산자로 동작 12를 숫자타입으로 변환

• 비교연산자 는 숫자 타입이 아닌 것을 숫자타입으로 변환
• 자바스크립트 엔진은 +단항 연산자를 통해 타입 변환 실행

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

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

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

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

// 심벌 타입
+Symbol() // -> ypeError: Cannot convert a Symbol value to a number

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

불리언 타입 변환

• js에서 false로 반환 되는 것들
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ''(빈 문자열)
• 나머지는 전부 true로 취급 (빈 문자열 아닌 문자열, 빈 배열[], 빈 객체{})

명시적 타입 변환

문자열 타입 변환

1. String 생성자 함수 new 키워드 없이 사용
2. toString 메서드 사용
3. 문자열 연결 연산자 사용

숫자 타입으로 변환

1. Number 생성자 함수를 new 키워드 없이 호출
2. parseInt, parseFloat함수 사용
3. + 단항 산술 연산자를 사용
4. * 산술연산자를 사용

불리언 타입으로 변환

1. Boolean 생성자 함수 new 키워드 없이 호출
2. !부정 논리 연산자를 두 번 사용

   // 2. ! 부정 논리 연산자를 두번 사용하는 방법
   // 문자열 타입 => 불리언 타입
   !!'x';       // -> true
   !!'';        // -> false
   !!'false';   // -> true
   // 숫자 타입 => 불리언 타입
   !!0;         // -> false
   !!1;         // -> true
   !!NaN;       // -> false
   !!Infinity;  // -> true
   // null 타입 => 불리언 타입
   !!null;      // -> false
   // undefined 타입 => 불리언 타입
   !!undefined; // -> false
   // 객체 타입 => 불리언 타입
   !!{};        // -> true
   !![];        // -> true

단축 평가

단축평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

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

• 논리 연산의 결과를 결정한 피연산자를 타입변환하지 않고 그대로 반환한다.
• 단축 평가를 사용한 if문 대체

  var trueChk = true;
  var falseChk = false;
  

const msg = trueChk && '완료'; // true일때 만 완료를 할당
const msg2 = falseChk || '미완료' // false 일때만 미완료 할당

- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용
```js
var elem = null;
var value = elem && elem.value; // null,
// null 체크안하면 원래는 에러

옵셔널 체이닝 연산자

• 옵셔널 체이닝 연산자 : ?.
• 좌항의 피연산자가 null 또는 undefined일 경우 undefined 반환, 그렇지 않으면 우항의 프로퍼티를 참조
• 피연산자가 false로 평가되는 경우라도 null 또는 undefined 가 아니라면 우항의 프로퍼티 참조를 이어간다

null 병합 연산자

• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환
• 변수의 기본값을 설정할 때 유용