Day26 : 함수의 인자와 매개변수

만들어진 DayCounter에 문제가 있다.

 

 

'2024년 5월 1일' 이라는 값을 넣고 [카운트다운 시작] 버튼을 눌렀을 때 카운트다운이 시작된다.

 

이후에 '2024년 5월 10일'로 값을 바꾸면 [카운트다운 시작] 버튼을 누르지 않아도 '2024년 5월 10일'을 기준으로 카운트다운이 된다.

> input box에 담겨져 있는 데이터만 변경했을 뿐인데 카운트가 변경되었다.

 

원인

[카운트다운 시작] 버튼을 누르게 되면 starter() 함수가 실행되면서

 

 

그 안에 있는 setInterval 함수가 실행된다.

 

setInterval함수에 의해서 counterMaker라고 하는 함수가 1초마다 반복 실행되고 있다.

 

counterMaker 함수에는 dateFormMaker라는 함수를 실행시키고

 

dateFormMaker함수는 document.querySelector를 사용해서 input box 안에 존재하는 값을 값들을 각각의 변수에 담아주고 그 변수에 담겨있는 값들을 활용해서 dateFormat이라고 하는 이 문자형태, 날짜형태의 문자열 데이터를 리턴해주는 함수이다.

 

 

→ 1초마다 counterMaker()가 실행된다.

    그때마다 dateFormMaker함수가 실행되고 그때마다 inputbox 안에 있는 value들을 가져오게 되어 이런 문제가 발생한다

 

---

 

[카운트다운 시작] 버튼을 눌렀을 때만 input box 값을 가져오도록 수정하자.

 

전달인자

• 함수의 외부에서 데이터를 전달 받아 내부에서 활용하기 위한 수단
• 함수를 호출할 때, 함수 내부로 전달되는 데이

매개변수

• 함수의 외부에서 데이터를 전달 받아 내부에서 활용하기 위한 수단
• 함수를 선언할 때, 소괄호 안에 정의되는 변수

 

counterMaker()에 있던 dateFormMaker()를 starter()함수로 옮긴다.

 

이렇게 되면 counterMaker()에서는 targetDateInput 변수와의 연결이 끊긴다.

 

이를 해결하기 위해 counterMaker()를 정의할 때 매개변수로 'data'를 준다.

 

starter()에서도 전달인자를 준다.

 

이 상태로 다시 d-day counter를 실행해보면 1초 실행되고

 

'유효한 시간대가 아닙니다'라는 메시지가 출력된다.

 

setInterval()에서 counterMaker()를 1초마다 실행시킬 때, 전달인자를 안 넣어줘서 그렇다.

 

전달인자 추가

 

이 상태로 실행을 하면 처음 카운트만 나오고 이후에는 작동하지 않는다.

 

setInterval()에서 함수 자체를 넣어주는 것이 아니라 함수를 실행하게 되면 setInterval이 한 번밖에 실행되지 않는다.

화살표 함수로 넣어줘야 한다.

인자를 넣어서 setInterval 해주고 싶을 때는 함수 내부에 넣어준 후 내부에서 실행해야 한다.

 

 

이제는 input box의 값을 변경해도 버튼을 누르기 전까지는 카운트 값이 바뀌지 않는다.

input box의 값을 받아오는 부분이 setInterval 전에 있기 때문에.

 

---

이상한 점이 또 있다.

 

'2024년 5월 10일'을 실행시키다가

'2024년 5월 1일'을 또 실행시키면

 

이 두개가 번갈아가면서 출력된다.

 

원인

여러 개의 Interval이 동시에 동작하고 있다.

 

> 버튼이 눌릴 때마다 기존 인터벌이 모두 삭제되도록 하자.

 

starter()로 들어올 때 새 interval이 생성되기 전에 setClearInterval()을 호출해서 기존 interval 정리