[JavaScript] Logical Operator && || 의 또 다른 기능 Short Circuiting

JavaScript 에서 Logical Operator [논리 연산자] 라고 불리우는 || && 연산자는 다른 언어와 달리 논리적 기능 이외에도 Short Circuiting 이라는 특이한 성질을 가지고 있다.

다른 언어에서 논리 연산자를 접하고 JavaScript로 넘어온 경우 short circuiting 이라는 개념이 생소할 수 있기에 이번 포스팅 에서 정리해 보고자 한다.  

---

📃List

1. OR Operator short circuiting

2. AND Operator short circuiting

2.1 if statement vs short circuiting

 

💡 개인적인 공부 내용을 기록하고자 하는 용도로 작성한 글 이며, 계속적으로 수정 및 추가해 나갈 예정입니다.

---

1. OR Operator Short circuiting

OR(||) Operator의 Short circuiting은 다음과 같은 규칙을 따른다. 좌측부터 계산을 시작하며, 만약 첫 번째 value가 truthy value라면 첫 번째 value를 return하며, 첫 번째 value가 truthy value가 아니라면 두 번째 value를 return한다.

 

What is truthy & falsy value ?

Boolean으로 평가 시 true를 출력하는 value를 truthy value, false를 출력하는 value를 falsy value로 구분한다.

 

예시 코드로 동작 과정을 이해해 보도록 하자.

첫 번째 라인의 코드는 number type 3과 string type "nov"를 비교한다. number type 3은 truthy value이기에 3을 return한다.

두 번째 라인의 코드는 빈 문자열과 string type "nov"를 비교한다. empty string은 falsy value이기에, 건너뛰고 "nov"를 return한다.

console.log(3 || "nov"); // return 3
console.log("" || "nov"); // return "nov"

비교하는 value가 2개를 초과하는 경우에는 좌측을 기준으로 가장 처음으로 등장한 truthy value를 return한다.

console.log(undefined || 0 || "" || "nov" || 100); // return "nov"

---

2. AND Operator Short circuiting

AND(&&) Operator의 Short circuiting은 OR Operator와 정확하게 반대되는 동작을 실행한다. 마찬가지로 좌측부터 계산을 시작하며 좌측을 기준으로 가장 처음으로 등장하는 falsy value를 return한다. 

console.log(0 && "nov"); // return 0
console.log(10 && "nov"); // return "nov"
console.log("nov" && 10 && ""); // return ""

2.1 if statement vs short circuiting

Logical Operator의 short circuiting 성질을 이용하면, if statement 구문과 비슷한 동작을 수행하도록 코드를 작성할 수 있다.

player object는 Boolean Type isAlive와 number Type level, hp를 property로 가진다.

이 때 isAlive가 true라면 "Player is Alive"라는 문구를 출력하는 코드를 if statement를 이용해 작성해 보았다.

const player = {
  isAlive: true,
  level: 10,
  hp: 100,
};

if (player.isAlive) {
  console.log(`Player is Alive.`);
}

 

 

이번에는 같은 기능을 수행하는 코드를 AND Operator의 short circuiting 성질을 이용해 다시 작성해 보았다.

player.isAlive && console.log(`Player is Alive.`);

 

player.isAlive가 true 즉, truthy value라면 && Operator의 성질에 의해서 player.isAlive를 건너 뛰고, "Player is Alive." 문구를 출력하게 되는 것이다. 하지만 if statement 방식과 달리 short-circuting 특성을 이용한 방식은 Property 내부의 값이 0이라면 프로그래머가 의도한 바와 다르게 무조건 falsy value로 취급해 버려서 원하는 결과를 도출해 내지 못한다는 단점이 있다.

이 오류는 ES2020에서 추가된 nullish coalescing operator ?? 를 이용하면 보완할 수 있는데, 이는 추후에 더 많은 예시와 함께 따로 글을 작성할 예정이다.

 

그러나 본 글에서 얘기하고자 하는 바는 이러한 방식도 있다는 것이지, if statement 대신에 short circuiting 구문을 이용해 분기 코드를 작성하라는 의도는 아니다.

오히려 short circuiting을 이용한 방식은 직관적이지 않아, 나중에 코드를 리뷰할 때 큰 불편함을 겪을 수 있기에 사용하지 않는 편이 바람직하다. 

---