다시 처음부터 JavaScript || 단축평가, 옵셔널체이닝, null병합

✅ 출처 : 다시 처음부터 자바스크립트 게시글은 이웅모(님) '모던 자바스크립트 Deep Dive' 를 기록합니다

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

논리합 ( || ) , 논리곱 (&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
논리합 ( || ) , 논리곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

논리곱 (&&)

'cat' && 'dog' // -> 'dog'

논리곱 (&&) 연사자는 두 개의 피연산자가 모~두 true로 평가될 때 true를 반환합니다.
논리곱 연산자는 좌항에서 우항으로 평가가 진행됩니다.
첫 번째 피연산자 'cat'은 truthy 값이므로 true로 평가됩니다. 하지만 이 시점까지는 위 표현식을 평가할 수 없습니다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있습니다.

두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정합니다.
논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'dog'를 그대로 반환합니다.

논리합 ( || )

'cat' || 'dog' // -> 'cat'

논리합 연산자는 두 개의 피연산자 중 하나만! true로 평가되어도 true를 반환합니다.
첫 번째 피연산자 'cat'이 true로 평가되어 이 시점에 두 번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있습니다.
논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 cat을 그대로 반환합니다.

true || anything ----> true
false || anything ----> anything
true && anything ----> anything
false && anything ----> false

예제

var done = true;
var message = '' ;

if (done) message = "완료";

//if문은 단축 평가로 대체 가능
message = done && '완료';
console.log(message) // ----> 완료

• 옵셔널 체이닝 연산자 ⭐️

옵셔널 체이닝 연산자는 ?.는 좌항의 피연산자가 null, undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

var elem=null;

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

옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인!하고 프로퍼티를 참조할 때 유용합니다.
이전에는 &&를 사용하여 null인지 undefined를 확인

var elem = null;

var value = elem && elem.value
console.log(value) // ---->null

논리 연산자 &&는 좌항 피연산자가 false로 평가되는 값

• false
• undefined
• null
• 0
• -0
• NaN
• ' '

이면 좌항 피연산자를 그대로 반환한다.

하지만 옵셔널체이닝 연산자는 좌항 피연산자가 false로 평가되는 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어갑니다.

var str= '' ;  // 빈문자열이라 false값 이지만!!!???

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

• null 병합 연산자

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

null 병합 연산자는 변수에 기본값을 설정할 때 유용합니다.

var foo = '' || 'default string' ;
console.log(foo) // 'default string' 
//여기서 문제는 false값인 0이나 ''도 기본값으로 유효하다면 예기치 않은 동작이 발생할 수 있습니다.

var foo = '' ?? 'default string';
// 좌항의 피연산자가 falsy값이라도 null또는 undefined가 아니면 좌항의 피연산자를 반환합니다.



var foo = null ?? 'default string' ;
//좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환합니다.

console.log(foo) // 'default string'