[JavaScript] #15 - 단축 평가 논리 계산법 (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에서는 이것을 사용해 조건부 랜더링을 할 수 있다.

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

* undefined, null, 0, '', NaN : 무조건 거짓이 되는 값 (false)

 

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일 경우 왼쪽 코드 실행, flase일 경우 오른쪽

코드가 실행된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

자료 출처  :https://bgeun2.tistory.com/14