논리연산자

첫 번째 truthy를 찾는 OR연산자 '||'

• 모든 피연산자가 false이면 마지막 피연산자를 반환

let firstName = ""; 
let lastName = ""; 
let nickName = "바이올렛"; 
alert( firstName || lastName || nickName || "익명"); // 바이올렛

 

• 리팩토링 예시 

리팩토링 전

function fetchData() {
  if (state.data) {
    return state.data;
  } else {
    return 'Fetching..';
  }
}

 

리팩토링 후 

function fetchData() {
  return state.data || 'Fetching';
}

 

첫 번째 falsy를 찾는 AND 연산자 ‘&&’

• 모든 피 연산자가 true이면 마지막 피연산자가 반환

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

 

• 리팩토링 예시

리팩토링 전

function getActiveUserName(user, isLogin) {
  if (isLogin) {
    if (user) {
      if (user.name) {
        return user.name
      } else {
        return '이름없음'
      }
    }
  }
}

 

리팩토링 후

function getActiveUserName(user, isLogin) {
  if (isLogin && user) {
    return user.name || '이름없음';
  }
}

 

&&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋습니다. 그러니 if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용합시다.

 

 

 

출처 

udemy 클린코드 자바스크립트
https://ko.javascript.info/logical-operators#ref-158