함수

함수는 영어로 function이라고 하며 다양한 코드를 정리정돈 하기 위한 도구라고 할 수 있습니다.(좀 더 큰 도구는 객체)

함수의 개념은 이전시간에 학습했던 마지막 예제(반복문을 활용한 주간/야간모드 style 지정)를 이용해 보겠습니다.

지난번 학습을 통해 최종적으로 위와같은 코드를 작성하였습니다.

만약 이 내용에서 <input>태그를 1억개 작성하면서 powderblue라는 색상을 다른 색으로 변경해야한다고 하면 매우 번거롭고 실수할 가능성이 높습니다.

이럴 때에 함수를 활용하면 어떻게 되는지 확인해봅시다.

 

아래 예제가 위와 동일한 기능을 구현하되 함수를 이용하여 작성된 방식입니다.

먼저 <script> 태그 안에 함수를 선언합니다.

함수는 function 함수명() { 함수를 통해 실행하고 싶은 기능} 형태로 선언하면됩니다.

 

위 예제의 경우 onclick 속성안에 이미 script 문이 작성되어있기 때문에 내용을 복사하여 "nightdayHandler"라는 함수를 선언하고 함수명 뒤 중괄호 { } 안에 붙여넣기합니다.

* 이 때 함수명 뒤 ( ) 괄호 부분 안에 self 를 입력하고 기존에 this라고 되어있던 부분도 self로 수정합니다.

 

그러면 nightdayHandler 안에 들어있는 로직을 실행하고 싶을 때는 nightdayHandler(self)를 복사해서 <input>태그의 onclick 속성에 붙여넣고 self 대신 this를 넣어줍니다.

즉 버튼을 클릭하였을때 "nightdayHandler"라는 함수를 동작시키도록 코드를 가져다넣는것입니다.

 

---

이렇게하면 결과적으로 함수 사용 이전과 이후의 웹페이지 동작은 동일하지만 내부적으로는 완전히 다른 효율성을 갖는 코드가 됩니다.

동일 로직을 이용하는 함수에 수정사항이 생겼을 때 일일이 수정할 필요 없이 함수 하나만 수정하면 되고 또 nightdayHandler가 두번 반복되면 그 코드들이 똑같은 로직을 갖고있다고 확신할 수 있습니다.

그리고 nightdayHandler라는 함수이름을 통해 밤낮에 관한 작업이 실행될 것임을 유추해볼 수 있습니다.

 

이처럼 함수를 통해 유지보수가 매우 용이해진다는 것을 확인할 수 있습니다.

 

---

이번엔 좀더 간단한 예시를 살펴보겠습니다.

 

상단의 함수 function group()을 선언하고, group 함수가 호출되면 'document.write('반')', '반' 이라는 값을 출력하게끔 함수를 선언하였습니다.

 

그리고 하단에서 group(); 을 실행하면 위에 선언한대로 group 이라는 함수를 호출하여 중괄호 { } 안의 내용을 실행하게됩니다.