옵셔널 체이닝

옵셔널 체이닝은 연산자에 사용 가능하며, 연산자 왼쪽의 값을 평가합니다. 만약 평가된 결과가 null, undefined라면 undefined를 반환합니다.

옵셔널 체이닝의 용도

1. 에러 방지

중첩된 객체의 프로퍼티에 접근하려다 해당 객체가 undefined 또는 null인 경우, 접근 시도는 에러(TypeError)를 발생시킵니다.

  let user = {}; // 중첩된 객체 프로퍼티 없음
  console.log(user.address.street); 

2. 브라우저 환경에서의 안전성

브라우저에서 DOM 요소에 접근하거나 존재하지 않는 프로퍼티에 접근하려는 경우에도 문제가 발생할 수 있습니다.

	let html = document.querySelector('.non-existent').innerHTML; 

옵셔널 체이닝의 문법

옵셔널 체이닝은 객체가 null 또는 undefined인지 확인한 후, 그렇지 않은 경우에만 접근을 시도합니다. 이를 통해 코드가 간결하고 읽기 쉬워집니다.

1. 프로퍼티 접근

  let user = {};
  console.log(user?.address?.street); // undefined

2. 함수 호출

옵셔널 체이닝을 함수와 함께 사용하여, 해당 함수가 존재할 경우에만 호출합니다.

  let user1 = {
    greet() {
      console.log("Hello!");
    },
  };
  let user2 = {};

  user1.greet?.(); // "Hello!"
  user2.greet?.(); // 아무 일도 일어나지 않음

3. 배열 및 대괄호 표기법

옵셔널 체이닝은 배열이나 대괄호 표기법과도 함께 사용할 수 있습니다.

  let user = { name: "Alice" };
  let key = "name";

  console.log(user?.[key]); // "Alice"
  console.log(user?.[key]?.nonExistent); // undefined

4. 삭제 연산자

옵셔널 체이닝은 delete와도 함께 사용할 수 있습니다.

  let user = { name: "Alice" };
  delete user?.name; // user.name을 삭제

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

1. 쓰기 불가능

옵셔널 체이닝은 읽기와 삭제에는 사용할 수 있지만, 할당(쓰기)에는 사용할 수 없습니다.

  user?.name = "Alice"; 
  // SyntaxError: Invalid left-hand side in assignment

2. 남용 금지

옵셔널 체이닝은 존재하지 않아도 괜찮은 값에만 사용해야 합니다. 꼭 존재해야 하는 값인데 옵셔널 체이닝을 사용하면, 오류를 발견하기 어려워 디버깅이 어려워질 수 있습니다.

  let user = null;
  console.log(user?.address?.street); // undefined
// 논리적으로 user는 반드시 있어야 하는 상황이라면, 이 코드는 문제를 감춥니다.

Nullish Coalescing

변수가 null이나 undefined일 때 기본값을 설정해주는 연산자

왼쪽 값이 null 또는 undefined일 경우 → 오른쪽 값을 반환합니다.

그렇지 않으면 → 왼쪽 값을 반환합니다.

  const result = value1 ?? value2;
  // value1이 null 또는 undefined이면 value2를 반환.
  // 그렇지 않으면 value1을 반환.

1. 기본값 설정

변수가 null 또는 undefined일 때 기본값을 준다.

  const name = null;
  const displayName = name ?? "Anonymous";
  console.log(displayName); // "Anonymous"

2. 숫자와 함께 사용하기

0은 null이나 undefined가 아니므로 기본값이 적용되지 않습니다. 이는 ||와의 차이점 중 하나입니다.

  const userScore = 0;
  const score = userScore ?? 50;
  console.log(score); // 0

3. 환경 변수 처리

환경 변수가 정의되지 않은 경우 기본값을 제공하는 데 유용합니다.

	const port = process.env.PORT ?? 3000;
	console.log(port); // 환경 변수 PORT가 없으면 3000 반환

4. 옵셔널 체이닝과 함께 사용하기

?.와 결합하면 안전한 속성 접근과 기본값 제공을 동시에 할 수 있습니다.

  const user = null;
  const userName = user?.name ?? "Anonymous";
  console.log(userName); // "Anonymous"

5. 주의할 점

??**와 **||를 혼용할 수 없음

||와 ??는 함께 사용할 수 없으므로 괄호를 사용해 명확하게 구분해야 합니다.

const result = null || null ?? "default"; // SyntaxError
const resultFixed = (null || null) ?? "default"; // "default"

6. 우선순위

??의 우선순위는 비교적 낮기 때문에 다른 연산자와 함께 사용할 때는 괄호를 사용해 우선순위를 명시하는 것이 좋습니다.

실무에서의 활용 예시

  
	//환경 설정
  const config = {
    apiEndpoint: process.env.API_ENDPOINT ?? "https://default-api.com",
    port: process.env.PORT ?? 8080,
  };

  console.log(config);

  //사용자 입력 처리

  function greet(userInput) {
    const name = userInput ?? "Guest";
    console.log(`Hello, ${name}!`);
  }


  greet(null); // "Hello, Guest!"
  greet("Alice"); // "Hello, Alice!"

7. 결론

Nullish Coalescing 연산자(??)는 JavaScript에서 기본값을 처리하는 강력하고 직관적인 도구입니다. 특히, null이나 undefined만 처리하고 싶을 때 ||보다 명확하고 정확한 동작을 제공합니다.