lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

webIntroJsChapter2Title

webIntroJsChapter1Title

webIntroJsChapter3Title

lesson17Title

webIntroJsChapter4Title

// sayHello 함수 정의
function sayHello() {
  console.log('Hello');
  console.log('Nice to meet you');
}

// 함수 호출
// 'Hello', 'Nice to meet you'를 1줄씩 출력
sayHello();

// 함수 표현식
const greet = function (name) {
  console.log('안녕하세요, ' + name + '님!');
};

// 함수 호출
greet('???');

// 두 수의 합을 반환하는 함수
function add(a, b) {
  return a + b;
}

// 함수 호출
const result = add(10, 20); // 30
console.log('result: ' + result);

# 특정한 작업을 수행하는 코드 블록, 함수

함수(Function)는 특정한 작업을 수행하는 **재사용 가능한 코드 블록**입니다. 

이를 위해 1줄 이상의 코드를 중괄호 `{ }`로 묶어 `블록(Block)`을 만들고, 이 블록에 이름을 붙입니다.

```javascript title="함수 정의 예시"
function sayHello() {
  console.log('Hello');
  console.log('Nice to meet you');
}
```

위 함수는 'Hello', 'Nice to meet you'라는 메시지를 출력하는 작업에 `sayHello`라는 이름을 붙였습니다.

2개의 `console.log` 코드가 함수 내부에 작성되어 있으며, 이 2개의 명령문은 중괄호 `{ }`로 묶여 하나의 블록을 형성합니다.

함수를 호출하면 함수 내부의 코드가 실행되어 'Hello', 'Nice to meet you' 메시지가 1줄씩 출력됩니다.

```javascript title="함수 호출"
sayHello(); // '안녕하세요', '반갑습니다' 출력
```

<br />

## 함수는 왜 사용할까요?

함수의 목적은 코드의 **재사용성**을 높이는 것입니다.

한 번 정의된 함수는 함수 이름을 활용해 여러 번 호출할 수 있습니다. 이를 통해 코드의 중복을 줄이고, 유지 보수성을 높일 수 있습니다.

<br />

## 함수를 선언하는 방법

자바스크립트에서 함수는 `function` 키워드를 활용해 함수의 이름과 매개변수를 정의합니다.

```javascript title="add 함수 정의"
function add(a, b) {
  return a + b;
}
```

여기서 `add`는 함수의 이름이며, `a`와 `b`는 매개변수입니다.

중괄호 `{ }` 내부에는 함수가 실행할 코드를 작성하며, `return` 키워드를 사용해 함수의 결과값을 반환합니다.

<br />

### 함수을 호출하는 방법

함수를 호출한다는 것은 함수 내부의 코드를 실행하는 것을 의미합니다.

함수를 호출할 때는 함수의 이름 뒤에 괄호 `()`를 붙여 호출합니다.

```javascript title="add 함수 호출"
const result = add(10, 20); // 30
```

위 코드에서 `add(10, 20)`은 add 함수를 호출하고, 10과 20은 함수에 전달하는 `인자`입니다.

함수가 호출되면 함수 매개변수 `a`와 `b`에 인자 10과 20이 전달되어 함수가 실행됩니다.

이후 함수 내부의 `return a + b` 코드가 실행되어 30이 반환됩니다.

return으로 반환된 값인 30은 `result` 상수에 저장됩니다.

<br />

## 매개변수와 인자의 차이점은 무엇인가요?

매개변수(Parameter)는 함수를 정의할 때 **내부적으로 사용되는 변수**를 의미하며, 인자(Argument)는 함수를 호출할 때 **전달하는 실제 값**을 의미합니다.

```javascript title="두 수의 곱을 반환하는 multiply 함수"
function multiply(a, b) {
  return a * b;
}

const result = multiply(2, 3); // 6
```

예를 들어, `multiply` 함수의 매개변수는 `a`와 `b`이며, 함수를 호출할 때 전달하는 값 `2`와 `3`이 인자입니다.