[자바스크립트] null 병합 연산자

null 병합 연산자란 무엇일까요?

null 병합 연산자 ??는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하는 논리 연산자입니다. 즉, 왼쪽 값이 "없는" 값일 때만 오른쪽 값을 사용하겠다는 의미입니다.

왜 null 병합 연산자가 필요할까요?

• 기존의 || 연산자와의 차이:
  • || 연산자는 왼쪽 값이 falsy 값(false, 0, '', null, undefined, NaN)일 때 모두 오른쪽 값을 반환합니다.
  • ?? 연산자는 오직 null 또는 undefined일 때만 오른쪽 값을 반환합니다.
• 명확한 의도 표현:
  • ?? 연산자를 사용하면 코드의 의도를 더 명확하게 나타낼 수 있습니다. 특히 0이나 빈 문자열과 같은 falsy 값을 유효한 값으로 간주해야 하는 경우에 유용합니다.

// null 또는 undefined일 때만 기본값 할당
const name = null;
const displayName = name ?? 'Anonymous'; // displayName은 'Anonymous'가 됩니다.

// 0이나 빈 문자열은 유효한 값으로 간주
const count = 0;
const result = count ?? 5; // result는 0이 됩니다.

// 객체의 프로퍼티 존재 여부 확인
const user = { name: 'Alice' };
const address = user?.address?.street ?? 'Unknown'; // address가 undefined이면 'Unknown'

null 병합 연산자의 활용

• 기본값 설정: 변수에 초기값을 할당할 때 유용합니다.
• 옵셔널 체이닝과 함께 사용: 객체의 프로퍼티에 안전하게 접근할 때 활용합니다.
• 조건문 간소화: 조건문을 더 간결하게 표현할 수 있습니다.

null 병합 연산자와 함께 알아두면 좋은 것들

• 단축 평가: ?? 연산자도 단축 평가를 수행합니다. 즉, 왼쪽 피연산자가 null 또는 undefined가 아니면 오른쪽 피연산자는 평가되지 않습니다.
• 타입스크립트: 타입스크립트에서 ?? 연산자는 null과 undefined를 제외한 모든 타입에 대해 사용할 수 있습니다.
• 옵셔널 체이닝 (?.)과의 조합: ?? 연산자는 옵셔널 체이닝과 함께 사용하여 더욱 강력한 표현이 가능합니다. 예를 들어, user?.address?.street ?? 'Unknown'처럼 사용하여 중첩된 객체의 프로퍼티에 안전하게 접근하고, 존재하지 않을 경우 기본값을 설정할 수 있습니다.

왜 null 병합 연산자를 사용해야 할까요?

• 코드 가독성 향상: 코드를 더욱 간결하고 명확하게 만들어줍니다.
• 에러 방지: null 또는 undefined 값에 대한 예외 처리를 줄여줍니다.
• 생산성 향상: 반복적인 코드를 줄여 개발 시간을 단축시켜줍니다.

결론

null 병합 연산자는 자바스크립트 개발에서 필수적인 도구가 되었습니다. 특히 null 또는 undefined 값을 처리하는 로직을 작성할 때 유용하게 활용할 수 있습니다. 옵셔널 체이닝과 함께 사용하면 더욱 강력한 표현이 가능하며, 코드의 품질을 향상시킬 수 있습니다.

더 궁금한 점이 있다면 언제든지 질문해주세요.

다음과 같은 질문을 해주시면 더욱 자세한 답변을 드릴 수 있습니다.

• 특정 상황에서의 사용 예시: "배열의 첫 번째 요소가 존재하지 않을 때 기본값을 설정하려면 어떻게 해야 할까요?"
• 다른 연산자와의 비교: "|| 연산자와 ?? 연산자의 차이점을 코드 예시와 함께 설명해주세요."
• 실제 프로젝트에서의 활용: "React에서 null 병합 연산자를 어떻게 활용하면 좋을까요?"