토글(toggle) 기능은 사용자가 요소를 클릭하거나 버튼을 누르는 등의 상호작용으로 요소의 상태를 전환하는 기능입니다. 예를 들어, 밝기 조절 버튼을 클릭하면 화면의 밝기를 전환할 수 있습니다.

자바스크립트에서 토글 기능을 구현하는 방법은 여러 가지가 있지만, 여기서는 Nullish Coalescing(널 병합 연산자)을 활용한 방법을 알아보겠습니다.

Nullish Coalescing(??) 연산자는 변수의 값이 null 또는 undefined일 때, 기본값을 제공하는 용도로 사용됩니다. 이를 토글 기능에 적용하면, 요소의 상태가 null 또는 undefined일 경우에는 기본값으로 설정하고, 그렇지 않은 경우에는 반대값으로 전환하는 것이 가능해집니다.

아래는 Nullish Coalescing을 활용하여 토글 기능을 처리하는 예시 코드입니다.

let isToggled = null; // 초기 상태는 null로 설정

function toggleElement() {
  isToggled = isToggled ?? true; // null이면 true로 설정
  isToggled = !isToggled; // 상태 반전
  
  // 상태에 따라 요소를 보여주거나 숨김 처리 등의 로직 수행
  if (isToggled) {
    // 토글된 상태에 대한 로직
  } else {
    // 토글되지 않은 상태에 대한 로직
  }
}

// 사용자 상호작용으로 토글 실행
toggleElement();

위 코드에서 isToggled 변수는 요소의 상태를 저장하는 값으로 사용됩니다. 초기값은 null로 설정되며, toggleElement 함수를 호출할 때마다 상태를 반전시킵니다.

Nullish Coalescing 연산자를 사용하여 isToggled 변수가 null일 경우에는 기본값(true)으로 설정하고, 그렇지 않은 경우에는 현재 상태의 반대값으로 전환합니다.

나머지 로직 부분에서는 isToggled 값에 따라 토글된 상태와 토글되지 않은 상태에 대한 로직을 수행합니다. 예를 들어, 요소를 보여주거나 숨김 처리하는 등의 작업을 수행할 수 있습니다.

이렇게 Nullish Coalescing을 활용하여 자바스크립트에서 토글 기능을 처리하면 코드가 간결해지고 가독성이 좋아집니다. 또한, 변수의 초기값과 null 체크를 별도로 처리하지 않아도 되므로 편리합니다.

#javascript #toggle #NullishCoalescing