[JS ES6]-[12]arguments/rest parameter(나머지 연산자) 핵심만 이해하기

 

안녕하세요

이번 글에서는 자바스크립트에서의  arguments/rest parameter(나머지 연산자) 핵심만 알려드리겠습니다.

 

 

1. arguments

1.1 사용이유

함수에서 넘어온 파라미터 값을 한 번에 다루고 싶을 때 사용합니다.

arguments 키워드를 사용하면 값들을 배열 형태로 접근이 가능합니다.

 

 

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6

위 코드에서 파라미터에 아무 값도 넣지 않았는데,

arguments 키워드를 이용해 배열 형태로 값을 가져와 사용했습니다.

 

 

1.2 단점

1. 유사 배열이어서 배열 메서드를 사용할 수 없습니다.   

      유사배열은 배열같이 생겼지만 객체입니다.  

      그래서 배열에 사용할 수 있는 배열 메서드 forEach, map 등을 유사배열에선 사용할 수 없습니다.

2. 화살표 함수엔 arguments 키워드가 없습니다.

 

 

이런 단점들이 있기에, es6에 rest parameter(나머지 연산자)가 등장했습니다.

 

 

2. rest parameter(나머지 연산자)

2.1 사용이유

함수에서 넘어온 파라미터 값을 한 번에 다루고 싶을 때 사용합니다.

값들을 배열 형태로 접근 가능합니다.

그냥 arguments 키워드랑 사용이유가 같다고 생각하면 됩니다.

 

 

function say_num(...args) {
  console.log(args);  //[1, 2, 3, 4, 5]
}

say_num(1, 2, 3, 4, 5);

위처럼 파라미터에... 기호를 추가하면 

모든 파라미터를 배열 형태로 args에 담아줍니다.

 

 

2.2  rest parameter 응용하기(파라미터 분리)

rest parameter를 직역하면 나머지 파라미터란 뜻입니다.

말 그대로 나머지 부분만 사용 가능하기에, 마지막 파라미터로 한 번만 넣을 수 있습니다.

이걸 응용하면 필요한 파라미터만 분리해서 사용할 수 있습니다.

 

 

function concatenate(separator, ...strings) {
	console.log(strings.join(separator))   //"apple-banana-grape"
}

concatenate('-', 'apple', 'banana', 'grape');

파라미터 첫 번째 값은 넣어주고, 연결해야 할 문자열들은 rest parameter로 넣었습니다.

위처럼 rest parameter를 사용하면,

파라미터 값들을 유연하게 처리할 수 있게 됩니다.

 

 

3. rest parameter와 spread operator비교

rest parameter, spread operator 전부 … 을 사용해서 헷갈리실 수도 있을 것 같은데요.

사실 전혀 헷갈리실 필요 없습니다.

 

... 사용 시

함수 파라미터 값으로 들어가면  => rest parameter
나머지(배열, 객체, 문자열 등에서 데이터를 펼칠 땐) => spread operator

로 외우세요! 

 

3.1 rest paramter

function say_num(...args) {
	console.log(args)  //[1, 2, 3]
}
say_num(1, 2, 3)

 

3.2 spread operator

const nums = [1, 2, 3];

function say_num(x, y, z) {
	console.log(args)  //1, 2, 3  
}

say_num(...nums)