🌊 [javascript] 타입 변환과 단축 평가

🌊 [javascript] 타입 변환과 단축 평가

타입 변환과 단축 평가

🌊 타입 변환이란?

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

// 명시적 타입변환
let x = 10;
let str = x.toString();
console.log(typeof str, str); // string 10

// 암묵적 타입 변환
let y = 10;
let str2 = y + '';
console.log(typeof str2, str2); // string 10

🌊 암묵적 타입 변환

📌 문자열로 변환

1 + '2' // → "12"

• 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작하여 문자열 값을 만든다.

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

ES6에서 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 ㄹ타입으로 암묵적 타입 변환을 시킨다.

📌 숫자열로 변환

1. 산술 연산자
2. 1 - '1' // → 0 1 * '10' // → 10 1 / 'one' // → NaN
3. 비교 연산자
4. '1'>0 // → true
5. 단항 연산자 +
6. +'' // → 0 +'1' // → 1 +'string' // → NaN +true // → 1 +false // → 0 +null // → 0 +undefined // → NaN +Symbol() // → TypeError +{} // → NaN +[] // → 0 +[10, 20] // → NaN +(function(){}) // → NaN

📌 불리언 타입으로 변환

• if문과 for문

if('') console.log('1'); // → ❌
if(true) console.log('2'); // → ⭕️
if(0) console.log('3'); // → ❌ 
if('str') console.log('4'); // → ⭕️
if(null) console.log('5'); // → ❌
// 2 4

📌 자바스크립트의 Truthy 값(참)과 Flasy 값(거짓)

Falsy 값

• false
• undefined
• null
• 0, -0
• NaN
• ''(빈 문자열)

Truthy 값
: Falsy 값 외의 모든 값은 true로 평가되는 Truthy 값이다.

🌊 명시적 타입 변환

📌 문자열로 변환

• String 생성자 함수를 new 연산자 없이 호출
• Object.prototype.toString 메서드 사용
• 문자열 연결 연산자 이용

// 1. String 생성자 함수를 new 연산자 없이 호출

String(1); // → "1"
String(NaN); // → "NaN"
String(true); // → "true"


// 2. Object.prototype.toString 메서드 사용

(1).toString(); // → '1'
(NaN).toString(); // → 'NaN'
(true).toString(); // → 'true'


// 3. 문자열 연결 연산자 이용

1 + ''; // → '1'
NaN + ''; // → 'NaN'
true + ''; // → 'true'

📌 숫자열로 변환

• Number 생성자 함수를 new 연산자 없이 호출
• paresInt, parseFloat 함수 사용 (문자열 → 숫자타입만 가능)
• • 단항 산술 연산자 이용
• * 단항 산술 연산자 이용

// 1. Number 생성자 함수를 new 연산자 없이 호출

Number('0') // → 0
Number('-1') // → -1
Number('59.59') // → 59.59
Number(true) // → true


// 2. paresInt, parseFloat 함수 사용 (문자열 → 숫자타입만 가능)
// parseInt : 정수 또는 NaN 반환 함수
// parseFloat : 부동 소수점 숫자 반환 함수

parseInt('0') // → 0
parseInt('-1') // → -1
parseInt('59.59') // → 59.59


// 3. `+` 단항 산술 연산자 이용

+'0'; // → 0
+'-1'; // → -1
+'59.59'; // → 59.59
+true; // → 1
+false; // → 0


// 4. `*` 단항 산술 연산자 이용

'0' * 1; // → 0
'-1' * 1; // → -1
'59.59' * 1; // → 59.59
true * 1; // → 1
false * 1; // → 0

📌 불리언으로 변환

• Boolean 생성자 함수를 new 연산자 없이 호출
• ! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출

Boolean('x'); // → true
Boolean(''); // → false
Boolean('false'); // → true
Boolean(0); // → false
Boolean(1) // → true
Boolean(NaN) // → false
Boolean(Infinity) // → true
Boolean({}) // → true
Boolean([]) // → true


// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
!!'x';  // → true
!!'';  // → false
!!5;  // → true
!!NaN;  // → false
!!null;  // → false
!!undefined;  // → false
!!{};  // → true
!![];  // → ture

🌊 단축 평가

: 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환
( 논리연산자는 좌항에서 우항으로 평가가 진행된다.)

단축 평가 표현식평가 결과

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

// 논리합 || 

'ogu' || 'rabbit' // → 'ogu'
false || 'rabbit' // → 'rabbit'
'ogu' || false // → 'ogu'
'ogu' || 'rabbit' // → 'ogu'

// 논리곱 &&

'ogu' && 'rabbit' // → 'rabbit'
false && 'rabbit' // → false
'ogu' && false // → false

⚡️단축 평가를 활용하여 if 문 대체하기

Truthy 값일 때 && 사용

let done = true;
let message = ''; // 빈 문자열

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

//done이 true 라면 message에 '완료'할당
message = done && '완료';
console.log(message); // 완료

Falsy 값일 때 || 사용

let done = false;
let message = ''; // 빈 문자열

//주어진 조건이 false 일 때 
if (!done) message = '미완료'

//done이 false 라면 message에 '미완료'할당
message = done || '미완료';
console.log(message); // 미완료

If ... else

let done = true;
let message = ''; // 빈 문자열

//삼항 조건 연산자 
if (done) message = '완료'
else message = '미완료'
console.log(message); // 완료

// if... else 문은 삼항 조건  미완료';
console.log(message); // 완료

🌊 옵셔널 체이닝 연산자

: ES11에 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다.

 let str = '';
 let length = str?.length;
 console.log(length); // 0
// 변수 str이 빈 문자열이기 때문에 falsy하여도 null, undefined가 아니면 우항의 프로퍼티를 참조한다. 

🌊 null 병합 연산자

: ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
→ 변수에 기본 값을 설정할 때 유용