자바스크립트에서 Ternary 연산자를 활용한 캘린더 기능 구현

08 Nov 2023

javascript

캘린더는 웹 애플리케이션에서 일정을 효과적으로 관리하고 표시하는 중요한 기능입니다. 이번 기사에서는 자바스크립트의 Ternary 연산자를 활용하여 간단한 캘린더 기능을 구현하는 방법을 알아보겠습니다.

Ternary 연산자란?

Ternary 연산자는 조건에 따라 값을 반환하는 JavaScript의 조건 연산자입니다. 다음과 같은 형식으로 사용됩니다.

(condition) ? (value if true) : (value if false);

Ternary 연산자는 if-else 문을 단순화하여 코드를 더욱 간결하게 작성할 수 있는 장점이 있습니다.

캘린더 기능 구현하기

아래 예제 코드는 Ternary 연산자를 사용하여 간단한 캘린더 기능을 구현한 예입니다.

const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();

const getDaysInMonth = (month, year) => {
  return new Date(year, month + 1, 0).getDate(); // 입력된 월의 마지막 날짜를 반환
};

const renderCalendar = (month, year) => {
  const firstDay = new Date(year, month).getDay();

  let calendarHTML = "";

  for (let i = 0; i < firstDay; i++) {
    calendarHTML += `<div class="calendar-day empty"></div>`;
  }

  const daysInMonth = getDaysInMonth(month, year);

  for (let day = 1; day <= daysInMonth; day++) {
    const classNames = `calendar-day ${day === today.getDate() && currentMonth === month && currentYear === year ? 'today' : ''}`;
    calendarHTML += `<div class="${classNames}">${day}</div>`;
  }

  document.querySelector(".calendar").innerHTML = calendarHTML;
};

renderCalendar(currentMonth, currentYear);

이 코드는 현재 월을 기준으로 캘린더를 표시합니다. 각 날짜에는 해당 날짜의 숫자가 나타나며, 오늘 날짜가 강조되어 표시됩니다.

위 코드에서 Ternary 연산자는 다음 부분에서 사용되었습니다.

day === today.getDate() && currentMonth === month && currentYear === year ? 'today' : ''

이 부분은 현재 날짜인지 여부를 확인하고, 현재 날짜인 경우 ‘today’ 클래스를 추가합니다. Ternary 연산자를 사용하여 이러한 조건을 간단하게 확인할 수 있습니다.

결론

Ternary 연산자는 JavaScript에서 조건에 따라 값을 반환하는 강력한 도구입니다. 이를 활용하여 간단한 캘린더 기능을 구현하는 방법을 살펴보았습니다. Ternary 연산자를 잘 활용하면 코드를 더 간결하고 가독성있게 작성할 수 있습니다.

#javascript #캘린더