매개변수(Parameter1)란? 함수의 정의할 때 작성하는 함수의 입력 변수
인자(arguments)란? 함수를 호출할 때 전달하는 실제 입력 값

나머지 매개변수(Rest parameters)

매개변수의 갯수가 정해져 있지 않은 가변인자에 접근하는 방법으로 arguments를 사용하는 방법과 나머지 매개변수를 사용하는 방법이 있다.

1. arguments

함수 안에서 함수의 인자와 관련된 정보를 배열로 담아 갖고 있는 객체
유사배열객체로 배열과 사용방법이 유사한 배열 형태의 객체이다.
배열은 아니기 때문에 배열의 내장 메서드(foEach,map,filter 등)은 사용할 수 없다.
화살표함수에는 arguments가 없다.

	function showName(name){
      console.log(arguments); // { "0": "Joy", "1": "Tom"}
      console.log(arguments.length); // 2
      console.log(arguments[0]); // "Joy"
      console.log(arguments[1]); // "Tom"
    }
	showName('Joy','Tom');

2. Rest parameters

나머지 매개변수란 지정한 인자를 제외한 나머지 인자들을 배열로 묶어서 나타내는 구문

	function showName(a, b,...names){
      console.log(a);
      console.log(b);
      console.log(names);
    }
    showName(); // []
    showName('Joy'); // "Joy"
    showName('Joy','Tom'); // "Tom"
    showName('Joy','Tom','Mike','Jane','Alex'); // ["Mike", "Jane", "Alex"]

a와 b에 순서대로 Joy와 Tom이 들어가고 그 이후에 남는 나머지 인자들은 모두 names라는 이름으로 사용 가능

	function add(...numbers){
      let result = 0;
      numbers.forEach(function(sum){
        return result += sum;
      });
      numbers.forEach( num=>(result += num) );
      console.log(result); // 화살표함수
    };
    add(1,2,3); // 6
    add(1,2,3,4,5,6,7,8,9,10); // 55

arguments와 다르게 배열의 메서드를 사용할 수 있다.

요약

나머지 매개변수는 정해지지 않은 갯수의 인자를 배열로 나타내주고
위치는 마지막 매개변수 자리에 들어간다.
arguments는 유사배열객체이기 때문에 배열 메서드를 사용할 수 없고
인자 전체를 담기 때문에 나머지 매개변수처럼 일부만 사용할 수 없다는 단점이 있어
배열의 메서드나 인자들의 일부만 사용할 때는 나머지 매개변수를 사용하는게 좋다.

2. 전개구문(Spread syntax)

전개구문은 뭉쳐있는 여러개의 값들을 개별적인 값들의 목록으로 만들 때 사용된다.
배열 또는 객체를 펼쳐주는 역할을 한다.

  let arr1 = [1,2,3];
  let arr2 = [4,5,6];
  let arr3 = [...arr1,...arr2];
  console.log(arr3); // [1,2,3,4,5,6]

1. 배열 복사

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조하기 때문에 새로운 배열을 변경하는 경우 원본 배열 역시 변경됐다.
배열의 복사는 slice 또는 map 등으로 가능

  var arr1 = ['1','2']; 
  var arr2 = arr1.slice();
  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

  var arr1 = ['1','2']; 
  var arr2 = arr1.map(function(item){
    return item;
  });
  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

ES6의 Spread 연산자를 사용하면, 새로운 복사된 배열을 생성할 수 있다.

	// ES6 spread operator
  var arr1 = ['1','2']; 
  var arr2 = [...arr1]; 

  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

2. 배열 병합

기존에 두 개의 배열을 결합할 때 concat 메서드를 사용했다.
ES6에서는 spread 연산자로 좀 더 깔끔한 배열 병합이 가능하다.

	// 기존
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 
    var arr = arr1.concat(arr2); 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

    // ES6 spread operator
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 
    var arr = [...arr1, ...arr2]; 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

    var arr1 = [1,2];
    var arr2 = [0, ...arr1, 3, 4];
    console.log(arr2); // [0, 1, 2, 3, 4]