모던 자바스크립트 -파라미터, 아규먼트-

파라미터(Parameter): 외부로부터 값을 전달받기 위해 함수를 선언할 때 소괄호 안에 작성하는 것

함수 내부의 동작 부분에서 변수처럼 활용할 수 있다.

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

 

아규먼트(Argument): 함수를 호출할 때 파라미터로 전달하는 값

greeting('sumin');

 

파라미터 다루기

파라미터의 기본 값 : 파라미터에 할당 연산자로 값을 미리 지정(ES2015)

아규먼트를 생략하거나, 아규먼트가 undefined 값으로 전달될 때 동작

주의) 아규먼트가 파라미터로 전달될 때는 파라미터의 기본값과는 관계없이 함수를 호출할 때 작성한 순서 그대로 전달

function greeting(name = 'sumin', interest = 'javascript'){
  console.log(`Hi! My name is ${name}`);
  console.log(`I like ${interest}`);
}
greeting(undefined,'python');
//Hi! My name is sumin
//I like python

 

파라미터의 기본값은 앞쪽에 정의된 파라미터를 활용할 수 있다.

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

 

arguments객체

JS에서 함수를 선언할 때 함수 내부에서 자동으로 arguments 객체가 만들어진다.

arguments객체에는 파라미터와 관계없이 함수를 호출할 때 전달한 아규먼트들이 배열의 형태로 모아져있다.

이 arguments객체를 활용해 아규먼트의 갯수가 불규칙적이더라도 유연하게 동작하는 함수를 만들 수 있다. 

주의)

arguments라는 객체가 함수 내부에 특정한 기능으로 존재하니깐 파라미터 이름을 arguments 짓거나, 함수 내부에서 arguments라는 이름의 변수나 함수를 만드는 것을 피해야 함

 

arguments객체 활용

length프로퍼티 - 아규먼트 개수를 확인 가능

인덱싱을 통해서 아규먼트 하나하나에 접근할 수 있음

for... of문을 통해 반복 작업을 할 수 있음

 

함수를 호출할 때 전달하는 단어들의 첫 글자만 따서 줄임말을 만들어주는 함수 만들기

 

arguments객체는 배열과 비슷한 모양을 하고 있지만 배열의 메소드는 사용할 수 없는 유사 배열이고, 함수를 호출할 때 전달한 모든 아규먼트 다루기 때문에 인덱싱을 통해 한번 더 세분화해야 하는 과정이 필요한 아쉬운 점이 있다.

 

레스트 파라미터(Rest Parameter)(ES2015)

arguments객체처럼 불규칙적으로 전달되는 아규먼트를 다루는 방법

일반 파라미터 앞에 마침표 세 개를 붙여주면, 전달되는 아규먼트들을 배열로 다룰 수 있음

Rest: 나머지 

 

특징

레스트 파라미터는 배열이기 때문에 배열의 메소드를 사용할 수 있다.

일반 파라미터와 함께 사용 가능. 이 경우, 앞에 정의된 파라미터에 아규먼트를 먼저 할당하고 나머지 아규먼트를 배열로 묶는 역할을 한다. 따라서 일반 파라미터와 함께 사용할 때는 반드시 마지막에 작성해야함.

 

활용법

명확하게 구분해서 다루어야 하는 부분을 일반 파라미터를 사용하고, 유연하게 다룰 수 있는 부분은 레스트 파라미터로 나워서 필요에 따라 부분적으로 활용

function printRank(first, second, ...others){
  console.log('레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRank('Phil','Won','Emma','Min');