[JS] 내 이름은 다재다능 논리연산자

논리연산자 다시보기

요약 : AND논리연산자 &&는 그 특성 때문에 if문 과 비슷하게 사용할 수 있다.

OR논리연산자 ||는 그 특성때문에, 변수를 선언할때, 유용하게 사용할 수 있다.

NOT논리연산자 !을 이용하여 어떤 값의 boolean값을 얻을 수 있다.

최근에 논리연산자를 다시보며, 새로 알게된 사실이 있습니다.

논리연산자 또한, 평가후에 리턴이 있다는 것입니다.

이러한 JS의 특성과 AND, OR연산자의 특성을 함께 이용하여, 생각치 못한 동작을 하게 할 수 있습니다. (좀 꼼수같은)

AND 연산자 다르게 사용하기

AND 연산자 &&는 좌, 우로 피연산자 2개를 가지는 연산자 입니다. 또한 &&는 좌에서 우로 평가됩니다.

기본적으로 좌항과 우항이 모두 참이면 우항의 truthy한 값을 리턴하고 그 외의경우, 좌항이나 우항의 falsy한 값을 리턴합니다.

1

(me == you) && (me == she)

cs

위의 표현식을 인터프리터가 해석할 경우, 좌항을 먼저 평가합니다. 좌항이 true로 평가될 경우, 우항을 평가합니다. 그리고, 우항이 true일 경우, 해당 && 표현식을 최종적으로 좌항의 truthy한 값을 리턴하게됩니다. 우항이 false라면, && 표현식은 최종적으로 우항의 falsy한 값을 리턴합니다. (truthy는 true로 평가 될 수 있는 값, falsy는 false로 평가될 수 있는 값. 자세한 내용은 google에)

주목해야 할 부분은 좌항이 false일 경우입니다. 이 경우, 우항은 평가되지가 않습니다.

반대로 true일 경우, 우항이 평가됩니다. 여기서 평가라는 부분에 주목합시다.

이 평가된다는 점을 이용하여, 아래의 코드와 같이 if문 같이 사용할 수 있습니다.

좌항이 true일 경우에만 우항이 평가되기 때문에, 결과적으로 if문과 같은 동작을 하게 됩니다.

그렇지만, 개인적으로 가독성 측면에서 좋지 않은 방법이라고 생각합니다.

(me == you) && me.hit(she); 
 
// 위의 1 Line && 표현식과 같은 역할을 한다.
if(me == you) {
    me.hit(she);
}

OR 연산자 다르게 사용하기

OR 연산자 ||는 좌, 우로 피연산자 2개를 가지는 연산자 입니다. 또한 ||는 좌에서 우로 평가됩니다.

기본적으로 좌항이나 우항이 true일 경우, 좌항이나 우항의 truthy한 값을 리턴하고 그 외의 경우 좌항의 falsy한 값을 리턴합니다.

(me == you) || (me == she);

위의 OR표현식을 인터프리터가 해석할 경우, 좌항을 먼저 평가합니다. 좌항이 true로 평가될 경우, OR표현식은 최종적으로 좌항의 truthy한 값을 리턴합니다. 좌항이 false인 경우는 우항을 평가한 뒤, 우항이 true면 최종적으로 우항의 truthy한 값을 리턴, false이면, 우항의 falsy한 값을 리턴합니다.

여기서 true나 false를 리턴하는 것이 아닌, truthy 혹은 falsy한 값을 리턴한다는 점을 이용하여 유용한 코드를 작성 할 수 있습니다. 아래의 코드를 봅시다.

var firstName; // undefind
var lastName; // undefind
var nickName = "jelly"; // "jelly"
 
var myName = firstName || lastName || nickName || "hongildong" // 촤종적으로 "jelly로 초기화 "

위의 코드는 myName을 초기화 하는 코드입니다. 1,2 Line의 변수 firstName과 lastName는 undeind로 초기화 되고, 3 Line의 nickName은 "jelly"로 초기화 됩니다. 그러면 이제 5 Line을 봅시다.

5 Line에서는 myName변수를 OR연산자를 통해 초기화 하고 있습니다. 논리연산자가,  truthy 혹은 falsy한 값을 리턴한다는 점을 모른다면, 조금 이상하게 느껴질 수 도 있는 코드입니다. 단순히 true혹은 false로 초기화 하는것 같이 보일테니까요. 하지만 아닙니다. 최종적으로 myName은 "jelly"로 초기화 됩니다. undefind는 falsy한 값이기 때문에, false로 변환됩니다. 그렇기 때문에, firstName과 lastName는 false로 평가되기 때문에, truthy한 값으로 "hongildong"을 리턴하게 됩니다. 

이러한 방법은 여러 방면에서 사용할 수 있고 가독성에도 해를 끼치지 않는 좋은 방법이라고 생각합니다.  

NOT 연산자 다르게 사용하기

NOT 연산자 !는 좌로 피연산자 1개를 취하는 연산자입니다. 좌의 피연산자를 boolean값으로 변환한뒤, NOT논리연산을 취합니다. true이면, false로, false이면, true를 리턴합니다. !연산자의 피연산자는 boolean타입이어야 하고 아닐경우, boolean타입으로 형변환을 진행합니다. 이러한 특성을 이용하여 어떠한 값의 boolean 값을 얻고 싶다면, !연산자를 2번 사용하면 됩니다.(부정의 부정은 긍정)

아래의 코드는, !연산자를 이용한 boolean으로의 형변환의 예시입니다.

var number = 0; // 0을 booleanType으로 형변환 시, false로 형변환 
var booleanType = !number; // true
booleanType = !!number; //false