writed by wnsdlf25

타입 변환과 단축 평가

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

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

var x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다
var str = x.toString();
console.log(typeof str, str); //string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

o 암묵적 타입 변환 ( 타입 강제 변환 )

• 개발자의 의도와는 상관없이 표현 식을 평가하는 도중에 자바스크립트 엔진에 의해 변환되는 것
• 기존 변수 값을 재 할당하여 변경하는 것이 아닌 자바스크립트 엔진에 의해 피 연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용한다.

var x = 10;

var str = x + '';

console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

o 암묵적 타입 변환 종류

o 문자열 타입으로 변환

• 숫자와 ‘ ’ 로 감싸진 문자열을 + 했을 때 문자열로 변환되어 병합되는 것 이 확인 가능하다.

1 + '2' // -> "12" 

o 숫자 타입으로 변환

• 숫자와 문자열 타입을 산술 하여 숫자 타입으로 변경한다.
• 피 연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현 식의 평가 결과는 NaN이 된다.

1 - '1' // -> 0
1 * '10' // -> 10
1 / 'one' // -> NaN

• 비교 연산자를 통해 불리언 값으로 변경 가능하다.
• 비교 연산자는 코드의 문맥 상 모두 숫자 타입이어야 비교가 가능하다.
• 숫자 타입이 아닌 피 연산자를 숫자 타입으로 암묵적 타입 변환 시킨다.
• 숫자 타입으로 변환 시키지 못하는 값의 경우 비교를 했을 때 false로 출력된다.

'1' > 0 // -> true
'abc' > 0 // -> false

• • 단항 연산자는 피 연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환 시킨다.
• 빈 문자열(‘ ’), 빈 배열([]), null, false 는 0으로, true는 1로 변환되며, 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다는 것에 주의해야 함

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

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

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 심벌 타입
+Symbol() // TypeError : Cannnot convert a Symbol value to a number

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

o 불리언 타입으로 변환

• if 문이나 for문과 같은 제어 문 또는 삼항 조건 연산자의 조건 식은 불리언 값으로 평가 되어야 하는 표현 식이다. 자바스크립트 엔진은 조건 식의 평가 결과를 불리언 타입으로 암묵적 타입 변환
• if 를 사용하여 해당 값이 true면 출력이 되게 만들어 보았다.

if ("") console.log("a");
if (true) console.log("b");
if (0) console.log("c");
if ("str") console.log("d");
if (null) console.log("e");
// b d

• false 로 평가되는 값들
• false
• undefined
• null
• 0, -0
• NaN
• ' '(빈 문자열)

o 명시적 타입 변환 종류

o 문자열 타입으로 변환

// String 생성자 함수를 new 연산자 없이 호출하는 방법

// 숫자 타입 => 문자열 타입
String(1); // '1'
String(NaN); // 'NaN'
String(Infinity); // 'Infinity'

// 불리언 타입 => 문자열 타입
String(true); // 'true'
String(false); // 'false'

// Object.prototype.toString 메서드를 사용하는 방법

// 숫자 타입 => 문자열 타입
(1).toString() // '1'
(NaN).toString() // 'NaN'
(Infinity).toString() // 'Infinity'

// 불리언 타입 => 문자열 타입
(true).toString() // 'true'
(false).toString() // 'false'

// + 문자열 연결 연산자를 이용하는 방법

// 숫자 타입 => 문자열 타입
1 + '' // '1'
NaN + '' // 'NaN'
Infinity + '' // 'Infinity'

// 불리언 타입 => 문자열 타입
true + '' // 'true'
false + '' // 'false'

// * 산술 연산자를 이용하는 방법

// 문자열 타입 => 숫자 타입
'0' * 1; // 0
'-1' * 1; // -1
'10.53' * 1; // 10.53

// 불리언 타입 => 숫자 타입
true * 1; // 1
false * 1 // 0

o 불리언 타입으로 변환

• 불리언 타입이 아닌 값을 불리언 타입으로 변환

// Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

// 문자열 타입 => 불리언 타입
Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true

// 숫자 타입 => 불리언 타입
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true

// null 타입 => 불리언 타입
Boolean(null); // true

// undefined 타입 => 불리언 타입
Boolean(undefiend); // false

// 객체 타입 => 불리언 타입
Boolean({}) //true
Boolean([]) // true

// ! 부정 논리 연산자를 두 번 사용하는 방법

// 문자열 타입 => 불리언 타입
!!'x'; // true
!!''; // false
!!'false'; // true

// 숫자 타입 => 불리언 타입
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true

// null 타입 => 불리언 타입
!!null; // false

// undefined 타입 => 불리언 타입
!!undefined; // false

// 객체 타입 => 불리언 타입
!!{}; // true
!![]; // true

o 단축 평가

• 논리 연산자 && (논리 AND)와 || (논리 OR)를 사용할 때 발생하는 평가 방식
• 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
• 좌항에서 우항으로 평가 진행
• if 문을 대체 가능하다.

// || 연산자 
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

// && 연산자 
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

var done = true;
var message = "";

// 주어진 조건이 true일 때
if (done) message = "완료";

// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && "완료";
console.log(message); // -> 완료

o 옵셔널 체이닝 연산자

• ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // -> undefined

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 우항의 피연산자 반환

var str = '';
var length = str?.length;
console.log(length); // -> 0

o null 병합 연산자

• ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.