# 05. 함수와 이벤트

## 1. 함수란? 

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

### 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. **재사용성** 
   * **필요할 때마다 원하는 기능만 따로 실행할 수 있으며, 같은 기능이 필요한 다른 곳에서 다시 사용할 수 있다.**
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. 이벤


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wlrma-study.gitbook.io/js-study/do-it-javascript/05..md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.