[자바스크립트] 논리 널 병합 할당. ??

논리 널 병합 할당(Logical nullish assignment)은 null 또는 undefined인 값에 대해서만 할당을 수행하는 새로운 할당 연산자입니다. 기존의 할당 연산자(=)와 비슷하지만, 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자의 값을 할당합니다.

왜 논리 널 병합 할당을 사용해야 할까요?

• 간결한 코드: 기존의 if 문이나 삼항 연산자를 사용하여 null 또는 undefined 값을 처리하는 코드를 더욱 간결하게 작성할 수 있습니다.
• 명확한 로직: 코드의 의도를 명확하게 드러내어 가독성을 높입니다.
• 기본값 설정: 변수에 기본값을 설정할 때 유용하게 활용할 수 있습니다.

논리 널 병합 할당 사용법

let x;
x ||= 10; // x가 null 또는 undefined일 때만 10으로 할당
console.log(x); // 10

let y = 5;
y ||= 10; // y는 이미 값이 있으므로 할당되지 않음
console.log(y); // 5

 

 

 

논리 널 병합 할당 활용 예시

• 옵셔널 체이닝과 함께 사용:

  const user = {};
  user.address ??= { city: '서울' };
  

• 함수 파라미터:

  function greet(name) {
    name ??= '익명';
    console.log(`안녕하세요, ${name}님!`);
  }

• 기본값 설정:

  const config = {};
  config.port ??= 8080;
  

논리 널 병합 할당 주의사항

• 호환성: 모든 브라우저에서 지원되는 것은 아니므로, 이전 버전의 브라우저를 지원해야 하는 경우 폴리필을 사용해야 합니다.
• 단순 비교: null 또는 undefined만을 판단하며, 다른 값에 대한 복잡한 조건은 if 문 등을 사용해야 합니다.

다양한 활용 예시

1. 기본값 설정:

let config = {};
config.port ??= 3000; // port가 null 또는 undefined이면 3000으로 설정

let user = {};
user.name ??= '익명';

2. 옵셔널 체이닝과 함께 사용:

const data = { user: { address: { city: '서울' } } };
const city = data?.user?.address?.city ?? '알 수 없음';

3. 조건부 로직:

let result;
const condition = true;
result ??= condition ? '참' : '거짓'; // condition이 true이면 result에 '참' 할당

4. 배열 요소 할당:

const numbers = [1, 2, , 4]; // 3번째 요소가 undefined
numbers[2] ??= 3;
console.log(numbers); // [1, 2, 3, 4]

5. 함수 파라미터:

function greet(name) {
  console.log(`안녕하세요, ${name ?? '친구'}님!`);
}
greet(); // 안녕하세요, 친구님!

6. 객체 프로퍼티 할당:

const person = {};
person.age ??= 20;

실제 개발 환경에서의 활용

• React 상태 관리: 초기 상태를 설정하거나, 상태 업데이트 시 null 또는 undefined 값을 처리할 때 유용합니다.
• API 응답 처리: API에서 받은 데이터가 null 또는 undefined일 경우 기본값을 설정할 때 사용합니다.
• 옵션 설정: 함수의 옵션을 처리할 때 기본값을 설정하는 데 활용합니다.
• 데이터 변환: 데이터를 변환하는 과정에서 null 또는 undefined 값을 처리할 때 사용합니다.

주의사항 및 추가 설명

• 얕은 복사: 객체를 할당할 때는 얕은 복사가 이루어집니다. 깊은 복사가 필요한 경우에는 structuredClone 함수나 lodash의 cloneDeep 함수 등을 사용해야 합니다.
• 호환성: 모든 브라우저에서 지원되는 것은 아니므로, 이전 버전의 브라우저를 지원해야 하는 경우 폴리필을 사용해야 합니다.
• **nullish coalescing operator와||=연산자의 차이점을 명확히 이해해야 합니다. ||= 연산자는 falsey 값(false, 0, '', null, undefined, NaN)에 대해 작동하지만, ??= 연산자는 null 또는 undefined에 대해서만 작동합니다.