[ 연산자와 구문 ] 선택적 체이닝

//  선택적 체이닝 (Optional Chaining)

const user = {}

console.log(user.name)  //  객체 내부에 없는 속성 (key) 를 조회 하므로, undefined 출력.

const test = null
// console.log(test.name)  //  Uncaught TypeError : Cannot read properties of null

const test2 = undefined
// console.log(test2.name) //  Uncaught TypeError : Cannot read properties of undefined

//  위와 같이 null 또는 undefined 는 점 표기법으로 속성을 조회 할 수 없다. (당연)
//  그래서 이런 경우에 선택적 체이닝 이라는 개념을 사용 할 수 있다.
//  이때, 사용하는 문법은 점 표기법의 마침표 앞에다가 물음표 ( ? ) 기호를 명시 한다.

console.log(test?.name) //  undefined
console.log(test2?.name)    //  undefined

//  위와 같이 점 ( . ) 앞에 물음표 ( ? ) 를 붙혀줌으로써,
//  에러가 발생 하지 않고, undefined 가 출력 된다.

 

 

 

 

//  선택적 체이닝 개념을 언제 사용 하면 좋을지, 아래에 예시를 통해 확인 하기.

const userA = {
    name: 'Hwanii',
    age: 28,
    address: {
        country: 'Korea',
        city: 'Suwon'
    }
}

const userB = {
    name: 'Calm',
    age: 96
}

function getCity(user) {    //  도시명을 받을 함수 작성
    return user.address.city
}

console.log(getCity(userA)) //  Suwon

//  userB의 객체 내부에는 address 라는 속성이 없어서 발생 하는 에러.
//  console.log(getCity(userB)) //  Cannot read properties of undefined 에러 발생 !

//  이것을 방지 하기 위해서 함수 내부의 코드를 아래와 같이 변경 할 수 있다.

function getCityUpgrade(user) { //  선택적 체이닝 개념을 추가
    return user.address?.city
}

console.log(getCityUpgrade(userA))  //  Suwon (당연히 address 속성이 있으므로 OK)

console.log(getCityUpgrade(userB))  //  undefined

//  이렇게 물음표 기호를 마침표 기호 ( . ) 앞에다가 붙혀서
//  혹시라도 address가 null 또는 undefined 이면,
//  city를 실행 하지 않고, 바로 undefined 를 반환 하도록 한다.

//  따라서, 이렇게 기본적인 어떤 객체 데이터 내부에
//  어떤 속성의 데이터가 없을 때,
//  다양한 상황에 데이터를 취급 할 때,
//  에러가 발생하는 것을 방지하여 예외를 처리 하는 것 이다.

//  그리고, 이렇게 예외를 처리 함과 동시에,
//  또는 연산자 ( || ) 를 같이 활용 하여, 사용자 편의성을 향상 시킬 수 있다.

function getCityUpgrade2(user) {
    return user.address?.city || '주소가 없습니다 !'
}

console.log(getCityUpgrade2(userB)) //  주소가 없습니다 !

 

 

 

 

//  [ 복습 ]
//  위의 함수의 인자로 userA 객체가 들어오면,
//  userA 객체의 address 속성의 city 속성의 값은 'Suwon' 이다.
//  문자열 데이터인 'Suwon' 은 true 데이터 이기 때문에,
//  결과적으로 Suwon 을 반환 한다.

//  근데, 만약에 함수의 인자로 userB 객체 들어오면 어떻게 될까 ?
//  userB 객체의 address 속성은 존재 하지 않으므로,
//  선택적 체이닝 표기법으로 인해 ( ? ) 해당 데이터는 undefined 가 된다.
//  undefined 는 false 데이터 이기 때문에,
//  || 또는 연산자는 가장 맨 처음 나오는 true 데이터를 반환 한다고 했었다.
//  따라서, '주소가 없습니다 !' 는 문자열 데이터 이고,
//  즉, true 데이터 이기 때문에, 해당 데이터가 출력 된다.

 

 

 

//  주의사항 : 선택적 체이닝은 남용 하면 안된다.
//  위의 상황 처럼, name 과 age는 모든 객체의 기본 속성 이지만,
//  address 속성은 있을 수도 ~ 없을 수도 ~ 의 상황 이기 때문에,
//  이런 경우에만 선택적 체이닝을 사용 한다.

//  일반적인 경우에는 선택 체이닝을 남용 하지 않고, 꼭 필요한 경우에만 사용 하도록 한다.