옵셔널 체이닝

옵셔널 체이닝

• 정의되지 않은 객체의 프로퍼티(속성)에 접근할 떄 에러를 반환하지 않고 undefined를 할당하여 프로그램이 종료 되지 않고 남은 로직을 처리 할 수 있도록 하는 문법

기본 문법

• 아무런 프로퍼티도 정의되지 않은 빈 객체 선언
• person 객체에 선언되지 않은 name.firstName프로퍼티 호출 시 에러 발생

//아무 프로퍼티도 정의 되지 않은 빈 객체 선언
const person = {}

//person 객체에 선언되지 않은 name.firstName 프로퍼티에 접근시 에러발생
console.log( person.name.firstName)

//?.옵셔널 체이닝 문법으로 왼쪽에 있는 객체를 평가함
console.log(person?.name?.firstName)

• 옵셔널 체이닝 문법 ?. 을 통해 프로퍼티를 호출하게 되면 ?. 왼쪽에 있는 객체를 평가하고 평가한 객체가 falsy 값이면 다음 ?. 에러를 반환하지 않고 undefined를 할당함

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

• 옵셔널 체이닝은 falsy 값이 선택적으로 들어올 수 있거나 명시적으로 선언되지 않은 객체를 평가할 때 사용해야함

const animal = {cat : 'miumiu'}

console.log(animal?.dog) //undefind
console.log(animal?.cat) //miumiu

• ?. 왼쪽 평가 대상에 값이 없으면 ?.오른쪽에 위치하는 평가대상은 평가를 하지 않고 멈춤 => 단락평가
• 변수 justvariable에 명시적으로 선언된 null falsy 값을 갖기 떄문에 다음 평가 대상인 value()를 평가하지 않고 undefined를 반환함

const justvariable = null
const value = () =>{ console.log('여기는 실행되지 않음')}
//justvariable의 변수에는 falsy값인 null이 할당되어 있기때문에 value에 할당한 함수는 실행되지 않음
console.log(justvariable?.value()) //undefined

프로퍼티 접근 권한

• 옵셔널 체이닝으로 프로퍼티 접근 시 읽기 및 삭제만 가능 쓰기는 불가능
• 존재하지 않는 프로퍼티를 delete 해도 true 반환

const animal = {cat : 'miumiu' , horse:'히이잉'}

console.log(delete animal?.cat)//true
console.log(delete animal?.dog)//true
console.log(animal)

• 새로운 프로퍼티를 할당하는 것은 오류발생

console.log(animal?.rabbit = '강총')

접근방법 3가지

• 객체 프로퍼티에 접근하기
• 객체 인덱스 호출로 접근하기
• 선언된 메서드에 접근하기

const animal = {cat : 'miumiu' , horse: () => {console.log('히이잉')}}
//첫번쨰
animal?.cat
//두번쨰
animal?.['cat']
//세번쨰
animal?.horse?.()

한줄 요약

• 명시적으로 선언되거나 falsy 값이 들어 올 수 없는 자리에는 ?.를 사용하지 않는 것

const animal = {cat : 'miumiu' , horse: () => {console.log('히이잉')}}

//animal은 명시적으로 선언되었기 때문에 옵셔널 체이닝 사용 x
//cat 프로퍼티는 상황에 따라 falsy 값이 할당 될 수도 있고 아닐 수도 있음
//falsy 일때는 undefined를 할당하여 에러를 반환하지 않고 아닌 경우에는 color프로퍼티 까지 호출하여 코드진행

animal.cat?.color