[번역] 자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점

원문: https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/

일상적인 자바스크립트 프로그래밍에서 우리는 변수에 새로운 값을 할당하기 전에 해당 변수를 검사하는 코드를 자주 작성합니다. 이러한 검사는 특히 컴포넌트 props, 전역 설정, 또는 상태 객체를 다룰 때 반복적인 작업이 될 수 있습니다. 이때 논리 할당 연산자가 유용합니다. 이는 기존 로직을 변경하지 않고 일반적인 조건부 할당을 간소화하는 ES2021의 간단한 기능입니다.

논리 할당 연산자란 무엇인가요?

논리 할당 연산자는 논리 연산자(||, &&, 또는 ??)와 할당 연산자(=)를 결합한 단축 표현입니다. 이 연산자들은 일반적인 논리 표현식처럼 단락 평가를 수행합니다. 즉, 왼쪽 피연산자(operand)가 논리 테스트에 실패할 경우(즉, falsy, truthy 또는 nullish인 경우)에만 오른쪽 피연산자가 평가됩니다.

⚠️ 참고: 옵셔널 체이닝(?.)은 논리 할당의 왼쪽에 허용되지 않습니다. 구문 오류가 발생합니다.

// ❌ SyntaxError:
user?.settings ||= {};

옵셔널 체이닝은 속성 자체에 대한 참조가 아닌 속성 액세스의 결과를 반환합니다. 할당 대상은 참조(즉, 변수 또는 객체 속성)여야 하므로, 이는 유효한 자바스크립트 구문이 아닙니다.

논리 OR 할당 (||=)

falsy인 경우 할당

user.theme ||= 'light';

다음에 해당합니다.

if (!user.theme) {
  user.theme = 'light';
}

이 방법은 값이 초기화되지 않았을 때 기본값을 설정하는 데 유용합니다. 하지만 0, ‘’, 또는 false와 같은 값을 덮어쓰게 되는데, 이는 의도적으로 설정된 값일 수 있습니다.

기본값을 다루는 또 다른 방법 (함수 매개변수를 사용한 경우)자바스크립트의 기본 매개변수에 대한 제 포스트를 확인해 보세요.

논리 AND 할당 (&&=)

truthy인 경우 할당

user.isLoggedIn &&= checkPermissions(user);

다음에 해당합니다.

if (user.isLoggedIn) {
  user.isLoggedIn = checkPermissions(user);
}

이 기능은 기존에 truthy인 경우에 조건부로 값을 업데이트하는 데 유용합니다.

⚠️ 주의사항: &&= 연산자를 사용할 경우, 왼쪽 피연산자가 truthy일 때만 오른쪽 피연산자를 평가하며, 그 결과는 truthy이든 falsy이든 상관없이 할당됩니다.

let isEnabled = true;
isEnabled &&= false;
console.log(isEnabled); // false

원본 값(true)은 게이트 처럼 동작하지만, checkPermissions(또는 오른쪽 표현식)의 결과가 새로운 값이 됩니다. &&=는 기존 값을 유지하지 않고 이를 대체합니다.

Null 병합 할당 (??=)

nullish인 경우 할당 (null 또는 undefined)

settings.timeout ??= 3000;

다음에 해당합니다.

if (settings.timeout === null || settings.timeout === undefined) {
  settings.timeout = 3000;
}

이 연산자는 값이 실제로 누락된 경우에만 기본값을 할당하고 싶을 때 사용합니다. ||= 연산자와 달리, 0, false, ''와 같은 유효한 값을 유지합니다.

💡 더 알아보기

Null 병합 연산자에 대해 더 알고 싶다면, 기본값을 마스터하는 방법에 대해 작성한 글이 있습니다. 이 글은 확실히 당신의 프로그래밍 실력을 한 단계 업그레이드해 줄 것입니다.

논리 할당이 중요한 이유

이 연산자들은 단순히 문법적 편의 기능이 아닙니다. 이들은 특히 변경 가능한 상태를 다루는 현실의 문제를 더 안전하고 읽기 쉽게 처리합니다.

이 연산자들은 원본 객체나 변수를 직접 변경합니다. 이는 상태 기반 논리에서는 유용할 수 있지만, 불변 워크플로우(예: Redux)에서는 버그를 유발할 수 있습니다. 상태 이력을 유지해야 한다면 먼저 객체를 복사하세요.

컴포넌트 props 기본값 설정

props.showHelpText ??= true;

전역 상태 또는 설정의 덮어쓰기 방지

config.apiBase ||= '/api/v1';

의도치 않은 null/undefined 할당 방지

formData.username &&= formData.username.trim();

유의할 점

• ||= 연산자는 왼쪽 피연산자가 falsy(0, ‘’, false 등)일 때 할당을 수행하며, 이는 유지해야 할 값일 수 있다는 점입니다.

let count = 0;
count ||= 10; // count를 10으로 덮어씁니다. 주의하세요!

• ??= 연산자를 사용하면 null 또는 undefined에 대해서만 방어하고 유효한 falsy값을 유지할 수 있습니다.
• 오른쪽 표현식은 필요할 때만 평가되므로 성능을 유지하고 사이드 이펙트를 방지합니다.

config.apiKey ||= fetchApiKey(); // fetchApiKey()는 apiKey가 falsy일 경우에만 실행됩니다.

사이드 이펙트가 있는 예시

let calls = 0;
let obj = { val: 0 };

obj.val ||= ++calls;
console.log(obj.val); // 1, 0은 falsy이기 때문입니다.

obj.val ||= ++calls;
console.log(obj.val); // 여전히 1, 두 번째 증분은 절대 실행되지 않습니다.

obj.val이 처음에 0(falsy)이므로 ++calls가 평가되고 할당됩니다. 두 번째 줄에서 obj.val은 이제 1(truthy)이므로 ++calls가 건너뜁니다. calls의 값은 1로 유지됩니다.

브라우저 지원

논리 할당 연산자는 모든 모던 환경에서 지원됩니다.

✅ Chrome 85+, Firefox 79+, Safari 14+, Edge 85+
✅ Node.js 15+
❌ Internet Explorer에서는 지원하지 않습니다.

더 오래된 환경을 대상으로 하는 경우 @babel/preset-env와 같은 트랜스파일러를 사용하고 ES2021 설정을 적용하세요.

준비 완료!

논리 할당 연산자는 자바스크립트의 작지만 강력한 추가 기능입니다. 이 기능은 의도를 명확히 하고, 반복적인 코드를 줄이며, 일반적인 조건 로직을 단순화합니다. 특히 프런트엔드 워크플로우에서 다음과 같은 경우에 특히 유용합니다.

• 프로퍼티 및 상태 관리
• API 기본값 설정
• 폼 데이터 검증

||, &&, ??를 이미 익숙하게 사용하신다면, ||=, &&=, ??=도 문제없이 사용할 수 있습니다. 이제부터는 단순히 기억하고 익숙해지기만 하면 됩니다.

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article(https://kofearticle.substack.com/)을 구독해주세요!