[JS] 14. 함수란 무엇이고 왜 필요한가?

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 

---

 

기존에 작성된 코드에서 어떻게 함수로 변경하는지, 왜 함수가 필요한지에 대해서 먼저 간단히 살펴보겠습니다.

 

아래와 같이 기존에 작성된 버튼을 여러개 만들려고 합니다.

기본적으로 2개를 만들어봤는데요.

아래와 같이 작성된 코드의 input태그를 복사해서 하나 더 만들면 되겠죠.

그런데 2개도 복잡하지만, 이게 3,4개 더 많아진다면?..100개, 1000개가 된다면?

 

뭔가 하나로 동일한 기능을 작성해야 함을 느끼시죠?

이럴때 함수가 필요합니다.

 

한번 함수로 바꾸는걸 간단히 보여드릴께요!!

기존에 input 태그 안에 작성된 코드를 head 태그 아래에 이렇게 작성합니다.

<script>
function nightDayHandler(self)
{
  var target = document.querySelector('body');
  if(this.value === 'night'){
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    this.value = 'day';

    var alist=document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
    }
  } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = 'night';

    var alist=document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
    }
  }
}
</script>

nightDayHandler이라는 함수를 만든것이구요.

이걸 사용할때는 아래와 같이 사용하면 됩니다.

  <input type="button" value="night" onclick="
  nightDayHandler(this);
  ">

  <input type="button" value="night" onclick="
  nightDayHandler(this);
  ">

 

이렇게 해서 결과를 보면 기존에 input태그 안에 있던 코드를 그대로 복사해서 붙였을때와 결과는 같습니다.

그러나 함수안의 내용만 변경하면 되니깐 그 이후에 유지보수측면에서는 훨씬 좋은 방향으로 바뀌게 된거죠.

이러한 기능을 하는것이 함수입니다.

 

함수가 왜 필요한지를 살펴봤으니, 다음시간에는 함수의 기본사용법에 대해서 살펴보겠습니다.

 

 

본강의는 생활코딩 강의안을 바탕으로 재작성하였습니다.

opentutorials.org/course/3085/18882