?. << 옵셔널 체이닝이란?.

최근 처음보는 문법(?)을 만났다.

조건문이 아닌 것 같은데 js 구문에 ?. 가 포함되어있는 것.

 

최근에 추가된 js 문법구조체 라는 것을 알게 되었다.

 

1. ?. 의 의미

  - 프로퍼티가 없는 중첩객체를 에러 없이 안전하게 접근 할 수 있도록 하는 문법 구조체이다.

  - 쉽게 말하면 null, undefined 값으로 읽혀 error메시지가 뜨는 상황을 undefined로 처리하여 에러메시지 없이 처리할 수 있도록 해주는 것이다. 

 

예시를 보자.

let values = null;
console.log(values.value);
console.log('hello');

values 라는 변수에 임의로 null 값을 넣었다.

그런데, 내가 values라는 객체에 있지도 않은 value 키값을 읽어와 달라고 하면 어떻게 될까?

type error가 뜬다. 니가 원하는 value는 null값이라는 것이다..!

게다가 그 밑에 있던 'hello' 값은 출력하지도 않는다. 에러메시지가 뜨는 그 줄에서 랜더링을 멈추기 때문.

 

그런데 나는 그것을 알면서도

에러메시지 띄우지 않고 일단 작업을 진행해보고 싶다. 

그래서 옵셔널 체이닝을 사용해 본다.

 

let values = null;
console.log(values?.value);
console.log('hello');

그러면 결과값은 

undefined 를 출력하고 그 아래에 있던 hello 문자열도 출력해준다.

 

 

2. 옵셔널 체이닝은 왜 필요한가?

 - 즉, null 값인 경우가 대체 왜 존재해야 하냐는 것이다. 사용하면 안되는 것 아닌가..?

 - 라고 하기에는 경우의 수가 너무 많았던 것. 

 - 예를 들어, 사용자의 데이터를 받아오는데 그중에 몇몇의 주소값이 없는 상태인 것이다.

 - 이런 경우에는 객체 내의 주소값을 불러오라고 할 경우 왜 없는 값을 내놓으라고 하느냐!! 라며 에러를 뺴액 뱉어낼 수도 있는 것이다.

 

 이 문법구조체가 고안 되기 전에는 다음과 같은 방식으로 객체나 프로퍼티가 있는지 확인 했다고 한다. 

let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

// 출처 https://ko.javascript.info/optional-chaining

이 길고 긴 코드를 ?. 라는 단순한 명령어로 고쳐버린 것이다. 

 

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

이렇게 말이다.

 

 

3. 주의사항 

 - 당연한 이야기겠지만 무턱대고 옵셔널 체이닝을 적용 하면 안된다. 

 - 진짜로 null 값이 존재해도 '괜찮은' 경우에만 사용 해야 한다. 

 - 디버깅이 어려워지기 때문이다.

 - ?. 왼쪽에 있는 변수는 선언된 상태이어야 한다.

     user?.adress 를 사용하고 싶다면 ?. 앞에 있는 user는 변수로 선언되어 있어야 한다는 이야기.

 

 

4. 함수, 객체의 프로퍼티에 접근 하는 것이 가능하다.

 

 ** 함수에 접근할 때**

const testValue = {
  newFunc() {
    console.log('안녕안녕?');
  }
}

const testValue2 = {};

testValue.newFunc?.();
testValue2.newFunc?.();

 

** 객체의 프로퍼티에 접근 할 때 **

const food = {
  love: '초콜릿',
  hate: '콩국수',
};

const food2 = null;

let key = 'hate';

console.log(food?.[key]);    // 콩국수 출력
console.log(food2?.[key]);   // undefined 출력

 

 

 

 

 

** 참고 링크 ** 

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

http://jojoldu.tistory.com/721

3. 좋은 함수 만들기 - Null 을 다루는 방법