자바스크립트에서 Ternary 연산자를 활용한 타이머 기능 구현

08 Nov 2023

javascript

타이머 기능은 웹 애플리케이션에서 매우 유용한 기능 중 하나입니다. 자바스크립트에서는 Ternary 연산자를 활용하여 간단하고 효율적으로 타이머를 구현할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 Ternary 연산자를 활용한 타이머 기능 구현 방법에 대해 알아보겠습니다.

Ternary 연산자란?

Ternary 연산자는 조건식을 평가하여 참인 경우와 거짓인 경우에 따라 다른 값을 반환하는 연산자입니다. 자바스크립트에서 Ternary 연산자는 다음과 같은 형태로 사용됩니다.

condition ? expression1 : expression2

condition이 참일 경우 expression1이 실행되고, 거짓일 경우 expression2가 실행됩니다.

타이머 기능 구현

이제 Ternary 연산자를 활용하여 타이머 기능을 구현하는 방법을 알아보겠습니다.

let seconds = 0;
let timer;

function startTimer() {
  timer = setInterval(() => {
    seconds++;
    console.log(seconds);
  }, 1000);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  seconds = 0;
  console.log(seconds);
}

function toggleTimer() {
  clearInterval(timer);
  seconds = 0;
  seconds === 0 ? startTimer() : stopTimer();
}

위의 코드는 간단한 타이머 기능을 구현한 예시입니다. seconds 변수는 타이머가 시작되고 경과한 시간(초)을 나타냅니다. timer 변수는 setInterval 함수로부터 반환된 타이머의 ID를 저장합니다.

startTimer() 함수는 Ternary 연산자를 사용하여 현재 타이머가 실행 중이지 않은 경우에만 타이머를 시작합니다.
stopTimer() 함수는 Ternary 연산자를 사용하여 현재 타이머가 실행 중인 경우에만 타이머를 중지합니다.
resetTimer() 함수는 Ternary 연산자를 사용하여 타이머를 중지하고 seconds 변수를 0으로 리셋합니다.
toggleTimer() 함수는 Ternary 연산자를 사용하여 현재 타이머가 실행 중인 경우에는 타이머를 중지하고 seconds 변수를 0으로 리셋하며, 실행 중이지 않은 경우에는 타이머를 시작합니다.

이제 Ternary 연산자를 활용하여 간편하게 타이머 기능을 구현할 수 있습니다. 웹 애플리케이션에서 타이머가 필요한 경우 이 방법을 활용해보세요!

#자바스크립트 #타이머