JS : Optional chaining, Nullish coalescing

🤔 들어가기 전

JavaScript 신문법?! 나온지 꽤 됐지만 정리해 보자!

---

Optional chaining

🧑‍🏫 참고 자료
MDN Optional chaining

Optional chaining 연산자는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성값을 읽을 수 있다.

만약 참조한 값이 null 또는 undefined라면 에러가 발생하지 않고 undefined를 반환한다.

✨ 왼쪽의 값이 비어있으면 오른쪽이 실행 X → 즉, undefined 반환
✨ 중첩된 object에서 자료를 뽑을 경우 참조에러(reference)없이 안전하게 사용 가능

⚙️ 문법

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

✅ 예시

const person = {
  name: "홍길동",
  age: 32,
  // phone: {
  //   value: 1
  // }
};

// TypeError: Cannot read properties of undefined (reading 'value')
// 🚨 에러 발생! 코드 중단
console.log(person.phone.value);

// undefined
console.log(person.phone?.value);

Nullish coalescing

🧑‍🏫 참고 자료
MDN Nullish coalescing operator

Nullish coalescing operator는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

✨ 만약 왼쪽 표현식이 null 또는 undefined인 경우, 오른쪽 표현식의 결과를 반환한다.
✨ 리액트에서 서버에게 데이터가 늦는 경우 해당 값이 없어 에러가 발생한다. 이런 경우 ??을 사용하여 데이터를 기다리는 동안 다른 값을 보여주면 된다.

🛑 차이점
OR 연산자 ||은null 또는 undefined 뿐만 아니라 falsy값 전부를 검사하지만 Nullish coalescing ??은 undefined와 null같은 nullish만 검사하는 연산자이다.

⚙️ 문법

leftExpr ?? rightExpr

✅ 예시

console.log(data.name.id ?? "로딩중");