[Deep Drive] 9장 타입 변환과 단축 평가

Js는 명시적(타입 캐스팅) 타입변환과 암묵적(타입 강제변환) 타입변환이 있음

◎ 암묵적 타입 변환

'10'+2 // '102'
5 * '10' // 50

자바스크립트 엔진이 문맥을 고려해 암묵적으로 타입변환을 진행함.

+ 는 좌항 또는 우항에 String이 있을경우, 반대 항을 String으로 변환하여 문자열을 연결하는 역활을함

* 는 좌항 또는 우항에 숫자로 변형이 가능한 String 이 있을 경우, Number로 변환하여 * 연산을 진행

● 숫자 타입으로 변환

1-'1'//0
1*'10'//10

산술 연산자 표현식에서는 숫자타입이 아닌 피연산자를 숫자타입으로 암묵적으로 타입 변환함

● + 단항연산자

1. String -> Number

let x = '0';

x = +x; // x = x.parseInt(x);

+를 단항 연산자로 사용하여 paseInt()함수 호출을 대체 할 수 있음

2. Number -> String

let x = 0;

x = x+''; // x = x.toString();

+를 위에서 언급한 문자열과 합치는 과정을 통해 String으로 형 변환하여 toString()함수 호출을 대체 할 수 있음

 

◎ 단축 평가

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

let pet = 'cat' && 'dog' 
console.log (pet); //dog 

let pet = 'cat' || 'dog' 
console.log (pet); //cat

단축평가 표현식	평가결과
true && anything	anything
false && anything	false
true || anything	true
false || anything	anything

&&은 둘다 true, and 조건

|| 은 최소 1가지 이상 ture, or조건

-> 단축평가를 활용

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

let elem = null;
let value = elem.value; // value가 존재하지 않아서 에러가 발생하면서 프로그램 강제 종료

let value = elem && elem.value // elem이 null임으로, false 여서 null을 반환함.

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

function getStringLength(str){

 str = str || '';
 return str.length;

}

getStringLength(); //0 , str = str || '' 를 작성하지 않았을 시. 매개변수에 undefined가 할당되어 에러 발생
getStringLength('hi'); // 2

//es6 부터 매개변수 기본값 설정을 할 수 있음, 매개변수에 인자가 없어도 undefined가 아닌 기본값이 할당됨
function getStringLength(str=''){

 return str.length;

}

● 삼항 조건 연산자

let age = 20;

if(age < 20) str = '미성년자';
else str = '성인';

str = age<20 ? '성인':'미성년자';

console.log(str);

삼항 조건 연산자를 사용하여, if else문을 대체 할 수 있음.

2가지 조건인 경우 if  else 문 보다 삼항연산자를 사용하는것이 코드를 간편화 시킬 수 있음.

또한 삼항연산자는 '표현식'임으로 변수에 값 지정을 한번에 할 수있음.

● 옵셔널 체이닝 연산자

ES11 부터 도입된 연산자 '?.' 로 표현되며, 좌항의 피연산자가 null 또는 undefined인 경우, undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감.

let elem = null;

let value = elem?.value;
console.log(value) // undefined

사용 이유 -> 논리연산자인 && 와 || 은 null,undefined,0,''을  false값으로 인식하여 논리대로 연산을 진행한다.

하지만 0 과 ''은 객체로 평가될 때도 있어서, 옵셔널 체이닝 연산자를 사용하게된다.

● null 병합 연산자

ES11 부터 도입된 연산자 '??' 은 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

변수의 기본값을 설정할 때 유용함.

let foo = null ?? 'defaultString';
console.log(foo); // 'defaultString'

옵셔널 체이닝과 마찬가지로 논리연산자가 0 또는 ''를 기본값으로 인정하는 경우가 있어서 사용함