(10) Modern JavaScript - 파라미터와 아규먼트

함수를 호출할 때 함수 바깥에서 안쪽으로 다양한 것들을 전달 받고자 하면

파라미터를 활용해야 한다.

// Parameter
function greeting(name) {
  console.log(`my name is ${name}...`);
}

위와 같이 소괄호 안에 작성된 name은 파라미터이고

함수 내부에 동작 부분에서 ${}를 변수처럼 활용할 수 있다.

 

아래와 같이 함수라도 전달하는 값에 따라서

다양한 결과로 동작하는 모습을 확인할 수 있다.

// Parameter
function greeting(name) {
  console.log(`my name is ${name}...`);
}

greeting("JavaScript");
greeting("SeopE");

---

그런데 파라미터와 함께 구분해야 할 용어가 존재한다.

'JavaScript', 'SeopE' 와 같이 함수를 호출할 때 

파라미터로 전달하는 값을 아규먼트(Argument) 라고한다.

 

함수를 호출할 때 문자열 값들은 결국 name에 전달되니까 

아규먼트나 파라미터나 서로 같다라고 생각할 수도 있고

뭐가 파라미터고 뭐가 아규먼트인지 헷갈릴 수도 있다.

 

확실하게 정리하자면..

• 파라미터(Parameter) - '매개변수'라고도 부르는 파라미터는 함수에 전달되는 이름이 있는 변수이고 매개변수를 의미하는 변수는 인자를 함수로 가져오는 데 사용되며 함수 선언 부분에서 소괄호 안에 작성되는 것이 파라미터이다.
• 아규먼트(Argument) - '인수'라고도 부르는 아규먼트는 함수를 호출할 때 사용하게 되는 일련의 값들을 가리키며 함수를 호출하는 부분에서 파라미터로 전달하는 값에 해당하는 부분이 아규먼트이다.

---

파라미터의 기본값에 대해서 파라미터가 있는 함수를 호출할 때

아래와 같이 아무런 아규먼트도 전달하지 않는다면

함수가 동작할 때 undefined 값을 가진 채로 동작한다.

// Parameter
function greeting(name) {
  console.log(`my name is ${name}...`);
}

greeting();

이때 아래와 같이 파라미터에 할당 연산자를 활용해서 기본값을 작성해주면

함수를 호출할 때 아규먼트를 전달하지 않은 경우에 파라미터가 기본값을 가지고 동작한다.

// Parameter
function greeting(name = "SeopE") {
  console.log(`my name is ${name}...`);
}

greeting();

 

---

아래와 같이, 하나 이상의 파라미터가 존재하는 상황에서

함수를 호출할 때 아규먼트를 부분적으로 생략하게 되면

function greeting(name = "SeopE", interest) {
  console.log(`my name is ${name}...`);
  console.log(`I like ${interest}`);
}
greeting("JavaScript");

name에는 기본값이 있으니 문자열 'JavaScript' 값은 interest로 전달될것 같아 보이지만

실행결과, 첫 번째 아규먼트가 name에 전달되고 두 번째 아규먼트는 생략되었기 때문에

undefined 값을 가지고 동작하는 것을 확인할 수 있다.

아규먼트가 파라미터로 전달될 때는 파라미터의 기본값과는 전혀 관계없이

함수를 호출할 때 작성한 순서 그대로 전달되기 때문에 아규먼트를 생략할 가능성이 있다.

그렇기 때문에 아래와 같이 아예 파라미터에 기본값처럼 넣어 아규먼트를 생략하거나

function greeting(name = "SeopE", interest = "JavaScript") {
  console.log(`my name is ${name}...`);
  console.log(`I like ${interest}`);
}
greeting();

 

name 파라미터의 기본값을 사용하고 싶다면 아규먼트에 undefined를 직접 적용해준다.

function greeting(name = "SeopE", interest) {
  console.log(`my name is ${name}...`);
  console.log(`I like ${interest}`);
}
greeting(undefined,"JavaScript");

사실 파라미터의 기본 값은 아규먼트를 생략하는 것 뿐만아니라

undefined 값으로 전달될 때도 동작한다.

결과를 보면 name에는 undefined가 전달돼서 기본값 'SeopE'를 가진 채로 동작한 모습을 볼 수 있고

interest에는 'JavaScript'가 전달돼서 전달 받은 아규먼트 값으로 동작한 모습을 확인할 수 있다.

이렇게 함수를 호출할 때 undefined 값을 전달해서 기본 값을 사용할 수도 있기에

다양한 상황에서 유용하게 활용할 수 있다.

---

아래 코드를 보면 파라미터의 기본값은 이미 정의된 파라미터를 활용할 수도 있다. 

function defaultTest(x, y = x + 3) {
  console.log(`x: ${x}`);
  console.log(`x: ${y}`);
}
defaultTest(2);

defaultTest 함수에는 x와 y 두개의 파라미터가 있지만 

함수를 호출할 때 아규먼트를 하나 생략한 상태이다.

 

그렇다면 아규먼트 숫자 2가 파리미터 x에 전달되고 파라미터 y는 기본값을 사용한다.

그때 2를 가진 x가 y의 기본값에 활용되면서 y는 5라는 결과를 가지며 

최종적으로 아래와 같이 출력된다.

 

그런데 만약 함수를 호출할 때

두 번째 아규먼트가 있다면 그냥 그대로 그 값을 사용할 것이다.

 

이런 특징은 다양한 방식으로 함수를 선언할 때 여러가지로 활용될 수 있다.

 

 

※ 참고로 파라미터의 기본값을 설정하는 문법은 ES2015에 등장한 문법이다.