간단하지만 강력한 자바스크립트(JS), 논리연산자 활용하기

논리 연산자

자바스크립트는 다음과 같은 기준으로 true와 false를 나눈다.

var f1 = null;        // !null      returns true
var f2 = 0;            // !0         returns true
var f3 = NaN;        // !NaN       returns true
var f4 = "";        // !""        returns true
var f5 = '';        // !''        returns true
var f6 = undefined;    // !undefined returns true

1. && (논리 곱)

두 피연산자가 모두 true 이면 true를, 그 외는 false를 반환

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns Dog
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

2. || (논리 합)

두 피연산자 중 하나라도 true 이면 true를, 그 외는 false를 반환

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat

간단(하지만 강력)한 활용

논리 연산자에는 다음과 같은 강력한 기능이 있다.

// Short-circuit evaluation(단축 계산)
var s1 = false && 'anything';    // var s1 = false;
var s2 =  true || 'anything';    // var s2 = true;

논리 연산자의 연산 우선순위는 왼쪽에서 오른쪽이고, 앞의 조건이 일치하면 뒤의 조건을 검사하지 않는 특징으로 인해 위의 사례에선 'anything' 부분에 어떤 값이 오더라도 논리 연산자는 이를 검사하지 않는다.
따라서, 주석으로 표시한 것처럼 뒷부분을 생략해도 완전히 동일한 표현이 된다.

이 때문에, 조건문에서 논리 연산을 사용할 땐 피연산자의 순서를 효율적으로 배치하여 불필요한 연산을 줄이기도 한다.

이제, 자바스크립트에서 이런 특징을 활용하여 간단하지만 강력한 사용법을 살펴보도록 하자.

1. || (논리 합)을 이용한 단축 계산

function documentTitle(theTitle)
if (!theTitle) {
  theTitle  = "Untitled Document";
  }
}

theTitle이라는 변수를 입력받고, 값이 없다면 "Untitled Document"를 넣어주는 함수가 있다.

function documentTitle(theTitle)
  theTitle  = theTitle || "Untitled Document";
}

||의 특징을 활용하면, 앞의 피연산자가 true일 경우 뒤의 피연산자를 체크하지 않기 때문에 if 문을 생략하고 간단히 표현이 가능하다.

2. && (논리 곱)을 이용한 단축 계산

function isAdult(age) {
  if (age && age > 17) {
    return true;
  }
  else {
    return false;
  }
}

age를 입력받아서, age의 값이 있고 17살 이상인 경우 true, 그 외에는 false를 리턴하는 함수가 있다.

function isAdult(age) {
   return age && age > 17 ;
}

&&의 특징을 활용하면, age의 값이 입력되지 않는다면 17보다 큰지 비교할 필요가 없으므로 age를 먼저 배치하였고, 두 조건 모두 일치하면 true를, 아니면 false를 리턴하도록 간단히 표현이 가능하다.

3. 조건문 활용(1)

if (userName) {
  logIn (userName);
}
else {
  signUp ();
}

userName의 값이 있다면 logIn, 없다면 signUp을 하는 함수가 있다.

userName && logIn (userName) || signUp ();

이 경우 userName의 값이 없다면 &&의 특성상 logIn(userName)은 체크하지 않고 바로 || 뒤의 signUp으로 넘어갈 것이고, 반대로 값이 있다면 logIn(userName)까지 모두 true가 되므로 ||의 특성상 뒤의 signUp은 체크하지 않게 된다.

4. 조건문 활용(2)

var userID;
if (userName && userName.loggedIn) {
  userID = userName.id;
}
else {
  userID = null;
}

userName이라는 객체가 존재하고 loggedIn 프로퍼티가 존재한다면, userName의 id 프로퍼티의 값을 userID 변수에 넣어주고, 없다면 null로 선언하는 함수가 있다.

var userID = userName && userName.loggedIn && userName.id

&&의 특성을 반영하여 한 줄로 표현이 가능한데, 이 경우 앞의 피연산자들이 모두 true일 경우 가장 마지막의 피연산자(문자열)의 값을 변수에 저장하게 된다.

5. 변수와 문자열

var a5 = "Cat" && "Dog";    // t && t returns Dog
var o5 = "Cat" || "Dog";    // t || t returns Cat

위에서 살펴봤던 논리 연산자의 예시 중 두 문자열을 비교했던 케이스를 가져와봤다.
문자열에 값이 있으므로 두 피연산자 모두 true가 되는데, 이때 변수에 저장되는 값은 각 연산자의 특징을 생각하면 쉽게 알 수 있다.

&& 연산자는 피연산자가 true 이면 다음 피연산자를 체크하기 때문에 마지막 문자열 "Dog"가 변수에 저장된다.
반대로, || 연산자는 피연산자가 true가 되면 다음 피연산자를 체크하지 않기 때문에 첫 번째 문자열 "Cat"이 변수에 저장된다.

출처

1. MDN web docs, 표현과 연산자
2. 12 Simple (Yet Powerful) JavaScript Tips