[JS] 자바스크립트 코드중 보이는 `?. ` 이게뭐죠 - 옵셔널 체이닝

* 미리 말하고 가자면 옵셔널 체이닝은 스펙에 추가 된 지 얼마 안된 문법으로 구식 브라우저에서는 폴리필이 필요합니다. *

 

사건의 개요 

- 프로젝트 진행중 user정보의 length값으로 처리해주어야 할 코드가 있었다. 이때 user정보가 잘 들어왔을경우는 괜찮은데 . . . user정보가 없을때 length를 접근하려 하면 에러가 떳다. 

 

그래서 나는 일단 아래와 같이 코드를 짯다. 

const userLength ;
if (user) {
	userLength = user.length;
}
else {
	userLength = null;
}

//len값을 사용 . . .

 

그런데 여기서 구글링을 통해 옵셔널 체이닝이라는것을 발견했다!

 

---

 

옵셔널 체이닝 ? 

 

-  ?. 를 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 

 

- 또한 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 할때 역시 문제가 발생하는데 이를 해결하기 위해 사용된다.

 

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

 

---

따라서 이 옵셔널 체이닝을 이용하여 코드를 작성해보면,

const userLength = user?.length;

요렇게 아주 간단해진다!

 

 

---

 

 

옵셔널 체이닝 사용시 주의사항

 

1. 옵셔널 체이닝을 남용하지말자! 

 

- 옵셔널체이닝은 존재하지 않아도 괜찮은 대상에게만 사용해아한다. 예를들어 아래의 값에 접근한다고 가정해보자.

user.info.image

여기서 꼭 필요한 값은 user이다. 하지만 info는? 꼭 필요한 값이 아니다.

따라서 옵셔널 체이닝을 사용할 때에는 아래와 같이 사용하자!

user.info.?image

 

 

2. ?. 앞의 변수는 꼭 선언되어있어야 한다!

 

- 만약 위의 예제에서 user가 선언되어있지 않으면 에러가 발생한다!

ReferenceError: user is not defined

 

3. ?. 는 읽기나 삭제에 사용가능하지만 쓰기에는 사용할 수 없다. 

 

---

그밖에  ?.()  와 ?.[ ]

 

- ?.는 연산자가 아닌 함수나 대괄호와 함께 동작하는 문법 구조체이다.

 

- 존재여부가 확실하지 않은 함수를 호출할 때에는 다음과 같이 사용한다.

let sayHi = {
	Hi(){
    	console.log("하이!")
    }
}

let sayNull = {} ;

sayHi.Hi?.();  // "하이!"
sayNull.Hi?.(); // 에러없음

 

 

- 존재여부가 확실하지 않은 객체 프로퍼티에 접근하는 경우 다음과 같이 사용한다. 

let Food = {
	one : "Pizza";
}

let Drink = null;

const food = Food?.[one]; // Pizza
const drink = Drink?.[one] // undefined

 

 

---

옵셔널 체이닝을 알고 나서 코드짜기 훨씬 수월해졌다! 아직은 지원이 안되는 곳이 많지만 잘 알아둬야징 ㅎㅡㅎ

 

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