Parameter & Argument

함수를 호출할 때 함수 바깥에서 안쪽으로 다양한 값들을 전달 받고자 한다면 파라미터를 활용해야 한다.

function greeting(name) {
  console.log(`Hi! My name is ${name}!`);
}

greeting('JavaScript');
greeting('Codeit');
greeting('World');

name부분이 파라미터이고, 함수 내부에 동작 부분에서 이렇게 변수처럼 활용할 수 있는 것이다. 그래서 파라미터를 활용하면 같은 함수라도 전달하는 값에 따라서 다양한 결과로 동작하는 모습을 확인할 수 있다. 그런데 여기서 파라미터와 함께 잘 구분해야 할 용어가 있다.

함수를 호출할 때 파라미터로 전달하는 값을 가리켜서 아규먼트(Argument)라고 부른다. 함수를 호출할 때 문자열 "JavaScript" 라는 값이 결국 name에 전달되니까 아규먼트나 파라먼트나 서로 같다고 생각할 수 있다.

함수 선언 부분에서 소괄호 안에 작성되는 것이 파라미터,
함수를 호출하는 부분에서 파라미터로 전달하는 값에 해당하는 부분이 아규먼트

Parameter의 기본값

function greeting(name = 'Codeit') {
  console.log(`Hi! My name is ${name}!`)
  
greeting();

파라미터가 있는 함수를 호출할 때, 아무런 아규먼트도 전달하지 않는다면 함수가 동작할 때 이 파라미터는 undefined 값을 가진 채로 동작하게 된다. 그런데 이 때 파라미터에 할당 연산자를 활용해서 이렇게 기본값을 작성해주게 되면 함수를 호출할 때 아규먼트를 전달하지 않은 경우에 파라미터가 이 기본값을 가지고 동작하는 모습을 확인할 수 있다.

function greeting(name = 'Codeit', interest) {
  console.log(`Hi! My name is ${name}!`);
  console.log(`I like ${interest}!`);
}

greeting('JavaScript'); // Hi! My name is JavaScript! I like undefined!

그러면 이렇게 하나 이상의 파라미터가 존재하는 상황에서 함수를 호출할 때 아규먼트를 부분적으로 생략하게 되면 어떻게 동작할까?
name에는 기본값이 있으니까 이 문자열 "JavaScript"라는 값이 interest로 전달될 거라는 기대를 할 수도 있겠지만 코드를 실행해보면 첫 번째 아규먼트가 name에 전달이 되고 두 번째 아규먼트는 생략되었기 때문에 undefined값을 가지고서 동작을 한다.
아규먼트가 파라미터로 전달될 때는 파라미터의 기본값과는 전혀 관계 없이 함수를 호출할 때 작성한 순서 그대로 전달되기 때문에 아규먼트를 생략할 가능성이 있어서 기본값이 필요한 파라미터는 가급적 오른편에 작성하는 것이 좀 더 권장된다.

function greeting(name = 'Codeit', interest = 'JavaScript') {
  console.log(`Hi! My name is ${name}!`);
  console.log(`I like ${interest}!`);
}

greeting('Python');

이런 상황에서 name 파라미터의 기본값을 사용하고 싶다면 어떻게 해야할까.
사실 파라미터의 기본값은 아규먼트를 생략하는 것뿐만 아니라 아규먼트가 undefined 값으로 전달될 때도 동작한다. 그래서 코드를 실행해보면 name에는 undefined가 전달되서 기본값을 가진 채로 동작한 모습을 볼 수 있고 interest에는 "Python"이 전달돼서 전달받은 아규먼트 값으로 코드가 동작한 모습을 확인할 수 있다. 이렇게 함수를 호출할 때 undefined 값을 전달해서 기본값을 사용할 수도 있다는 점도 참고하면 좋다.

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

defaultTest(2);

이 파라미터의 기본값은 앞쪽에 정의된 파라미터를 활용할 수도 있다. defaultTest 함수에는 x와 y, 두 개의 파라미터가 있지만 함수를 호출할 때는 아규먼트를 하나 생략했다. 아규먼트로 숫자 2가 파라미터 x에 전달되고 파라미터 y는 기본값을 사용한다. 그때 2를 가진 x가 y의 기본값에 활용되면서 결과적으로 y는 5라는 값을 가지게 된다. 그런데 만약 함수를 호출할 때 두 번째 아규먼트가 있다면 그냥 그 값을 사용한다.

이러한 특징은 다양한 방법으로 함수를 사용할 때 충분히 활용될 수 있기 때문에 참고하면 좋다.

*아규먼트로 null 값을 사용하게 되면 해당 파라미터는 null 값을 그대로 전달받게 된다.