JavaScript: 단축 평가 논리 계산법(Short-circit evaluation)

단축 평가 논리 계산법이란, 이름은 거창하지만 사실 별거 없다. 논리 연산자를 사용해서 코드를 더 짧게 작성하는 것을 의미한다. 

 

코드를 통해 알아보자. 

 

const dog = {
  name: "멍멍이",
};
 
function getName(animal) {
  if (animal) {
    return animal.name;
  }
  return undefined;
}
 
const name = getName(dog);
console.log(name);
 
// 멍멍이

위 코드는 getName 함수의 파라미터인 animal이 있으면 그 객체의 name을 출력해주고 없을 경우 undefined를

출력하는 코드이다. 

 

const dog = {
  name: "멍멍이",
};
 
function getName(animal) {
  return animal && animal.name;
}
 
const name = getName(dog);
console.log(name);
 
// 멍멍이

다음과 같이 getName함수의 길이를 줄일 수 있다. 받아온 animal 객체에 name이 있으면 리턴해서 출력하고 

없을 경우 undefined를 출력한다. 

 

console.log(true && "hello"); // hello
console.log(false && "hello"); // false
console.log("hello" && "bye"); // bye
console.log(null && "hello");  // null
console.log(undefined && "hello"); // undefined
console.log('' && "hello"); // ''

다음과 같은 결과가 나오기 때문에 위에서의 코드 길이 단축이 가능하다. 

&& 연산자를 사용하면 앞의 값이 true일 경우 오른쪽의 코드가 실행되고 false일 경우 왼쪽의 코드가 실행된다. 

 

이와 같은 사용법을 알고 있으면 나중에 아주 유용할 것이다.

특히, React에서는 이것을 사용해 조건부 랜더링을 할 수 있다. 

주로 특정 값이 유효할 때만 어떤 값을 조회해야 하는 상황에 사용한다.

 

const namelessDog = {
  name: "",
};
 
function getName(animal) {
  const name = animal && animal.name;
  return name || "이름이 없는 동물입니다.";
}
 
const name = getName(namelessDog);
console.log(name);
 
// 이름이 없는 동물입니다.

다음과 같이 || 연산자도 사용할 수 있다. 

 

console.log(false || "hello");
console.log("" || "이름없다.");
console.log(null || "널이다~");
console.log(undefined || "defined 되지 않았다!");
 
console.log(1 || "음?");
console.log(true || "여기 안본다. ");

|| 연산자는 && 연산자와는 반대이다. 앞의 값이 true일 경우 왼쪽의 코드가 실행되고 false일 경우 오른쪽의 코드가

실행된다.