헷갈리는 논리 연산자 (&&, ||)

2019-08-13
#javascript

코드를 작성시 간결하고 가독성이 좋게 하는 방법에는 여러가지들이 있다.
그 중에서도 논리 연산자는 코드를 간결하게 작성할 수 있다.
그러나 조금 헷갈릴 때가 있어 정리가 필요했다.

&& 연산자

A && B A와 B 모두 true이면 결과는 true이다.
A가 false이면 B를 체크하지 않고 false를 반환한다.

&& 연산자 활용 예

1
2
3
4
5
6
7
function check(value) {
  if (value && value > 10) {
    return true;
  } else {
    return false;
  }
}

위의 코드는 아래와 같이 간략하게 수정할 수 있다.
value가 false이면 false를 반환한다. (value >10은 체크하지 않는다.)
value가 true이고 value > 10 이 false이면 false반환한다.
또한 위의 조건을 충족한 경우 true를 반환한다.

1
2
3
function check(value) {
  return value && value >10;
}
1
2
3
4
5
6
let useName;
if (userId && userId.token) {
  useName = userId.name;
} else {
  useName = null;
}

userId 가 참이고 userId.token이 참이면 userId.name값을 userName에 넣는다.
만약 거짓이면 null을 userName에 넣는다.

1
const userName = userId && userId.token && userId.name;

|| 연산자

A || B A 또는 B중 하나라도 true이면 true 반환한다.

|| 연산자 활용 예

1
2
3
4
5
6
7
function documentTitle(theTitle) { ​
  if (!theTitle) {
     theTitle = "Untitled Document";
  } else {
    theTitle = theTitle;
  }
}

아래와 같이 나타낼 수 있다.

1
2
3
function documentTitle(theTitle) { ​
  theTitle = theTitle || "Untitled Document";
}

&& 와 || 활용 예

1
2
3
4
5
if (userName) {
  logIn(userName);
} else {
  signUp();
}

userName이 true이면 logIn 함수를 실행하고 false인 경우 signUp함수를 실행한다.
삼항 연산자라 비슷하다고 보면 된다.

1
2
3
4
5
// 논리 연산자
userName && logIn(userName) || signUp();

//삼항 연산자
userName ? logIn(userName) : signUp();