|| , && 연산자 사용법 [javascript] :: 마이구미

이번 글은 자바스크립트를 사용할 때 유용한 팁들을 알아볼 것이다.

어려운 내용이 아니라 쉬운 내용이다.

하지만 또 쉬운 내용이라고, 중요하지 않은 것은 아니다.

알고있다면 훨씬 좋은 팁들이다.

시작해보자.

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

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

위의 코드는 함수를 통해 인자를 전달 받아  theTitle 변수에 인자의 값을 할당해주는 것이다.

하지만 인자가 없을 경우를 위해 이런 식으로 많이 if문을 통해 사용할 것이다.

이러한 처리를 할 때는 아래와 같이 이용해보자.

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

documentTitle("title") // theTitle = "title"
documentTitle()        // theTitle = "Untitled Document";

자바스크립트에서는 논리 OR 연산자 ||를 활용할 수 있다.

위 코드 경우 documentTitle("title") 호출 시에는 인자에 "title" 이 존재하므로 변수에 할당된다.

document() 호출 시에는 인자에 아무런 값이 없기에 || 연산자를 통해 오른쪽에 설정해놓은 값으로 할당되게 된다.

없을 때 설정할 값을 아래와 같이 함수를 통해 대입해도 가능하다.

function a() {
  return "11";
}

function documentTitle(theTitle) {
  theTitle  = theTitle || a();
  
  console.log(theTitle)
  
}

documentTitle(); // theTitle = "11"

2. if문 조건 (&& 연산자)

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

위 코드는 전달 인자가 존재하고, 또한 17보다 크면 true를 반환,

그렇지 않다면, false를 반환하는 함수이다.

위와 같이 특정 함수의 return을 boolean 형태로 만들어 사용할 때,

if, else문을 통해 많이 사용할 것이다.

자바스크립트는 한 줄이면 가능하다.

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

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

자바스크립트에서는 조건문이 없더라도 && 연산자를 활용하면,

조건에 따라 boolean 형태로 값을 내려준다.

필요 시 위와 같이 사용하자. 훨씬 간결해진다.

이번엔 ||, &&를 같이 활용해보자.

1번 2번을 이해했다면 큰 문제없다.

function logIn(name) {
    console.log('login');
}

function signUp() {
    console.log('signUp');
}

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

enter('lee'); // console.log('login');

위 코드는 userName이 있을 경우 logIn 함수를 호출하고 그렇지 않다면, singUp 함수를 호출한다.

아래와 같이 enter 함수를 바꿔보자.

function enter(userName) {
    userName && logIn(userName) || signUp ();
}

하나 더 보자.

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

check({'loggedIn': true, 'id': 'lee'}); // lee

위 코드는 userName이 있고, userName.loggedIn이  있을 시 userName의 id를 userID에 할당한다. 

아래와 같이 바꿔보자.

function check(userName) {
    var userID = userName && userName.loggedIn && userName.id
}

||, && 연산자를 활용하면 코드를 보다시피 훨씬 간결하게 만들 수 있다.

하지만 너무 과도하게 사용하면 가독성에 안 좋을 수 있다.

참고 자료

http://javascriptissexy.com/12-simple-yet-powerful-javascript-tips/