SpreadSyntax(전개문법), RestParameter

SpreadSyntax

- 배열을 간단하게 펼쳐서 사용할 수 있다

const spread = [1,2,3];
const arr = [0, ...spread, 4];
arr                    //[0,1,2,3,4]

//!이런식으로는 사용할 수 없다!
const arr2 = ...spread;                //에러 Uncaught SyntaxError: Unexpected token '...'

• 빈 배열에 전개문법을 사용할 경우, 아무것도 전달되지 않는다.

  const spread = [];
  const arr = [0, ...spread, 4];
  arr                //0,4            //주의![0, , 4]가 아니다!

• 배열복사

  var arr = [1, 2, 3];
  var arr2 = [...arr]            //arr.slice()와 유사. arr2 = [1,2,3]
  arr2.push(4)                        //arr2는 [1,2,3,4]
                                                  //arr은 영향을 받지 않고 남아 있음

  하지만 얕은복사만 되기 때문에 참조변수에 관해서는 원래 객체가 바뀌게 된다.

  var a = [[1],[2],[3]];
  var b = [...a]                    //[[1],[2],[3]]
  b.shift().shift();
  a                                                //[[],[2],[3]]
  b                                                //[[2],[3]]
  
  //b.shift() -> [1] -> [1].shift() -> [];    [1]을 a에서도 참조하고 있기에 [1]이 변경되면 a도 변경된다.

• 배열연결

  Array.prototype.concat() 은 배열을 존재하는 배열의 끝에 이어붙이는 데 종종 사용된다. 전개구문 없이, 이는 다음과 같이 작성된다.

  var arr1 = [0,1,2];
  var arr2 = [3,4,5];
  //arr2의 모든 항목을 arr1에 붙임
  arr1 = arr1.concat(arr2);
  arr1            //[0,1,2,3,4,5]

  전개구문을 사용하면 이와같이 표현할 수 있다.

  var arr1 = [0,1,2];
  var arr2 = [3,4,5];
  arr1 = [...arr1, ...arr2];
  arr1        //[0,1,2,3,4,5]

  Array.prototype.unshift() 는 존재하는 배열의 시작지점에 배열의 값들을 삽입하는데 종종 사용된다. 전개구문없이, 이는 다음과 같이 작성된다.

  var arr1 = [0,1,2];
  var arr2 = [3,4,5];
  //arr2의 모든 항목을 arr1의 앞에 붙임
  Array.prototype.unshift.apply(arr1,arr2)        //arr1은 이제 [3,4,5,0,1,2]가 됨.

  전개구문으로, 이는 다음과 같아진다.

  var arr1 = [0,1,2];
  var arr2 = [3,4,5];
  arr1 = [...arr2, ...arr1];        //arr1은 이제 [3,4,5,0,1,2]가 됨.
  
  //참고: unshift()와 달리, 위 예제는 새로운 arr1을 만들며 기존 배열을 변형하지 않는다.

• 객체의 병합도 가능하다. 얕은 복제(prototype 제외) 또는 객체의 병합은 이제 Object.assign() 보다 더 짧은 문법을 사용해 가능하다.

  var obj1 = {foo : 'bar', x: 42};
  var obj2 = {foo : 'baz', y: 13};
  
  var clonedObj = {...obj1};                //{foo : 'bar', x: 42}
  var mergedObj = {...obj1, ...obj2}        //{foo : 'baz', x: 42, y:13}

  Object.assign() 함수를 대체하거나 흉내낼 수 없음을 유의.

RestParameter

Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 한다.

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체한다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있다.

var test = function(first, second, ...args){
    console.log('first : ' + first);  
    console.log('second : ' + second);
    console.log('args : ' + args);
    console.log('args is Array? : ' + Array.isArray(args));
}

test(1,2,3)            //first : 1, second : 2, args : 3, args is Array? : true. //그러니깐 args가 [3]이렇게 된거.
test(1,2,3,4,5);    //first : 1, second : 2, args : 3,4,5, args is Array? : true //args가 [3.4.5]이렇게 된거.

test(1,2);
//first : 1
//second : 2
//args : 
//args is Array? : true

• Rest Parameter는 함수의 인자를 배열로 다룰 수 있게 한다.

  // 1.아규먼트를 하나만 받고, 하나만 리턴하는 함수에 아규먼트를 여러개 넣었을 때
  function returnFirstArg(fristArg){
    return firstArg;
  }
  
  returnFirstArg('first', 'second', 'third');                    // 리턴값 :first
  
  // 2.아규먼트를 두개 받고, 두번째 아규먼트를 리턴하는 함수에 아규먼트를 하나만 넣었을 때
  function returnSecondArg(firstArg, secondArg){
    return secondArg;
  }
  
  returnSecondArg('firstArg');                                        //리턴값 : undefined
  
  //3.Rest Parameter를 이용하는 예시
  
  function getAllRestParameter(...args){
    return args;
  }
  
  getAllRestParameter('fist', 'second', 'third');            //리턴값 : ['first','second','third']
  

• Rest Parameter는 인자의 수가 정해져 있지 않은 경우에도 유용하게 사용할 수 있다.

  function sum(...nums){
    let sum = 0;
    for(let i = 0; i < nums.length; i++){
      sum = sum + nums[i];
    }
    return sum;
  }
  
  sum(1,2,3,4)                                    //리턴값 : 10
  sum(1,2,3,4,5)                                //리턴값 : 15

• RestParemeter는 인자의 일부에만 적용할 수도 있다.

  function getAllParams(param1, param2, ...args){
    return [param1, param2, args];
  }
  
  getAllParams(123)                        //리턴값 : [123, undefined, []]        //restParameter는 항상 배열이다.(값이 안들어가도 빈배열을 리턴한다.)
  
  getAllParams(1,2)                    //리턴값 : [1,2,[]]
  
  getAllParams(1,2,3)                //리턴값 : [1,2,[3]]
  
  getAllParams(1,2,3,4,5,6)    //리턴값 : [1,2,[3,4,5,6]]

Rest 파라미터 및 arguments 객체간 차이 -mdn문서

Rest 파라미터와 arguments 객체 사이에 세 가지 주요 차이점이 있습니다:

• Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, arguments 객체는 함수로 전달된 모든 인수를 포함합니다.
• arguments 객체는 실제 배열이 아니고 rest 파라미터는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.
• 즉 arguments 객체는 자체에 특정 추가 기능이 있습니다 (callee 속성처럼).