React - JavaScript 응용하기 ( 단락회로 평가)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 논리연산자를 활용하여 단락회로 평가 응용을 사용해보도록 하겠습니다.

기존의 포스팅에서 논리연산자를 한번쯤 살펴보시기를 권합니다.

 

시작해보겠습니다.

 

 

1. 단락회로기법 알아보기

 

논리연산자는 3개의 연산자가 존재합니다.

 

console.log(true && false);
console.log(true || false);
console.log(!true);

각각의 역활은 이미 잘 알고 계시다시피 , && (and 연산) || (or 연산) , ! (반전 연산)으로 이루어져 있습니다.

이를 통해 논리연산자로, 각 조건이 참인지를 분리할 수 있습니다.

하지만, 여기서 우리는 몇가지 조건의 처리방식에 주목해야 합니다.

 

가령 예를 들면, 논리연산자 중, 반전연산자를 제외한 and 연산, or 연산에서는 첫번째 값부터 만족하지 않으면 두번째 조건은 볼 필요가 없습니다.

예를들어, 위의 예시에서는 논리연산자 2가지 모두 첫번째 조건이 "true" 입니다.

 

여기서 1번째의 and 연산자는 첫번째가 true 가 아닐 경우, 단락회로평가에 따라, 두번째 조건을 검사하지 않습니다. 

2번째인 or 연산자인 경우, 첫번째가 true 일 경우, 단락회로평가에 따라 , 두번째 조건을 검사하지 않습니다.

즉, 단락회로평가는 단순히 살펴보게되면, 검사를 빠르게 할 수 있는 로직이라고 이해할 수 있습니다.

 

하지만 이를 Truthy, Falsy 를 활용하면 보다 다양하게 사용할 수 있습니다.

이를 위해 몇가지 예제 코드를 작성해보겠습니다.

 

const getName = (person) => {
  if (!person) {
    return 'No name';
  }
  return person.name;
};

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

위 예제코드는, Truthy, Falsy 의 특성을 이용하여, person 의 값이 undefined 이므로, 묵시적으로 Falsy 로 처리되게 되고, 이를 통해 console 의 결과는 no name 을 출력하게 됩니다.

하지만 이를 단락회로 평가를 활용하여 처리하면 보다 간결하게 작성할 수 있습니다.

const getName = (person) => {
  const name = person && person.name;
  return name || 'No name';
};

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

 

위를 보게 되면, getName 에는 name 이라는 명칭으로 선언을 하고 person && person.name 을 담습니다.

만약 단순히 이 값을 return 으로 하게 되면, undefined 가 그대로 출력되지만, 위의 코드와 동일하게 출력하기 위해 처리하게 됩니다.

 

그리고 return 에서 name 혹은 "No name" 으로 or 연산을 사용합니다.

 

즉 여기서는 첫번째로 and 연산자를 사용하여 person && person.name 을 검사하지만, 현재 person 은 undefined 로 전달했으므로, 단락회로 검사에 따라, 두번째의 person.name 을 처리하지 않고 return 으로 이동하고, name 이 마찬가지로 or 연산자에도 없으므로, 이를 No name 으로 출력하게 됩니다.

 

이를 활용하면 보다 다양한 곳에서 사용할 수 있는 기술이 되겠습니다.

 

다음 포스팅에서 뵙겠습니다.

 

감사합니다.