(생활코딩) JavaScript 함수활용

전 포스팅에서 배열과 반복문을 활용한 예제에서 함수를 이용해 코드를 효율적으로 바꿔보자. 리팩토링!

 

전 포스팅 배열&반복문 예제

 

해당 코드를 보면 코드 길이가 길고, 이러한 코드의 버튼을 여러개 생성해야 된다라고 하면 유지보수가 힘들어질 것이다.

그래서 이 코드를 함수로 정의해서 해당 함수만 호출하면 해당 기능을 이용할 수 있게 만들어보자.

 

 

onclick안에 조건들을 복사해서 <script>태그 안에 복사해준 뒤, night_Handler()라는 함수로 정의해준다. 여기서 매개변수로 self란 값을 주고, 복사한 코드에서 this라고 된 부분들을 self로 바꿔준다.

 

 

또 정의한 함수를 사용하기 위해 해당 함수 인자로는 this값을 주면 이전 코드와 똑같은 기능을 하지만 길이가 훨씬 줄어들은 것을 볼 수있다.

 

 

해당 기능의 버튼을 여러개 만들어도 코드의 길이가 짧아 알아보기가 쉽다.