---
description: with 강혜정
---

# 05. 함수와 이벤트

## 1. 함수란?&#x20;

* **프로그래머가 처리해야 할 과제에 따라 `기능별로 여러 명령을 묶어 놓은 것.`**
* **특정 기능을 수행하는 소스 코드를 따로 묶어 놓은 덩어리.**

### 1)  함수를 사용하는 이유

{% tabs %}
{% tab title="함수를 사용했을 때" %}
```
// 숫자 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);
```
{% endtab %}

{% tab title="함수를 사용하지 않았을 때" %}
```
// 숫자 3개가 3의 배수인지 아닌지 확인하는 코드.

// 1
var n1 = prompt("숫자를 입력하세요.");
if (n1 != null) {
   if (n1 % 3 == 0)
      alert(n1 + "은 3의 배수입니다.");
   else
      alert(n1 + "은 3의 배수가 아닙니다.");
}
else
   alert("입력이 취소되었습니다.")

// 2
var n2 = prompt("숫자를 입력하세요.");
if (n2 != null) {
   if (n1 % 3 == 0)
      alert(n2 + "은 3의 배수입니다.");
   else
      alert(n2 + "은 3의 배수가 아닙니다.");
}
else
   alert("입력이 취소되었습니다.")

// 3
var n3 = prompt("숫자를 입력하세요.");
if (n3 != null) {
   if (n3 % 3 == 0)
      alert(n3 + "은 3의 배수입니다.");
   else
      alert(n3 + "은 3의 배수가 아닙니다.");
}
else
   alert("입력이 취소되었습니다.")
```
{% endtab %}
{% endtabs %}

1. **재사용성**&#x20;
   * **필요할 때마다 원하는 기능만 따로 실행할 수 있으며, 같은 기능이 필요한 다른 곳에서 다시 사용할 수 있다.**
2. **가독성**
   * **함수를 사용하면 함수 이름을 통해 어떤 동작을 하는지 알 수 있으며, 여러 줄의 코드가 함수에 담겨 있기 때문에 코드를 읽기 편하다.**
3. **모듈**
   * **코드를 유지보수할 때, 모듈화가 잘 진행되었다 유지보수성이 높아진다.**

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

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

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

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

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

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

### 3) 매개변수와 인수 사용

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

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

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

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

## 2. 이벤

