> For the complete documentation index, see [llms.txt](https://triplexlab.gitbook.io/vanilla-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://triplexlab.gitbook.io/vanilla-js/02.vanilla-js/04..md).

# 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
```