논리 연산자(&&, ||), 삼항연산자를 사용한 단축 평가

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators

Expressions and operators - JavaScript | MDN

Short-circuit evaluation

사용 방법

var result = true && '참';
console.log(result); // 참

var result = false || '거짓';
console.log(result); // 거짓

예제

var state = true;
var result = state && '참';
console.log(result); // 참

var state = false;
var result = state || '거짓';
console.log(result); // 거짓

변수명은 이해를 돕기 위한 이름이다. 상태 변수가 참 혹은 거짓이 되며 결과값이 달라지는 것을 의미한다. 논리곱(&&)과 논리합(||)은 좌항에서 우항으로 평가가 진행된다. 진행 방향을 고려해 조건문을 대체할 수 있다.

• 논리곱(&&) 연산은 두 개 항이 참이어야 참이다. 왼쪽과 오른쪽 항을 평가해야 참인지 거짓인지 알 수 있다. 참일 경우 진행 방향에 따라 오른쪽 항의 값을 반환한다.
• 논리곱(||) 연산은 두 개 항 중에서 하나만 참이어도 참이다. 진행 방향에 따라 첫번째 항이 참이라면 첫번째 항을 반환하며 두번째 항만이 참이라면 두번째 항을 반환한다. 첫 번째 항을 거짓으로 두고 반환값을 두번째 항에 두면 거짓 조건을 평가할 수 있다.

예제를 if 문으로 변경해보자.

if문 예제

// 조건이 참일 때 result = '참'
var state = true;
if (state) var result = '참';
console.log(result); // 참

// 조건이 거짓일 때 result = '거짓'
var state = false;
if (!state) var result = '거짓';
console.log(result); // 거짓

if-else 문은 삼항 연산자로 작성 할 수 있다.

삼항 연산자

var state = true
var result = state ? '참' : '거짓';
console.log(result); // 참

var state = false;
var result = state ? '참' : '거짓';
console.log(result); // 거짓

if-else문

var state = true
if (state) var result = '참';
else var result='거짓';
console.log(result); // 참

var state = false
if (state) var result = '참';
else var result='거짓';
console.log(result); // 거짓

객체 타입 오류 방지

// null 객체
var objExam = null;
var value = objExam.value;
VM2116:1 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at <anonymous>:1:14
(anonymous) @ VM2116:1


// 논리곱 연산 
var objExam = null;
var value = null && objExam.value;
console.log(value); // null


// 값이 있는 객체
var objExam = { value: 'okay'};
var value = objExam.value;
console.log(value); // 'okay'

var value = objExam && objExam.value;
console.log(value); // 'okay'


// 선언만 한 객체
var objExam2 = {};
var value = objExam2 && objExam2.value
console.log(value); // 'okay'


// 없는 객체
var value = objNotFound && objNotFound.value
VM2435:1 Uncaught ReferenceError: objNotFound is not defined
    at <anonymous>:1:1
(anonymous) @ VM2435:1

함수 매개변수 기본값

// 인수가 전달되지 않으면 undefined 할당
function noArgs(str) {
  return str;
}
console.log("당신 이름은 " + noArgs() + "입니다."); // VM2673:1 당신 이름은 undefined입니다.


// 논리합(||) 연산자로 기본값 할당
function noArgs(str) {
  str = str || '홍길동';
  return str;
}

console.log("당신 이름은 " + noArgs() + "입니다."); // 당신 이름은 홍길동입니다.
console.log("당신 이름은 " + noArgs('홍길순') + "입니다."); // 당신 이름은 홍길순입니다.​

ES11(ECMAScript2020)에서 옵셔널 체이닝 연산자(?.)와 null 병합 연산자(??)가 등장했다. 논리 연산자(&&, ||)를 사용한 객체 null 값과 함수 매개변수 기본값 확인이 새로운 연산자로 가능해졌다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN