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을 이용한 방식은 직관적이지 않아, 나중에 코드를 리뷰할 때 큰 불편함을 겪을 수 있기에 사용하지 않는 편이 바람직하다.
'Archive > WEB' 카테고리의 다른 글
[HTML] <Img> 태그 사용법 & alt 속성 SEO (0) | 2022.12.19 |
---|---|
[JS] this Keyword 정복 하기 Vol1 - about this keyword (0) | 2022.11.26 |
[JS] querySelector - CSS Property 접근 하기 (0) | 2022.11.23 |
[JS] querySelector & querySelecotrAll - HTML element 접근 하기 (0) | 2022.11.21 |
[Node.js] Path Module 사용법 (0) | 2022.07.09 |