자바스크립트에서는 앞서 살펴본 연산자외 추가로 코딩을 하는데 있어서 유용한 연산자들을 제공한다.

이번 포스팅에서는 알고 있으면 유용한 연산자들에 대해서 추가로 알아보도록 하겠다.

논리연산자의 단축평가 (short-circuit evaluation)

&& (그리고), || (또는) 논리연산자를 if문 조건식에 논리연산자를 사용하면 각각의 조건들이 boolean값으로 평가된다.

const obj1 = { name: 'dog' };
const obj2 = { name: 'cat', owner: 'mirrer' };

if (obj1 && obj2) {
  console.log('둘다 true!'); // 둘다 true!
}

조건식외에 다른 곳에서 논리연산자를 사용하게 되면 단축평가가 발생한다.

const obj1 = { name: 'dog' };
const obj2 = { name: 'cat', owner: 'mirrer' };

// && -> 앞의 값이 true이면 뒤에 값을 실행
let result = obj1 && obj2;
console.log(result); // { name: 'cat', owner: 'mirrer' }

// || -> 앞의 값이 true이면 앞의 값을 실행
result = obj1 || obj2;
console.log(result); // { name: 'dog' }

단축평가의 활용

• 논리연산자 &&를 단축평가로 활용하면 조건이 truthy일때 특정일을 처리할 수 있다.

const obj1 = { name: 'dog' };
const obj2 = { name: 'cat', owner: 'mirrer' };

function changeOwner(animal) {
  if (!animal.owner) {
    throw new Error('주인이 없어!!');
  }
  animal.owner = '바뀐주인!';
}

function makeNewOwner(animal) {
  if (animal.owner) {
    throw new Error('주인이 있어!!');
  }
  animal.owner = '새로운주인!';
}

obj1.owner && changeOwner(obj1);
obj2.owner && changeOwner(obj2);
console.log(obj1); // { name: 'dog' }
console.log(obj2); // { name: 'cat', owner: '바뀐주인!' }

• 논리연산자 ||를 단축평가로 활용하면 조건이 falshy일때 특정일을 처리할 수 있다.

const obj1 = { name: 'dog' };
const obj2 = { name: 'cat', owner: 'mirrer' };

function changeOwner(animal) {
  if (!animal.owner) {
    throw new Error('주인이 없어!!');
  }
  animal.owner = '바뀐주인!';
}

function makeNewOwner(animal) {
  if (animal.owner) {
    throw new Error('주인이 있어!!');
  }
  animal.owner = '새로운주인!';
}

obj1.owner || makeNewOwner(obj1);
obj2.owner || makeNewOwner(obj2);
console.log(obj1); // { name: 'dog', owner: '새로운주인!' }
console.log(obj2); // { name: 'cat', owner: 'mirrer' }

• 논리연산자 &&를 단축평가로 활용하면 특정 값이 null 또는 undefined인 경우를 확인할 수 있다.

let item = { price: 1 };
const price = item && item.price;
console.log(price); // 1

let item; // = { price: 1 };
const price = item && item.price;
console.log(price); // undefined

• 논리연산자 ||를 단축평가로 활용하면 기본값을 설정할 수 있다.

function print(message) {
  const text = message || 'hello';
  console.log(text);
}
print(); // hello

// default parameter -> null과 undefined인 경우만
// || -> falshy한 모든 경우 설정(할당)
function print(message = 'hello') {
  // const text = message || 'hello';
  console.log(message);
}
print(); // hello
print(''); //

옵셔널 체이닝 연산자 (Optional Chaining Operator)

ES11 (ECMAScript 2020)에 추가된 옵셔널 체이닝 연산자는 ?. 기호를 사용하며 앞서 살펴본 논리연산자의 단축평가를 좀 더 간결하게 표현한다.

let obj = { name: 'dog', owner: { name: 'mirrer' } };
function printName(obj) {
  // const ownerName = obj && obj.owner && obj.owner.name;
  const ownerName = obj?.owner?.name;
  console.log(ownerName);
}

printName(obj); // mirrer
printName(); // undefined

Nullish Coalescing Operator

ES11 (ECMAScript 2020)에 추가된 Nullish Coalescing Operator는 ??기호를 사용하여 null, undefined인 경우에만 실행하는 코드를 설정한다.

let num = 0;

// 0은 false로 인식해서 -1이 출력
console.log(num || '-1'); // -1
// null, undefined인 경우에만 -1이 출력
console.log(num ?? '-1'); // 0

참고 자료

Logical AND (&&) - JavaScript | MDN
Logical OR (||) - JavaScript | MDN
Optional chaining - JavaScript | MDN
Nullish coalescing operator - JavaScript | MDN
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼