위 예시의 input 태그가 만약 1억 개가 된다면, 즉 1억 개의 사용처에서 이러한 동일한 작업을 수행하려 한다면 수정사항이 생겼을 때 하나하나 바꿔줄 수도 없고, 비효율적으로 긴 코드가 될 것이다.
이와 같은 불필요한 반복을 피하고 내용을 쉽게 수정할 수 있도록 "함수(function)"를 활용한다.
head 부분의 <script></script> 안에 새로운 함수를 function 키워드로 만들어준다.
함수의 이름을 nightDayHandler로 지정해주고 전에 input 태그에 작성한 코드를 함수에 그대로 작성한다.
이때 input 태그의 onclick이라는 event 안에서 this는 event가 소속되어있는 태그, 즉 input 태그를 가리키도록 약속되어있는 것이다. 그러므로 input 태그와 독립된 함수를 만들게 되면 this는 더 이상 input 버튼이 아니고 전역 객체를 가리키게 된다.
따라서 input을 가리키기 위해서 input 태그 안에 함수를 호출할 때 함수에게 this값을 주고(nightDayHandler(this);) 함수의 매개변수 부분에는 self라고 지정한 매개변수를 작성해주고 원 코드의 this로 작성한 부분을 self라고 변경한다.
이제 코드의 어디에서든지 nightDayHandler 함수를 호출하고 원하는 값을 넣어주면 함수의 매개변수 부분에 전달되어 함수의 내용을 수행하게 된다.
→ 함수(function)의 활용을 통해, 훨씬 적은 양의 코드로 같은 결과를 낼 수 있고 함수의 이름을 통해 어떤 작업을
하려는지 대략적으로 유추할 수 있으며, 함수를 수정해주면 1억 개의 사용처에서 수정된 내용대로 수행하는 효과를 볼 수 있다.
