# 04. 함수 업그레이드 (default parameter/arguments)

## 함수 업그레이드 (default parameter/arguments)

이번에는 함수의 기본 파라미터를 설정하는 방법에 대해서 알아보겠습니다. \
한번, 우리가 원의 넓이를 구하는 함수를 만들어보겠습니다.

```javascript
function calculateCircleArea(r) {
  return Math.PI * r * r;
}

const area = calculateCircleArea(4);
console.log(area); // 50.26548245743669
```

여기서 Math.PI 는 원주율 파이(π) 값을 가르킵니다.\
만약 우리가 이 함수에 r 값을 넣어주지 않으면 어떤 결과가 나타날까요?

```javascript
function calculateCircleArea(r) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // NaN
```

결과는 NaN 이 나옵니다. Not a Number 라는 의미로, 우리가 undefined \* undefined 이렇게 숫자가 아닌 값에 곱셈을 하니까 이상한 결과물이 나와버렸습니다.

이 함수에서 만약에 r 값이 주어지지 않았다면 기본 값을 1을 사용하도록 설정해봅시다.

우리가 지금까지 배운 것들을 활용하면 이렇게 작성 할 수 있습니다.

```javascript
function calculateCircleArea(r) {
  const radius = r || 1;
  return Math.PI * radius * radius;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793
```

ES5 시절엔 위와 같이 하는게 최선이였는데, ES6 에선 다음과 같이 할 수 있게 되었습니다.

```javascript
function calculateCircleArea(r = 1) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793
```

훨씬 깔끔하죠?

함수의 기본 파라미터 문법은 화살표 함수에서도 사용 할 수 있습니다.

```javascript
const calculateCircleArea = (r = 1) => Math.PI * r * r;

const area = calculateCircleArea();
console.log(area); // 3.141592653589793
```

### **함수의** default (parameter)

**ex 1)** \
파라미터에 기본값(default 값)을 줄 수 있습니다.\
기본적인 '값' 들어갈수 있고, 연산식도 들어 갈수 있습니다.\
심지어 함수 실행도 넣을수 있습니다.

```javascript
const add = (a, b = 2 * 5) => {
    console.log(a + b);
}

add(3);
```

```javascript
// 결과)

13
```

**ex 2)** 심지어 함수 실행도 넣을수 있습니다.

```javascript
const sum = (...params) => {
  return params.reduce((acc, cur) => acc + cur, 0);
};

const add = (a, b = sum(4,5)) => {
    console.log(a + b);
}

add(3);
```

```
// 결과)

12
```

### **함수의 arguments**

함수의 **모든 파라미터들을** 전부 한꺼번에 싸잡아서 다루고 싶은 경우가 있습니다. \
그럴 땐 arguments라는 키워드를 활용하시면 됩니다. \
함수 안에서 쓸 수 있는 미리 정의된 변수입니다.

```javascript
function 함수(a,b,c){
  console.log(arguments)
}

함수(2,3,4);
```

```javascript
// 결과) array 비슷한 자료가 출력
[2,3,4]
```

```javascript
function 함수(a,b,c){
  for (var i = 0; i < arguments.length; i++){
    console.log(arguments[i])
  }
}

함수(2,3,4);
```

```javascript
// 결과)
2
3
4
```


---

# 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://triplexlab.gitbook.io/vanilla-js/02.vanilla-js/04..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.