[JS] ?.와 ?? 문법(Optional Chaining과 Nullish Coalescing Operator)

비슷하게 생겨서 헷갈릴 수 있는, 그리고 약간은 생소한 문법을 짚고 넘어가보자!

📌 ?. 문법(Optional Chaining)

옵셔널 체이닝이란 undefined 또는 null 값이 들어갔을 때, 오류를 방지하기 위한 방법이다.

오류를 띄우지 않고, undefined를 반환해준다.

 

⭐️ 사용하는 이유

JS를 사용하다보면 객체를 다루는 일이 많고, API를 이용해서 통신하다 보면 데이터의 구조가 복잡해진다.

const order = {
  orderId: "ORD123456",
  customer: {
    customerId: "CUST7890",
    name: "김철수",
    contact: {
      email: "chulsoo@example.com",
      phone: "010-1234-5678",
      address: {
        street: "서울특별시 강남구 테헤란로 123",
        city: "서울",
        zipCode: "06100",
        country: "대한민국"
      }
    }
  }
}

위처럼 보기만해도 복잡한 데이터들이 있다고 하자.

사는 도시가 어디인지에 접근하기 위해서는 다음과 같이 접근해야 한다.

order.customer.contact.address.city

 

객체의 속성을 점(.)으로 연결해서 접근하는 것을 체이닝이라고 한다.

위의 정보에서 만약 city가 null값이라면 접근했을 때 오류가 발생하게 된다.

 

⭐️ 사용방법

이런 오류를 방지하기 위해서 옵셔널 체이닝 문법을 사용한다.

order?.customer?.contact?.address?.city

 

중간에 undefined나 null 값이 있어도 오류를 반환하지 않는다.

 

중첩된 객체의 값을 찾다가 ?의 왼편의 값이 undefined나 null이라면 undefined를 반환하고,

값이 존재한다면 다음 프로퍼티의 값을 리턴해준다.

 

null 값일때 null을 반환하지 않고 undefined를 반환한다는 점을 잘 기억해두자!

---

📌 ?? 문법(Nullish Coalescing Operator)

Nullish 병합 연산자라고 부른다.

옵셔널 체이닝과 비슷하게 undefined나 null 값이 들어갔을 때, 오른쪽의 값을 반환한다.

⭐️ 사용하는 이유

흔히 OR 연산자(||)를 많이 사용한다.

하지만 OR 연산자에는 단점이 있다.

 

OR 연산자는 왼쪽의 값이 falsy 값이라면 오른쪽 값을 반환한다는 점이다.

🤔 falsy 값이란?
JS에서 false로 평가되는 값으로,
null, undefiend 이외에도 false, NaN, 0, 음수, "" 등이 해당한다.

 

이게 왜 단점이지?라는 생각을 할 수 있다.

const getTemperature = (temp) => {
	return temp || "온도측정불가";
}

console.log(getTemperature(16))		// 16
console.log(getTemperature(null))		// "온도측정불가"
console.log(getTemperature(undefined))		// "온도측정불가"
console.log(getTemperature(0))		// "온도측정불가"

측정 온도를 반환하는 메소드인 getTemperature가 있다고 해보자.

 

0도 또는 영하의 온도가 측정되면 "온도측정불가"라는 문구가 뜨게 된다.

의도하지 않은 동작이 일어나게 될 수 있다는 것이다.

⭐️ 사용방법

undefined 또는 null 값일때만 기본 값을 설정해주고 싶을 때 사용한다.

const getName = (name) => {
	return name ?? "GUEST";
}

 

사용자의 입력으로 빈문자열("")이나 0이 들어온 경우는 그대로 반환하고,

undefined나 null 일 때만 "GUEST"를 반환하게 된다.

---

📌 옵셔널 체이닝과 Nullish 병합 연산자를 조합해서 사용

기본값을 설정해 줄 때, 유용하게 사용할 수 있다.

const defaultCountry = order?.customer?.contact?.address?.country ?? '대한민국';

만약 사용자가 country 값을 입력하지 않아 null이나 undefined인 경우,

기본 값으로 '대한민국'을 지정해주는 예시이다.

 

잘 사용한다면 간결한 코드와 안정성 모두 가져갈 수 있는 문법이다.