Nullish Coalescing을 이용하여 자바스크립트에서의 캐싱 처리 방법

캐싱은 프로그램의 성능을 향상시키기 위해 매우 중요한 개념입니다. 자바스크립트에서는 Nullish Coalescing 연산자를 사용하여 캐싱 처리를 간편하게 할 수 있습니다. Nullish Coalescing은 변수에 값이 null 또는 undefined인 경우, 대체 값을 할당하는 역할을 합니다.

예를 들어, API에서 데이터를 가져와서 캐싱하고자 하는 상황을 가정해보겠습니다. 이때, 데이터를 가져오는 비용이 크기 때문에 한 번 가져온 데이터는 재사용하고 싶을 것입니다. 아래는 Nullish Coalescing을 이용하여 캐싱을 처리하는 예시 코드입니다.

let cachedData = null; // 초기에는 캐시된 데이터가 없습니다.

// 데이터 가져오기 함수
function fetchData() {
  // 데이터를 가져오는 비용이 크기 때문에 한 번 가져온 데이터를 재사용합니다.
  if (!cachedData) {
    console.log("데이터를 가져옵니다...");
    // 데이터 가져오는 로직
    cachedData = "캐시된 데이터";
  }
  
  return cachedData;
}

// main 함수
function main() {
  // 데이터를 가져오기 위해 fetchData 함수 호출
  const data = fetchData();
  
  console.log(data);
}

main(); // "데이터를 가져옵니다..."와 "캐시된 데이터"가 출력됩니다.

위 코드에서 cachedData 변수는 초기에 null로 초기화됩니다. 그리고 fetchData 함수에서는 cachedData 값이 null인 경우에만 데이터를 가져온 후에 cachedData에 대입합니다. 따라서 첫 번째 호출 시에만 데이터를 가져오고, 이후에는 캐시된 데이터를 반환합니다.

Nullish Coalescing 연산자 ??는 이러한 처리를 간단하게 구현할 수 있습니다. 아래는 Nullish Coalescing을 사용하여 캐싱 처리를 하는 예시 코드입니다.

let cachedData = null; // 초기에는 캐시된 데이터가 없습니다.

// 데이터 가져오기 함수
function fetchData() {
  // 데이터를 가져오는 비용이 크기 때문에 한 번 가져온 데이터를 재사용합니다.
  cachedData ??= (function() {
    console.log("데이터를 가져옵니다...");
    // 데이터 가져오는 로직
    return "캐시된 데이터";
  })();
  
  return cachedData;
}

// main 함수
function main() {
  // 데이터를 가져오기 위해 fetchData 함수 호출
  const data = fetchData();
  
  console.log(data);
}

main(); // "데이터를 가져옵니다..."와 "캐시된 데이터"가 출력됩니다.

위 코드에서 cachedData 변수 선언부분을 보면 ??= 연산자를 사용하여 캐시된 데이터를 가져옵니다. 이렇게 하면 코드의 가독성과 유지보수성이 향상되며, 캐싱 관련 로직을 보다 간결하게 작성할 수 있습니다.

위의 예시 코드를 참고하여 Nullish Coalescing 연산자를 이용한 자바스크립트에서의 캐싱 처리 방법에 대해 알아보았습니다. 이를 통해 캐싱을 효율적으로 관리할 수 있으며, 애플리케이션의 성능을 향상시킬 수 있습니다.

#javascript #caching