객체: 기본 - optional chaining ( ?. )

옵셔널 체이닝( ?. )은  프로퍼티가 없는 중첩객체에 에러 없이 접근하고 싶을 때 사용합니다!

let user1 = {
  name:{
    firstName: 'John',
    lastName: 'Lee'
  }
}
let user2 = {}

console.log(user2.name.firstName) // Cannot read properties of undefined

위 코드에서는 아직 이름 정보가 없는 객체에서 값을 가져오려 했기 때문에 에러가 발생했습니다.

 

옵셔널 체이닝이 등장하기 전에는 이런 에러를 막기위해

&&연산자를 사용했습니다.

let user1 = {
  name:{
    firstName: 'John',
    lastName: 'Lee'
  }
}
let user2 = {}

console.log(user2 && user2.name && user2.firstName) // undefined
에러는 막았지만 코드가 길어졌습니다.

에러는 막을 수 있었지만 AND를 연결할수록 코드가 매우 길어졌습니다.

위와 같은 예시가 옵셔널 체이닝이 필요한 이유 입니다.

 

 

optional chaining의 등장!

optional chaining ( ?. ) 은 앞에 있는 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 리턴합니다! 

let user1 = {
  name:{
    firstName: 'John',
    lastName: 'Lee'
  }
}
let user2 = {}

console.log(user2?.name?.firstName) // undefined

옵셔널 체이닝은 존재하지 않아도 되는 대상에만 사용해야 합니다.

 

위와 같은 예시에서 만약 user2가 필수로 존재해야 하는 값이라면,

user2.name?.firstName 처럼 사용해야

user2가 존재 하지 않을 때 에러를 통해 문제를 발견할 수 있습니다.

 

 

 

옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작합니다!

 

?. 앞의 값은 선언되어 있는 상태여야 합니다.

그렇지 않으면 에러가 발생합니다.

 

 

단락 평가

?.은 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다. 이런 평가 방법을 단락평가 라고 합니다.

때문에 ?. 의 평가가 종료되면  ?.의 오른쪽 코드들은 동작하지 않습니다.

 

 

메소드와 대괄호 에서도! (  ?.( )  ?.[ ]  )

옵셔널 체이닝 ?. 은

메소드를 호출할 때 ?.( ) 의 형태로 사용 가능합니다.

let user1 = {
  name: 'Lee',
  hi(){
    return `${this.name} hi!`
  }
}

let user2 = {};

console.log(user1.hi?.()); // Lee hi!
console.log(user2.hi?.()); // undefined

 

?.[ ] 의 형태로 대괄호 표기법과도 같이 사용할 수 있습니다.

let user1 = {
  name: 'Lee',
}

let user2 = {};

let key = 'name';

console.log(user1?.[key]) // Lee
console.log(user2?.[key]) // undefined

객체 프로퍼티에 접근할 때 점 표기법 대신 사용하는 대괄호 표기법에서 ?. 을 사용하는 것이 

보기에 어색해 보일 수도 있지만

?. 을 특별한 문법 구조체라고 생각하면 좋을 것 같네유

 

 

 

delete도 가능한 ?.

delete와도 조합해 사용할 수 있습니다.

let user1 = {
  name: 'Lee',
  age: 18,
}

let user2 = {};

delete user1?.name; // user1이 값이 있네요? name을 삭제합니다.
delete user2?.name; // 아무일도 일어나지 않습니다.

console.log(user1)  // {age:18}

 

 

쓰기는 불가능한 ?.

옵셔널 체이닝을 할당연산자 좌측에서 사용할 수 없습니다. ㅜㅜ

let user1 = {
  name: 'Lee',
  age: 18,
}

user1?.name = 'kim' // Uncaught SyntaxError: Invalid left-hand side in assignment

 

 

옵셔널 체이닝은 직관적이라 사용하기 쉽고,

체인을 만들어 중첩 프로퍼티에게 에러없는 접근을 가능하게 합니다.

 

꼭 있어야 하는 값에 사용 시 값이 없을 때, 에러가 발생하지 않아 디버깅을 어렵게 하기 때문에

반드시 값이 존재하지 않아도 되는 평가대상에만 사용해야 합니다!

 

 

 

 

기본이 중요하다!