✅ 출처 : 다시 처음부터 자바스크립트 게시글은 이웅모(님) '모던 자바스크립트 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 인지 확인하고 프로퍼티를 참조할때 사용
옵셔널 체이닝 연산자는 ?.는 좌항의 피연산자가 null, undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.
var elem=null;
var value=elem.value ;
console.log(value) // 타입에러! ⬇️
var elem = null;
이전에는 &&를 사용하여 null인지 undefined를 확인
var value = elem && elem.value
console.log(value) // ---->null
var value = elem?.value
console.log(value) // --->undefined논리 연산자 &&는 좌항 피연산자가 false로 평가되는 값
- false
- undefined
- null
- 0
- -0
- NaN
- ' '
하지만 옵셔널체이닝 연산자는 좌항 피연산자가 false로 평가되는 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어갑니다.
var str= '' ; // 빈문자열이라 false값 이지만!!!???
var length = str && str.length
console.log(length) // --->''
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';
console.log(foo) // ''
// 좌항의 피연산자가 falsy값이라도 null또는 undefined가 아니면 좌항의 피연산자를 반환합니다.
var foo = null ?? 'default string' ;
//좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환합니다.
console.log(foo) // 'default string' 