[Javascript] 단축 평가(short-circuit evaluation) 논리 계산법

 

 

 

이번에는 논리 연산자를 좀 더 유용하게 사용할 수 있는 방법에 대해 포스팅해 보려 한다.

단축 평가 논리 계산법을 이해하기 위해서는 아래와 같은 논리 연산자의 특징에 대해 잘 숙지하고 있어야 한다.

true && true // true
true && false // false
true || false // true
false || true // true

 

 

논리 연산자를 사용할 때 무조건 true/false 값을 사용해야 하는 것은 아니다. 문자열이나 숫자, 객체를 사용할 수도 있고 해당 값이 Truthy하냐 Falsy하냐에 따라 결과가 달라진다.

 

예를 들어 다음과 같은 코드가 있다고 가정해 보자.

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  return animal.name;
}

const name = getName(dog);
console.log(name); // 멍멍이

 

 

그런데 만약 getName()의 파라미터에 제대로 된 객체가 주어지지 않는다면 어떻게 될까?

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  return animal.name;
}

const name = getName();
console.log(name);

 

 

 

위 예시에서 animal은 undefined이기 대문에 undefined에서 name 값을 조회할 수 없어서 이렇게 에러가 발생하게 된다. 그렇다면 만약 함수에서 animal이 제대로 주어졌을 때만 name을 조회하고 그렇지 않을 때에는 그냥 undefined를 반환하고 싶으면 어떻게 해야 할까?

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  if (animal) {
    return animal.name;
  }
  return undefined;
}

const name = getName();
console.log(name);

 

이렇게 하면 animal 값이 주어지지 않아도 에러가 발생하지 않게 된다. 그리고 이러한 코드를 논리 연산사를 사용하면 단축시킬 수 있게 된다.

 

 

---

 

 

&& 연산자로 코드 단축시키기

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  return animal && animal.name;
}

const name = getName();
console.log(name); // undefined

 

이전 코드와 이 코드는 완전히 동일하게 작동하는 코드다.

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  return animal && animal.name;
}

const name = getName(dog);
console.log(name); // 멍멍이

 

 

이게 작동하는 이유는 A && B 연산자를 사용할 때에는 A가 Truthy한 값이라면 B가 결과값이 되고 A가 Falsy한 값이라면 결과는 A가 되기 때문이다.

 

 

이러한 속성을 잘 알아두면 특정 값이 유효할 때만 어떤 값을 조회하는 작업을 해야 할 때 아주 유용하게 사용할 수 있다.

 

 

---

 

 

|| 연산자로 코드 단축시키기

 

|| 연산자는 어떠한 값이 Falsy하다면 대체로 사용할 값을 지정해 줄 때 유용하게 사용할 수 있다.

const namelessDog = {
  name: ''
};

function getName(animal) {
  const name = animal && animal.name;
  if (!name) {
    return '이름이 없는 동물입니다';
  }
  return name;
}

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

 

위 코드는 || 연산자를 사용하면 다음과 같이 단축시킬 수 있습니다.

const namelessDog = {
  name: ''
};

function getName(animal) {
  const name = animal && animal.name;
  return name || '이름이 없는 동물입니다.';
}

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

 

A || B는 A가 Truthy할 경우 A가 되고 Falsy할 경우 B가 된다.