자바스크립트 애니메이션 효과를 제어하면 웹 페이지나 앱에 더욱 동적이고 매력적인 사용자 경험을 제공할 수 있습니다.

하지만 애니메이션을 제어하는 동안 값이 존재하지 않을 수도 있으며, 이 경우 예외 처리를 해야합니다.

이를 위해 ES2020에서 도입된 Nullish Coalescing 연산자를 활용하면 간편하게 처리할 수 있습니다.

Nullish Coalescing 연산자란?

Nullish Coalescing 연산자는 좌항의 값이 null이나 undefined이면 우항의 값을 반환하고, 그렇지 않으면 좌항의 값을 반환합니다.

const result = a ?? b;

위의 코드에서 a가 null이나 undefined이면 b를 반환하고, 그렇지 않으면 a를 반환합니다.

애니메이션 효과 제어 예시

애니메이션 효과를 제어하는 예시로 스크롤 애니메이션을 구현하는 상황을 가정해보겠습니다.

const element = document.querySelector('.target-element');

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  
  element.style.transform = `translateY(${scrollPosition}px)`;
});

위의 코드는 scroll 이벤트가 발생할 때마다 스크롤 위치에 따라 요소를 이동시킵니다.

하지만 애니메이션 효과가 일시적으로 비활성화되어야 하는 경우를 고려해야합니다. 이때 Nullish Coalescing을 사용하여 애니메이션 효과를 제어할 수 있습니다.

const element = document.querySelector('.target-element');

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;

  const animationEnabled = getAnimationEnabled();
  const translateY = animationEnabled ?? 0;

  element.style.transform = `translateY(${translateY}px)`;
});

function getAnimationEnabled() {
  // 애니메이션이 활성화된 상태를 여기에서 체크하고 반환합니다.
  // 활성화되어 있다면 true, 되어 있지 않다면 false를 반환합니다.
  // 예시 코드는 작성 시에는 생략되었습니다.
}

위의 코드에서 getAnimationEnabled 함수는 애니메이션 효과가 활성화되어 있는지를 체크하고 그에 따라 animationEnabled 변수에 값을 할당합니다.

animationEnabled 변수를 Nullish Coalescing 연산자를 사용하여 translateY 값에 할당하면, animationEnabled 값이 존재하지 않을 경우 0으로 설정되어 비활성화된 애니메이션 효과를 제어할 수 있습니다.

마무리

Nullish Coalescing 연산자는 자바스크립트에서 애니메이션 효과와 같이 값이 일시적으로 존재하지 않을 경우를 처리할 때 유용합니다.

애니메이션 효과를 제어하면서 Nullish Coalescing 연산자를 사용하면 예외 처리를 간편하게 해결할 수 있고, 더욱 효율적인 코드를 작성할 수 있습니다.

#javascript #animation #NullishCoalescing