05. 함수와 이벤트

with 강혜정

1. 함수란?

• 프로그래머가 처리해야 할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것.

• 특정 기능을 수행하는 소스 코드를 따로 묶어 놓은 덩어리.

1) 함수를 사용하는 이유

함수를 사용했을 때

// 숫자 3개가 3의 배수인지 아닌지 확인하는 코드.

function multiple3(num) {
   if (num != null) {
      if (num % 3 == 0)
         alert(num + "은 3의 배수입니다.");
      else
         alert(num + "은 3의 배수가 아닙니다.");
   }
   else
      alert("입력이 취소되었습니다.")
}

var n1 = prompt("숫자를 입력하세요.");
multiple3(n1);
var n2 = prompt("숫자를 입력하세요.");
multiple3(n2);
var n3 = prompt("숫자를 입력하세요.");
multiple3(n3);

함수를 사용하지 않았을 때

1. 재사용성

   • 필요할 때마다 원하는 기능만 따로 실행할 수 있으며, 같은 기능이 필요한 다른 곳에서 다시 사용할 수 있다.

2. 가독성

   • 함수를 사용하면 함수 이름을 통해 어떤 동작을 하는지 알 수 있으며, 여러 줄의 코드가 함수에 담겨 있기 때문에 코드를 읽기 편하다.

3. 모듈

   • 코드를 유지보수할 때, 모듈화가 잘 진행되었다 유지보수성이 높아진다.

2) 함수를 정의하고 실행하는 방법

함수를 선언하는 방법은 간단하다. function 예약아럴 사용하고, 중괄호( { } ) 안에 함수에서 실행할 여러 명령을 묶는. 10과 20을 더하는 함수는 아래와 같은 함수를 사용하면 된다.

function addNumber() {
    var sum = 10 + 20;
    console.log(sum);
}

함수를 사용하는 방법은 더욱 간단하다. 그저 함수 이름을 호출하면 된다. 위에 만들어 둔 함수를 실행하고 싶은 경우에는 addNumber() 을 작성하면 된다.

웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석한다. 그래서 개발자가 원하는 어느 곳이든 함수를 선언해 놓기만 하면, 선언한 위치와 상관없이 함수를 실행할 수 있다. 즉, 함수 선언 위치는 프로그램 흐름에 영향을 주지 않는다.

그래서 보통 한 문서 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 소스를 모아 놓고 필요할 때마다 함수를 호출한다.

3) 매개변수와 인수 사용

하지만 위에서 만든 addNumber은 10과 20을 더할 때 밖에 사용하지 못한다. 그렇다면 숫자를 바꿔 여러 번 사용할 수 있게 하려면 어떻게 해야 할까?

그것은 매개변수와 인수를 사용하면 된다. 아래는 10과 20을 더해주는 함수와 비슷한 함수이다. 여기서 addNumber 옆 괄호 안에 있는 a와 b는 매개변수라고 하는데, 함수를 호출할 때 들어오는 값이 a와 b에 대입되어 사용된다.

function addNumber(a, b) {
    var sum = a + b;
    console.log(sum);
}

또한 함수를 싱행할 때 매개변수로 넘겨주는 값을 인수라고 한다.

2. 이벤