[Javascript] 논리연산자를 이용한 변수 초기화

코드를 리팩토링 하면서 다른 분들의 논리연산자를 활용한 짧은 코드들을 접하게 됐습니다. 그리고 논리연산자를 잘 활용하면 간결한 코드를 작성할 수 있다는 걸 배웠어요. 

 

기본적인 논리연산자의 종류

• 논리 AND(&&)
  • expr1 && expr2 : expr1의 값이 true이면  expr2를 반환하고, false이면 expr1을 반환합니다.
• 논리 OR(||)
  • expr1 || expr2 : expr1의 값이 true이면  expr1를 반환하고, false이면 expr2을 반환합니다.
• 논리 NOT(!)
  • !expr : 단일 피연산자의 값이 true이면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.

 

false로 변환할 수 있는 표현 5가지

• null
• NaN
• 0
• 빈 문자열 (" ", ' ', ``)
• undefined

 

연산자 우선순위

논리연산자에도 우선순위가 있으며 && 연산자가 || 이전에 실행됩니다. 따라서 아래 두 식은 서로 다른 결과가 나옵니다.

true || false && false      // returns true, because && is executed first
(true || false) && false    // returns false, because operator precedence cannot apply

 

이중 NOT(!!)

개인적으로는 가장 헷갈렸던 부분입니다. NOT 연산자를 이중으로 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 쉽게 말하면 0, null, undefined 등과 같이 정의되지 않은 변수들을 강제 변환하여 확실한 논리 결과(true or false)로 반환하는게 이중 느낌표를 사용하는 목적입니다. 예제로 볼게요.

let a = 0;
console.log(a);    //0
console.log(!a);   //true
console.log(!!a);  //false

let b = null;
console.log(b);    //null
console.log(!b);   //true
console.log(!!b);  //false

let c = undefined;
console.log(c);    //undefined
console.log(!c);   //true
console.log(!!c);  //false

let d = '';
console.log(d);    //
console.log(!d);   //true
console.log(!!d);  //false

let e = {};
console.log(e);    //{}
console.log(!e);   //false
console.log(!!e);  //true

n1 = !!true                   // !!truthy returns true
n2 = !!{}                     // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
n4 = !!false                  // !!falsy returns false
n5 = !!""                     // !!falsy returns false
n6 = !!Boolean(false)         // !!falsy returns false

 

위의 내용을 바탕으로 아래는 실제 코드를 살펴볼게요.

 

1. 함수 인자를 통한 변수 초기화 : || 연산자

인자가 없을 경우 보통 if 문을 통해 처리를 해주었는데요, 

function foo(string) {
  if(!string) {
    foo = "untitled";
    }
  }

이 코드를 논리연산자 ||를 활용하면 다음과 같이 됩니다.

string  값이 있으면 해당 값으로 할당, 또는 없으면 "untitled"를 할당 합니다. 같은 내용이지만 더 간결해 졌어요.

function foo(string) {
  string = string || "untitled";
  }
  
foo("title") // string = "title"
foo() // string = "untitled"

또한 설정할 값은 함수를 대입할 수도 있습니다.

function test() {
  return "test";
}

function foo(string) {
  string = string || test();
  }
  
foo() // string = "test"

 

2. 조건문의 && 연산자 

age 값이 있고 17보다 크면 true, 아니면 false를 반환하는 조건문입니다. 이 코드를 &&연산자를 활용해 보면 아래와 같습니다.

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

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

isAdult(16) // false
isAdult(18) // true
isAdult()   // false

&& 연산자를 || 와 함께 사용할 수 도 있습니다. 

userName이 있으면 logIn(userName)을 호출하고, 없다면 signUp 함수를 호출합니다.

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

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

 

논리연산자를 활용하면 코드를 간결하게 줄일 수 있습니다. 하지만 너무 많아지면 가독성이 떨어질 수 있습니다.

 

 

레퍼런스: 

마이구미의 HelloWorld

당황하지않고_프로그래밍