자바스크립트 단축 연산자 끝판왕! 논리 AND 할당 연산자 `&&=` 와 Null 병합 할당 연산자 `??=` 로 코드 깔끔하게 정리하기

자바스크립트 단축 연산자 끝판왕! 논리 AND 할당 연산자 &&= 와 Null 병합 할당 연산자 ??= 로 코드 깔끔하게 정리하기

자바스크립트 개발하면서 변수에 값 할당할 때, 특히 조건부 할당이나 기본값 설정할 때 코드가 길어지고 복잡해지는 경험, 다들 있으시죠?

 

ES2021에 새롭게 등장한 &&=와 ??= 연산자는 이런 고민을 깔끔하게 해결해주는 멋진 도구입니다.

 

마치 마법처럼 짧고 간결하게 코드를 작성할 수 있도록 도와주는데요.

 

이번 포스팅에서는 &&=와 ??= 연산자를 사용하는 방법과 각각의 장점, 그리고 실제 활용 예시까지 자세하게 알아보겠습니다.

 

 

1. &&= 연산자: 조건부 할당의 마법사

 

&&= 연산자는 논리 AND 연산자(&&)와 할당 연산자(=)가 합쳐진 형태입니다.

 

기존 값이 참(truthy)인 경우에만 새로운 값을 할당하고, 거짓(falsy)인 경우에는 기존 값을 그대로 유지합니다.

 

복잡한 if 문이나 삼항 연산자 없이도 간결하게 조건부 할당을 처리할 수 있는거죠.

let access = true;
access &&= 'granted';    // access는 'granted'가 됩니다.

access = false;
access &&= 'granted';    // access는 false로 유지됩니다.

access = '';
access &&= 'granted';    // access는 빈 문자열로 유지됩니다.

access = 0;
access &&= 'granted';    // access는 0으로 유지됩니다.

function updateUserAccess(user) {
  // 이미 권한이 존재하는 경우에만 업데이트합니다.
  user.canEdit &&= checkPermissions();
  user.canDelete &&= checkAdminStatus();

  return user;
}

// 기존 if 문 방식
let hasPermission = true;
if (hasPermission) {
  hasPermission = checkAdminStatus();
}

// &&= 연산자 사용
let hasPermission = true;
hasPermission &&= checkAdminStatus();

 

훨씬 깔끔하죠?

 

hasPermission 값이 true 인 경우에만 checkAdminStatus() 함수의 결과값이 할당됩니다.

 

false, 0, 빈 문자열(''), null, undefined, NaN 과 같은 falsy 값인 경우에는 아무런 변화도 일어나지 않습니다.

 

&&= 연산자는 애플리케이션 상태 관리 및 유효성 검사에도 유용하게 활용할 수 있습니다.

const form = {
  isValid: true,
  isSubmitted: false,
  hasErrors: false
};

// 폼이 현재 유효한 경우에만 유효성 검사를 실행합니다.
form.isValid &&= validateFields();     // 유효성 검사 실행
form.isSubmitted &&= submitToServer(); // 유효하지 않으면 건너뜁니다.
form.hasErrors &&= checkErrors();      // false 상태를 유지합니다.

 

API 응답 패턴에도 적용할 수 있습니다.

const response = {
  isAuthenticated: true,
  hasPermission: true,
  isExpired: false
};

// 이전 검사를 통과한 경우에만 각 검사를 실행합니다.
response.isAuthenticated &&= validateToken();
response.hasPermission &&= checkAccess();
response.isExpired &&= checkExpiration(); // 권한이 없으면 false 상태를 유지합니다.

 

2. ??= 연산자: null과 undefined 처리 전문가

 

자바스크립트의 null 병합 할당 연산자 ??=는 비교적 최근에 추가된 기능입니다. ES2021(ES12)에서 "논리 할당 연산자"라는 이름으로 정식으로 소개되었죠.

 

??= 연산자는 변수의 값을 감시하는 똑똑한 보디가드라고 생각하면 됩니다.

 

현재 값이 null 또는 undefined인 경우에만 새로운 값을 할당하죠.

 

기존 방식과 비교해 보면 다음과 같습니다.

// 기존 방식 (2021년 이전)
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// Null 병합 연산자 (??) 사용
user.name = user.name ?? 'Anonymous';

// 새로운 방식 (ES2021 이후)
user.name ??= 'Anonymous';

 

user.name ??= 'Anonymous'처럼 사용하면, ??= 연산자는 먼저 user.name이 null 또는 undefined인지 확인합니다.

 

만약 null 또는 undefined인 경우에만 'Anonymous'를 할당하고, 빈 문자열이나 0을 포함한 다른 값이 있는 경우에는 기존 값을 그대로 유지합니다.

 

 

??= 연산자가 기존 방식보다 좋은 이유

 

??= 연산자 이전에도 기본값을 처리하는 여러 가지 방법이 있었지만, 각각 단점이 있었습니다.

 

다음과 같이 비교해 보겠습니다.

// if 문 사용 - 장황하고 반복적입니다.
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// || 연산자 사용 - 너무 많은 경우를 처리합니다.
user.name = user.name || 'Anonymous';  // '', 0, false도 'Anonymous'로 바뀝니다.

// 삼항 연산자 사용 - 표현식이 길어지면 복잡해집니다.
user.name = user.name === null || user.name === undefined
  ? 'Anonymous'
  : user.name;

// ??= 연산자 사용 - 깔끔하고 정확합니다.
user.name ??= 'Anonymous';

 

??= 연산자는 이전에는 불가능했던 정밀함을 제공합니다.

 

진짜로 값이 없을 때만 작동하기 때문에 0, 빈 문자열, false가 유효한 데이터인 경우에 매우 적합합니다.

let score = 0;
score ??= 100;    // 0을 유지합니다.

let tag = '';
tag ??= 'default'; // 빈 문자열을 유지합니다.

let active = false;
active ??= true;   // false를 유지합니다.

 

이러한 정밀성 덕분에 더 광범위한 검사를 사용할 때 발생할 수 있는 버그를 방지할 수 있습니다.

 

사용자 인터페이스를 구축하거나 폼 데이터를 처리할 때, 거짓 값을 기본값으로 바꾸는 대신 유지해야 하는 경우가 많습니다.

 

??= 연산자는 이러한 상황에서 매우 유용하게 사용될 수 있습니다.

 

 

4. 정리하며

 

&&= 와 ??= 연산자는 자바스크립트 코드를 더욱 간결하고 명확하게 만들어주는 유용한 도구입니다.

 

코드 가독성 향상은 물론, 버그 발생 가능성도 줄일 수 있을 것입니다.

---