JS 타입변환과 단축 평가

타입변환

자바스크립트는 모든 값의 타입이 있습니다.
'명시적 타입 변환' 개발자가 의도적으로 값의 타입을 변환하는것이라고 합니다.
'암묵적 타입 변환' 개발자의 의도와 상관없이 표현식을 평가하는 도중에 암묵적으로 타입이 자동으로 변화되는 것이라고 합니다.

• 명시적 타입 변환

// 1.문자열 타입으로 변환
// 숫자 => 문자
String(1); // output: '1'
String(NaN); // output: 'NaN'

// 불리언 => 문자
String(true); // output: 'true'
String(false); // output: 'false'

// Object.prototype.toString 사용하는 방법
(Infinity).toString // output: 'Infinity'

// 문자열 연결 연산자 이용하는 방법 '+'
1 + ''; // output: '1'
NaN + ''; // output: 'NaN'
true + ''; // output: 'true'

// 2.숫자 타입으로 변환
// 문자 => 숫자
// Number 생성자 함수
Number('0'); // output: 0
Number('-1'); // output: -1
Number('10.23'); // output: 10.23
// 불리언 => 숫자
Number(true); // output: 1
Number(false); // output: 0


// parseInt, parseFloat 함수 (문자열만 변환 가능)
// 문자 => 숫자 
parseInt('-3'); // output: -3
parseFloat('11.45'); // output: 11.45


// 3.불리언 타입으로 변환
// Boolean 생성자 함수
// 문자 => 불리언
Boolean('x'); // output: true
Boolean(''); // output: false
// 숫자 => 불리언
Boolean(1); // output: true
Boolean(NaN); // output: false
Boolean(Infinity); // output: true
// null => 불리언
Boolean(null); // output: false
// undefined => 불리언
Boolean(undefined); // output: false
// 객체 => 불리언
Boolean({}); // output: true
Boolean([]); // output: true


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

• 암묵적 타입 변환

// 문자열로 변환
1 + ''; // output: '1'
`1 + 1 = {1 + 1}` // output: '1 + 1 = 2'
// 객체타입
({}) + ''; // output: '[object object]'
Math + ''; // output: '[object Math]'
[] + ''; // output: ''
[] + ''; // output: '10, 20'
(function(){}) + '' // output:'function(){}'
Array + '' // output: 'function Array(){ [native code] }'


// 숫자 변환
1 - '1' // output: 0
1 * '100' // output: 100
1 / 'one' // output: NaN 숫자로 변환할 수 없는 경우
// 단항연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적으로 변환
+true // output: 1
+null // output: 0
+{} // output: NaN
+[] //output: 0

단축평가

• 논리 연산자를 사용한 단축 평가
  && 첫번째 값을 확인 후 두번째까지 확인을 해야 알 수 있다.

true||anything // true
false||anything // anything
true&&anything // anything
false&&anything // false

• 조건이 Falsy값일때 무언가를 해야한다면 if문으로 대체가능합니다.

let done = false;
let message = '';
// 조건이 false일 경우
if(!done){ 
    message = '미완료';
} else {
  message = '완료';
}

• 함수 매개변수(파라미터)에 기본값을 설정할 때
  - 함수를 호출할때 인수를 전달하지 않으면 undefined가 할당됩니다.
  이때 단축평가 default(기본값)을 설정하면 에러를 방지 할 수 있습니다.
  

function add(a = 100, b = 200) { //defalut 기본 값 설정 
    return a + b;
}
//(a의 값, b의값)
add(10, 20); // output: 30(a=10 + b=20)
add(10); // output: 210(a=10 + b=200(defalut))
add(); // output: 300(a=100(defalut) + b=200(defalut))
add(b=300); // output: 500(b=300, b=200(defalut))
add(undefined, 300);  // output:400(a=100(defalut고정) + b=300)

• 옵셔널 체이닝 연산자, null병합 연산자
  ES11(ECMAScript2020) 도입
  논리연산자 단축평가이용해서 null, undefined 일 때 실행됩니다.
  

null | undefined ?? 'default string';