논리 할당 연산자

논리 연산자 (||, &&, ?)와 할당 연산자 (=)가 합쳐진 단축 표현이다.

왼쪽 피연산자 (operand)가 논리 테스트에 실패한 경우 (false, true, null인 경우에만) 오른쪽 피연산자가 평가된다.

이 기능은 ES2021에서 등장한 기능이다.

 

⚠️ 단, 옵셔널 체이닝(?.)은 논리 왼쪽 피연산자에 사용할 수 없다. 구문 오류 발생

user?.settings ||= {} // X Syntax Error

 

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

 

논리 OR 할당 (||=)

user.settings ||= {}

If (!user.settings) {
  user.settings = {}
}

 

논리 AND 할당 (&&=)

user.loggedIn &&= checkPermissions(user);

If (user.loggedIn) {
  user.loggedIn = checkPermission(user)
}

 

Null 병합 할당 (??=)

// Null 또는 undefined
settings.timeout ??= 3000


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

 

논리 할당의 장점 (중요성)

• 가독성 향상
• 버그 예방 (|| 대신 ??=을 사용하면 0, ‘’, false같은 값이 유지됨)
• 의도하지 않은 null/undefined 할당 방지
• 짧고 유지보수가 쉬움

 

지원 환경

모든 모던 환경에서 지원된다. 

• Node.js ≥ 15
• Chrome ≥ 85
• Firebox ≥ 79
• Safari ≥ 14
• Internet Explorer 🙅🏻‍♀️

최신 브라우저면 대부분 사용 가능하지만, 구형 브러우저의 경우 사용 주의 필요

 

 

주의사항

1. 구버전 브라우저를 사용할 가능성이 있다면 연산자 사용 전 트랜스파일러(Babel 등)를 사용 후 설정을 적용
2. 빌드 설정에서 ES2021 이상 => 타깃을 설정하면 이 기능 활성화 가능

 

 

이상 스텔라였습니다 ✍🏻