단축평가

모던자바스크립트 Deep Dive를 보면서 정리 중

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

논리합(%%) 또는 논리곱(&&)의 경우
연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
이때 연산자는 논리 연산의 결과를 결정하는 피연산자를 그대로 반환한다.

// 논리합(||) 연산자
'Cat' || 'Dog' // -> "Cat"
'false' || 'Dog' // -> "Dog"
'Cat' || 'false' // -> "Cat"

'Cat' && 'Dog' // -> "Dog"
'false' && 'Dog' // -> "false"
'Cat' && 'false' // -> "false"

이걸로 if문이 대체 가능하다.

1. 어떤 조건이 참으로 평가되는 값일 때 무언가를 해야 한다면 논리곱(&&)
   어떤 조건이 거짓으로 평가되는 값일 때 무언가를 해야 한다면 논리곱(||)

var done1 = true;
var message1 = '';

var done2 = false;
var message2 = '';

if(done1) message1 = '완료';
if(!done2) message2 = '미완료';

//--> 단축평가로 변환
message1 = done1 && '완료';
message2 = done2 || '미완료;

2. 이걸 응용하면, 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 활용이 가능하다.

const SSOToken = "Bearer " + jsonObject.currentUser.authdata;
const tokenData = SSOToken && parseSSOToken(SSOToken);

/*
SSOToken이 null이나 undefined와 같은 Falsy 값이면 tokenData는 SSOToken으로 평가되고, 
그렇지 않은(뭔가 값이 있으면..?) 경우에는 parseSSOToken(SSOToken)으로 평가된다.
*/

3. 함수 매개변수에 기본값 설정하는데도 유용하다.

function getStringLength(str) {
	str = str || '';
  	return str.length;
  
  // str이 falsy할 경우(undefined 혹은 null) ''를 할당,
  // 그렇지 않으면 str 그대로 사용..
}

getStringLength(); // -> 0
getStringLength('hi') // ->2

옵셔널 체이닝

?. 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

var elem = null;

// elem이 Falsy 값이면 elem으로 평가되고, elem Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value;
console.log(value); // null

// 이걸 옵셔널 체이닝으로 변환하면

var value = elem?.value;
console.log(value); // undefined ???? 이 부분 다시.. null이 왜 undefined?

** falsy한 값? ==> false, undefined, null, 0, -0, NaN, ''

null 병합 연산자

?? 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
?? 는 변수에 기본값을 설정할 때 유용하다.
|| 보다 좀 빡빡한 친구다.
|| 는 falsy한 값이라도 0이나 ''도 기본값으로 유효하다면 예기치 않은 동작이 발생할 수 있다.

// 좌항의 피연산자가 falsy한 값이라 여겨서 우항을 반환함.
// 만약 0이나 ''이 유효한 값이라면 문제가 생길 수 있다.

var foo = '' || 'default string';
console.log(foo); // 'default string'; 

// 좌항의 피연산자가 falsy한 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.

var foo = '' ?? 'default string';
console.log(foo); // '';