논리 연산자(&&)와 옵셔널 체이닝을 if문에서 자주 쓰이는걸 보고 차이점이 무엇인지 정리해보았다.

논리연산자(&&)

논리연산자(&&)는 왼쪽부터 오른쪽으로 평가한다. &&연산자의 반환값이 존재하고
원시형 불리언(true, false)으로도 반환하여 사용할 수 있다.

예제

1) 중간에 피연산자가 false인 경우

왼쪽에서부터 피연산자를 평가하다가 false를 만나면 해당 하는 값을 반환하고 평가를 멈춘다.

const a = "true"

const result = a && 0 && "4";

console.log(result)  //// 0을 반환하고 STOP

2) 모든 값이 true인 경우

왼쪽에서부터 피연산자를 평가하고 모든 값이 true라면 마지막 피연산자를 반환한다.

const a = true
const b = "true"

const result = a && b && 4;

console.log(result) ////마지막 피연산자인 4를 반환

옵셔널 체이닝

옵셔널 체이닝은 최근에 추가된 문법으로 IE는 지원하지 않는다.
옵셔널 체이닝이 등장하기 이전에는 &&연산자를 사용하여 조건에 따라 코드가 작동하도록 했다.
중첩 객체의 특정 프로퍼티를 찾기 위해서 구성요소들을 &&로 연결해서 사용하는데 코드가 길어지고 가독성이 떨어진다.
&&대신에 옵셔널 체이닝을 사용하면 코드가 훨씬 간결해지고 가독성이 올라간다.

예제

1) &&연산자와 옵셔널 체이닝 비교

let user = {
  a:{
    num:1,
    name:"yeon"
  }
}
console.log(user&&user.a&&user.a.name) ///yeon
console.log(user?.a?.name) ////yeon

옵셔널 체이닝 사용

옵셔널 체이닝은 중첩 객체문에서 ?. 을 사용하여 해당 프로퍼티가 존재하는지 확인 할 수 있다. (일반 객체에선 사용X...!!)

.? 의 앞 대상자를 평가하고 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

let user = {
  a:{
    num:20,
    name:"yeonju"
  }
}
console.log(user?.b?.name) ///?. 앞에 있는 평가대상자 b가 없어 user.undefined이기 때문에  undefined 반환.

.?를 계속 연결해서 사용하면 중첩 프로퍼티에 접근할 수 있고 직관적이라서 사용하기도 쉽다.

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND
https://ko.javascript.info/logical-operators
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND