Velog
자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점
ES2021에서 도입된 논리 할당 연산자(||=, &&=, ??=)의 동작 방식과 실용적인 활용법을 소개하는 아티클입니다. 기존의 조건문이나 일반 할당 연산자를 더 간결하게 표현할 수 있어 코드 가독성을 높이고 불필요한 재할당을 방지합니다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. ES2021에서 도입된 논리 할당 연산자(||=, &&=, ??=)의 동작 방식과 실용적인 활용법을 소개하는 아티클입니다. 기존의 조건문이나 일반 할당 연산자를 더 간결하게 표현할 수 있어 코드 가독성을 높이고 불필요한 재할당을 방지합니다. 현대 자바스크립트에서 간결하고 의도가 명확한 코드 작성을 위해 알아야 할 문법입니다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. ||= (논리 OR 할당)은 좌측 피연산자가 falsy일 때만 우측 값을 할당하여 기본값 설정에 유용하다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
||=
||= (논리 OR 할당)은 좌측 피연산자가 falsy일 때만 우측 값을 할당하여 기본값 설정에 유용하다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
||=를 개념으로만 기억하고 맥락 없이 적용하면 ||= (논리 OR 할당)은 좌측 피연산자가 falsy일 때만 우측 값을 할당하여 기본값 설정에 유용하다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
&&=
&&= (논리 AND 할당)은 좌측 피연산자가 truthy일 때만 우측 값을 할당하여 조건부 업데이트에 사용된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
&&=를 개념으로만 기억하고 맥락 없이 적용하면 &&= (논리 AND 할당)은 좌측 피연산자가 truthy일 때만 우측 값을 할당하여 조건부 업데이트에 사용된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
??=
??= (논리 null 병합 할당)은 좌측이 null 또는 undefined일 때만 할당하여 0이나 빈 문자열을 보존한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
??=를 개념으로만 기억하고 맥락 없이 적용하면 ??= (논리 null 병합 할당)은 좌측이 null 또는 undefined일 때만 할당하여 0이나 빈 문자열을 보존한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "x ||= y와 x = x || y의 동작 차이를 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] x가 이미 truthy인 경우, ||=는 할당 자체를 실행하지 않아(단락 평가) setter나 부수 효과를 방지한다는 차이를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] ||=는 0, 빈 문자열, false도 falsy로 처리하지만 ??=는 null/undefined만 체크하므로 0이나 false를 유효한 값으로 보존해야 할 때 ??=가 적합함을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트의 논리 할당 연산자: 간단한 문법, 큰 이점에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] config 객체의 선택적 프로퍼티 초기화, 컴포넌트 props 기본값 처리 등 실제 코드 예시를 들어 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"||="를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.