"논리 연산자의 활용"
Intro
모던 자바스크립트 Deep Dive 책을 가지고 자바스크립트 복습과 더불어 조금 더 깊이 있는 공부를 이어가는 중입니다. 다음의 포스팅은 그 중에서 단축 평가에 관한 부분을 나름대로 다시 정리해 본 글입니다.
단축 평가란 논리 연산을 수행할 때 만약 어느 한 쪽에서 이미 논리 연산의 결과가 확정되었다면 다음 연산을 이어가지 않고 즉시 평가를 완료하는 것을 말한다고 합니다. 이 점을 활용하면 조금 더 간결하게 if 문을 대체할 수 있다고 하는데요. 이를 이해하기 위해서는 우선 논리 연산이 어떻게 수행되는지를 이해할 필요가 있습니다.
논리 연산 ( &&, || ) 의 진행 순서
논리 연산의 단축 평가에 활용되는 논리곱 연산자(&&)와 논리합 연산자(||)는 둘 다 좌항에서 우항으로 평가가 진행되는 연산자입니다. 왼쪽을 먼저 체크한 뒤에 이어서 오른쪽을 체크한다는 것이죠.
예를 들어 falsy한 값 || truthy한 값 이라는 논리합 연산자를 활용한 표현식이 있다고 하면, 먼저 falsy한 값을 평가한 후에 이어서 truthy한 값을 평가하는 순서로 진행됩니다. 마찬가지로 논리곱 연산자도 좌항을 먼저 평가하고 이어서 우항을 평가합니다.
단축 평가
단축 평가는 앞서 말한 논리곱/논리합 연산자가 진행되는 순서와 두 연산자의 특징을 이해해야 왜 그러한지를 이해할 수 있습니다. 먼저 논리곱 연산자의 예를 살펴보겠습니다.
논리곱 연산자( && )
논리곱 연산자는 && 를 사용하는 연산자입니다. 논리곱 연산자는 두 조건이 모두 참일 경우에 true 라고 평가됩니다.(평가되는 것이지 무조건 true 를 돌려주지는 않습니다!) 만약 둘 중 어느 하나라도 falsy 한 값이 있다면 논리곱 연산자는 false 한 결과로 이어지죠.
이 때 만약 falsy 한 값이 연산자의 좌항에 위치한다면 어떻게 될까요? false && something 이라는 표현식이 있다고 가정해봅시다.
논리곱 연산자는 위에서도 언급한 것처럼 두 항 모두가 참일때만 true 라고 평가됩니다. 따라서 만약 연산자의 좌항에 false 라는 값이 있다면 something에 어떤 값이 오더라도 false 로 평가될 수 밖에 없습니다. 이미 어느 한 쪽이 false 이기 때문에 우항의 조건이 의미가 없어지는 셈이죠.
이 경우에 논리곱 연산자는 우항의 평가를 생략합니다. 그리고 논리곱 연산자의 결과를 결정한 좌항을 그대로 반환하죠. 이것이 논리곱 연산자에 해당하는 단축 평가입니다. 정리하자면 논리곱 연산자는 좌항의 값이 falsy 한 값일 경우 우항을 평가하지 않은 채 좌항의 값을 그대로 반환합니다.
논리합 연산자( || )
논리합 연산자는 || 를 사용하는 연산자입니다. 논리곱 연산자와 반대로 두 조건 중 하나라도 참인 경우에 true 라고 평가되죠.
그렇기 때문에 논리합 연산자의 경우 좌항의 값이 만약 truthy 한 값이라면 우항의 조건은 무엇이든지 관계가 없습니다. 우항에 어떤 값이 오더라도 true 로 평가되기 때문입니다.
그래서 논리합 연산자의 경우 좌항의 값이 truthy 한 값이라면 우항의 평가를 생략하는 단축 평가가 이뤄집니다. truthy한 값 || falsy한 값 인 경우에 굳이 falsy한 값을 평가하지 않고 바로 truthy한 값을 반환한다는 것이죠.
논리 연산이 돌려주는 값
저는 그 동안 논리곱/논리합 연산자를 주로 조건문의 조건절 안에서만 다뤄왔습니다. 때문에 논리곱/논리합 연산자가 무엇을 돌려주는지를 정확히 이해하지 못했었죠. true 또는 false 처럼 boolean 자체를 돌려준다고 이해하고 있었습니다만, 실제로는 boolean 만 돌려주는 것이 아니었습니다.
그렇다면 무엇을 돌려줄까요? 두 연산자 모두 최종적으로 논리 연산의 결과를 결정하는 피연산자를 타입 변환 없이 그대로 반환합니다. 만약 단축 평가가 이루어졌다면 좌항의 값을 돌려주고, 그렇지 않은 경우에는 우항의 값을 돌려주는 것이죠.
// 논리합 연산자( || )
"kim" || false // "kim" (단축평가)
false || "kim" // "kim"
"kim" || 0 // "kim" (단축평가)
// 논리곱 연산자( && )
true && "kim" // "kim"
0 && "kim" // 0 (단축평가) 0은 falsy 한 값이므로
"kim" && 0 // 0
false && "kim" // false (단축평가)if 문의 대체
if 문은 어떤 조건의 값이 true 인 경우에만 조건문의 블록 내부의 코드를 실행하도록 되어있습니다. 이 점을 위에 언급한 논리곱/논리합 연산자와 연결해서 대체할 수 있는데요. 예를 들어 살펴보도록 하겠습니다.
우선 논리곱 연산자를 활용하는 방식입니다.
let something = true // true 의 자리에 무엇이든 truthy한 값이 들어올 경우
let message = something && "success";
console.log(message) // "success"만약 something 이라고 하는 변수에 들어가는 값이 truthy한 값일 경우에 "success" 라는 메시지를 출력하고 싶다면, 위처럼 논리곱 연산자의 좌항에 something 을 넣고 우항에 메시지를 넣어 출력할 수 있습니다.
논리합 연산자의 경우는 falsy 한 값이 기준이 됩니다.
let somethingElse = false // false 의 자리에 무엇이든 falsy한 값이 들어올 경우
let message = somethingElse || "fail";
console.log(message) // "fail"동작 방식은 논리곱 연산자와 크게 다르지 않기 때문에 따로 부연 설명하지는 않겠습니다.
Outro
희미하게만 알고 있던 것부터 정확하게 알고 있지 못한 내용들을 바로잡는 시간이었습니다. 참고로 단축평가와 관련해 책에서는 ES11(ECMAScript2000)에서 도입된 옵셔널 체이닝 연산자와 Null 병합 연산자에 대해서도 다루고 있습니다. 정말 좋은 책이니까요. 관심이 있으신 분들은 모던 자바스크립트 Deep Dive, 꼭 한 번 읽어보시면 좋겠습니다.
