자바스크립트에서의 Nullish Coalescing을 활용한 애니메이션 제어 방법

29 Sep 2023

javascript

자바스크립트에서 애니메이션을 만들 때 종종 변수나 속성이 null 또는 undefined일 경우에 대해 처리해야 할 때가 있습니다. 이러한 상황에서 Nullish Coalescing 연산자를 사용하여 간편하게 애니메이션 제어를 할 수 있습니다.

Nullish Coalescing이란?

Nullish Coalescing은 ES2020에서 도입된 새로운 연산자로, 왼쪽 피연산자가 null 또는 undefined일 경우에만 우측 피연산자를 반환합니다. 이 연산자는 기존의 논리 OR 연산자(

)와 유사하지만, 빈 문자열, 숫자 0, false 등 falsy한 값은 우측 피연산자로 간주하지 않습니다.

애니메이션 제어 예시

아래는 Nullish Coalescing을 활용하여 애니메이션 제어하는 예시 코드입니다.

const animationDuration = animationTime ?? 1000;
const animationEasing = easeFunction ?? "ease-out";
const animationDelay = startDelay ?? 0;

function startAnimation(duration, easing, delay) {
  // 애니메이션 시작 로직
}

startAnimation(animationDuration, animationEasing, animationDelay);

위의 코드에서, animationTime, easeFunction, startDelay는 각각 애니메이션의 지속 시간, 이징 함수, 시작 딜레이를 나타내는 변수(또는 속성)입니다. 이 값들이 null 또는 undefined일 경우에 대비하여 Nullish Coalescing 연산자를 사용하여 기본값을 할당하고, startAnimation 함수에 인자로 전달합니다.

요약

Nullish Coalescing 연산자를 활용하면 자바스크립트에서 애니메이션 제어를 간결하게 처리할 수 있습니다. Nullish Coalescing 연산자를 사용하면 null 또는 undefined인 값들에 대한 디폴트 값을 설정할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있습니다. 애니메이션 뿐만 아니라 다양한 상황에서 Nullish Coalescing 연산자를 유용하게 활용할 수 있으니, 익혀두는 것이 좋습니다.

#codingskill #animation