[ONEBITE-REACT] JS 심화 - 단락 평가 (Short-circuit Evaluation)

의미

단락평가(Short-circuit Evaluation)란, 논리 연산자인 &&(and), ||(or)에서 발생하는 평가 방식을 말한다.
a && b 이든 c || d 이든 각각의 연산자는 두개의 항을 가지고 있기 때문에 둘 다 연산해야 할 것 같지만, 실제로는 왼쪽의 1항의 결과에 따라 2항을 계산할지 말지 결정한다.

• 논리 and 연산자 (&&)
  • 왼쪽 피연산자가 참이면 오른쪽 피연산자를 평가하고 오른쪽 피연산자까지 참이어야 참을 반환한다.
  • 왼쪽 피연산자가 거짓이면 오른쪽 피연산자를 평가하지 않고 바로 거짓으로 반환한다.
• 논리 or 연산자 (||)
  • 왼쪽 피연산자가 참이면 오른쪽 피연산자를 평가하지 않고 참을 반환한다.
  • 왼쪽 피연산자가 거짓이면 오른쪽 피연산자를 평가한다.

// 논리 and 연산자 (&&)
false && console.log("이 메시지는 출력되지 않는다.")

// 논리 or 연산자 (||)
true || console.log("이 메시지는 출력되지 않는다.")

이를 이용하면 조건문을 이용하지 않고 특정 함수나 정보에 접근하지 못하도록 하는 등의 응용이 가능하다.

예를 들자면 웹 사이트를 만들고 어떤 사용자가 접근하려는 페이지에 로그인을 해야만 접근할 수 있도록 처리할 때도 논리 연산자를 활용할 수 있다.

const isLoggedIn = true; // 로그인 상태가 true이다.

isLoggedin && redirectToDashboard(); // 논리 and 연산자를 사용했기 때문에
// isLoggedin이 true라면 오른쪽 피연산자인 redirectToDashboard() 함수를 실행시킨다.

const username = currentUser.username || "Guest";
// username을 선언하는데, currentUser라는 객체의 username이 true일 때가 좌항 (true라는 것은 undefined나 null이 아닌 상태, 스트링이든 number든 어떤 데이터라도 있는 상태).
// 즉 좌항에 어떤 정보라도 있어서 truthy이면 오른쪽 피연산자를 평가하지 않고,
// 좌항이 null이거나 undefined여서 falsy인 경우 오른쪽 피연산자를 평가하니, "username"이라는 프로퍼티에 Guest라는 값을 담게 된다.

활용

앞선 포스트에서 truthy와 falsy의 활용 예시를 들 때 보았던 코드를 다시 한 번 작성해보겠다.

function printName(person) {
  console.log(person.name);
}

let person;

printName(person); // Uncaught TypeError: Cannot read properties of undefined (reading 'name')

printName이라는 함수를 만들고 person을 파라미터로 할당한 뒤, 이 함수를 실행시키면 person이라는 객체의 name 프로퍼티를 콘솔에 출력하도록 하는 함수였다.

그리고 person이라는 객체를 선언하는데 값을 초기화 하지 않은 상태로 두어 현재 undefined 상태가 되었다.
이 상태에서 printName(person); 함수를 실행하자 위와 같이 undefined 상태에서는 name이라는 프로퍼티에 접근할 수 없다는 에러 메시지가 출력되었다.

let person;처럼 객체를 선언만 하고 값을 할당하지 않는 휴먼 에러가 발생할 수도 있고, 또는 개발자가 의도적으로 null 상태로 값을 초기화할 수도 있다. null일 경우에도 마찬가지로 null 상태에서는 객체의 프로퍼티에 접근할 수 없다는 에러가 출력되기 때문에 이런 일을 방지 하기 위해서 printName이라는 함수를 실행할 때 콘솔 출력 코드 이전에 if문을 넣어 person 객체가 null이나 undefined인지 즉, falsy 상태인지 확인했었다.

function printName(person) {
  if (!person) {
    console.log("person의 값이 없습니다.");
  }
  return;
  console.log(person.name);
}

let person = null;

printName(person); // "person의 값이 없습니다."

!person의 의미는 person이 undefined거나 null이면 falsy한 데이터 타입인 것이고,
! not 연산자를 넣어서 falsy한 게 아닌, 즉 truthy하다면이니 그 다음 중괄호 함수를 실행하도록 하는 것이다. 즉 person 객체가 undefined나 null이면 콘솔에 "person의 값이 없습니다."를 출력하고 return으로 빠져나와 아래 console.name(person.name) 코드를 실행해서 null인 객체의 프로퍼티에 접근하다 에러가 나는 일을 막아주는 방법이었다.

위와 같은 코드를 단락 평가를 사용하면 더 간결하게 바꿀 수 있다.

function printName(person) {
  console.log(person && person.name);
}

let person;

printName(); // undefined

위 코드를 보면 console에 출력을 하는데 && 논리 연산자를 사용해서 person이 truthy일 때만 우항을 평가하게 될 것이다. 즉 person이 falsy하다면 person.name 자체를 콘솔에 출력하지 않는 것이다.

객체에 값을 넣어보니 잘 작동한다.

function printName(person) {
  console.log(person && person.name);
}

let person = {
  name: "장원영",
};

printName(person); // "장원영"

이것을 조금 더 응용하면 이런 형태로도 코드를 작성할 수 있다.

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "장원영",
};

printName(person); // "장원영"

코드해석

printName이라는 함수를 선언하고 매개변수로 person이라는 객체를 받는다.

name이라는 변수를 선언하고 person이 true이면 person.name 프로퍼티의 값을 name이라는 변수에 초기화한다.

그리고 console에 단락 평가를 한 뒤 출력하는데, || or 논리 연산자를 사용했기 때문에 name이 false이면 오른쪽 피연산자를 평가해서 "person의 값이 없습니다"를 출력하고, true면 name을 그대로 출력한다. 여기서 name은 person.name 프로퍼티의 값으로 담겼다.

아래에서 person 객체의 name 프로퍼티로 "장원영"이라는 값이 초기화 되었기 때문에,
맨 아래에서 printName(person)를 실행하면 "장원영"이 콘솔에 출력된다.