자바스크립트에서 Nullish Coalescing 연산자 (??)는 변수가 null 또는 undefined인 경우 기본값을 할당하는 데 유용한 기능을 제공합니다. 이 기능을 활용하여 모바일 메뉴를 열고 닫는 기능을 구현하는 방법을 알아보겠습니다.

모바일 메뉴 열기/닫기 처리 방법

// HTML에서 메뉴 버튼과 메뉴 영역을 선택합니다.
const menuButton = document.querySelector('#menu-button');
const mobileMenu = document.querySelector('#mobile-menu');

// 메뉴 영역을 기본적으로 숨깁니다.
mobileMenu.style.display = 'none';

// 메뉴 버튼 클릭 시, 메뉴를 열거나 닫습니다.
menuButton.addEventListener('click', () => {
  // 메뉴가 열려있는지 여부를 확인합니다.
  const isMenuOpen = (mobileMenu.style.display ?? '') === 'block';

  // isMenuOpen이 true라면 메뉴를 닫고, false라면 메뉴를 엽니다.
  mobileMenu.style.display = isMenuOpen ? 'none' : 'block';

  // 메뉴 버튼의 텍스트를 변경합니다.
  menuButton.innerText = isMenuOpen ? '메뉴 열기' : '메뉴 닫기';
});

위의 코드는 모바일 화면에서 메뉴 버튼을 클릭할 때 마다 메뉴 영역을 열고 닫는 기능을 구현한 예제입니다.

• menuButton과 mobileMenu은 HTML에서 각각 메뉴 버튼과 메뉴 영역을 선택하는 역할을 합니다.
• mobileMenu의 display 속성을 초기값인 none으로 설정하여 메뉴 영역을 숨깁니다.
• 메뉴 버튼을 클릭할 때마다 isMenuOpen 변수를 통해 메뉴의 현재 상태를 확인합니다.
• Nullish Coalescing 연산자를 사용하여 mobileMenu.style.display 값이 null 또는 undefined인 경우 빈 문자열('')을 반환하도록 처리합니다.
• isMenuOpen 변수가 true인 경우 메뉴를 닫고, false인 경우 메뉴를 열도록 처리합니다.
• 마지막으로, 메뉴 버튼의 텍스트를 변경하여 사용자에게 현재 메뉴 상태를 보여줍니다.

위의 코드를 적용하면 모바일 화면에서 간편하게 메뉴를 열고 닫을 수 있는 기능이 구현됩니다. 여기서 Nullish Coalescing 연산자를 활용하여 변수를 간결하게 처리했으며, 코드의 가독성과 유지보수를 개선할 수 있습니다.

#javascript #nullish-coalescing