페이징(pagination)은 웹 애플리케이션에서 데이터를 여러 페이지로 나누어 보여주는 기능입니다. 이 기능을 자바스크립트로 구현할 때, Nullish Coalescing 연산자를 사용하면 간단하고 가독성 있는 코드를 작성할 수 있습니다.

Nullish Coalescing이란?

Nullish Coalescing은 자바스크립트에서 변수의 값이 null 또는 undefined일 때 기본값을 할당하는 연산자입니다. 이 연산자는 ??으로 표현하며, 왼쪽 피연산자가 null 또는 undefined이 아니면 왼쪽 피연산자의 값을 반환하고, 아니면 오른쪽 피연산자의 값을 반환합니다.

페이징 처리 구현 예시

아래는 Nullish Coalescing을 이용하여 자바스크립트에서의 페이징 처리를 구현한 예시입니다. 이 예시에서는 currentPage 변수가 null 또는 undefined일 경우, 기본값으로 1을 할당합니다.

const currentPage = pageNumber ?? 1;

위 코드에서 ?? 연산자를 사용하여 pageNumber 변수가 null 또는 undefined일 경우 1을 할당하고, 그렇지 않을 경우 pageNumber의 값이 그대로 할당됩니다.

페이징 처리를 위해선 또한 페이지당 아이템의 개수와 총 아이템의 개수 등의 정보가 필요합니다. 아래는 Nullish Coalescing을 이용하여 페이징 처리에 필요한 변수들을 구현한 예시입니다.

const itemsPerPage = itemsPerPageValue ?? 10;
const totalItems = totalItemsValue ?? 0;
const totalPages = Math.ceil(totalItems / itemsPerPage);

위 코드에서 itemsPerPageValue 변수와 totalItemsValue 변수가 null 또는 undefined일 경우 각각 기본값으로 10과 0을 할당합니다. 그리고 totalPages 변수에는 전체 아이템 개수를 페이지당 아이템 개수로 나눈 후 올림한 값을 할당합니다.

마무리

Nullish Coalescing 연산자를 이용하여 자바스크립트에서 페이징 처리를 간단하게 구현할 수 있습니다. 이를 활용하면 코드의 가독성을 높이고, 기본값이 없을 때 발생할 수 있는 오류를 방지할 수 있습니다. 자바스크립트에서 페이징 처리가 필요한 경우 Nullish Coalescing을 적절히 활용해보세요.

#javascript #nullish-coalescing