📒Javascript 스프레드 문법, Rest 파라미터 :)

1. 스프레드 문법(Spread Syntax)

• ...은 하나로 뭉쳐져 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬.
• Array, String, Map, Set, DOM컬렉션(NodeList, HTMLCollection), arguments와 같이 for of문으로 순회할 수 있는 이터러블에 한정됨.

📌 스프레드의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용가능하다.

🔵 함수 호출의 인수 목록

👾 #1 Math.Max메서드에서 사용

• Math.Max메서드는 매개변수 개수를 확정할 수 없는 가변 인자 함수이다.
• 여러개의 숫자를 인수로 받아 인수 중 최대값을 반환한다.

const arr = [2,5,1];
console.log(Math.Max(arr)); // NaN

console.log(Math.Max(...arr)) // 5

👾 #2 Rest파라미터와의 차이점

function foo(...rest){
  console.log(rest); // 1,2,3 -> [1,2,3]
}
foo(...[1,2,3]); // [1,2,3] -> 1,2,3

🔵 배열 리터럴 내부에서 사용하는 경우

📎 concat

• 배열 리터럴만으로 2개의 배열을 1개의 배열로 결합 가능함.

// ES5
var arr = [1,2].concat([3,4]);
console.log(arr); // [1,2,3,4]

//ES6
const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1,2,3,4]

📎 splice

👾 #1

// ES5
var arr1 = [1,4];
var arr2 = [2,3];

// 기대한 결과가 아님
arr1.splice(1,0,arr2);
console.log(arr1); // [1,[2,3],4]

👾 #2

• apply메서드의 두 번째 인수(배열)은 apply메서드가 호출하는 함수에 해채되어 전달됨~!

var arr1 = [1,4];
var arr2 = [2,3];

Array.prototype.splice.apply(arr1, [1,0].concat(arr2));
console.log(arr1); // [1,2,3,4]

👾 #3 스프레드 문법 사용

// ES6
const arr1 = [1,4];
const arr2 = [2,3];

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

📎 배열 복사

• 스프레드문법으로 배열 복사 시 얕은 복사가 된다.

// ES5
var origin = [1,2];
var copy = origin.slice();

console.log(copy); // [1,2]
console.log(copy === origin); //false

//ES6
const origin = [1,2];
const copy = [...origin];

console.log(copy); // [1,2]
console.log(copy === origin); //false

🔵 객체 리터럴 내부에서 사용하는 경우

• 스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로 스프레드 문법의 사용을 허가함!!!

👾 #1

const obj = { x:1, y:2 };
const copy = { ...obj };
console.log( obj === copy ); // false

// 객체 병합
const merged = { x:1, y:2, ...{ a:3, b:4 } };
console.log(merged); // { x:1, y:2, a:3, b:4 }

👾 #2

• ES6에서 도입된 Object.assign메서드를 사용하여 여러개의 객체 병합, 특정 프로퍼티 변경 또는 추가 가능

const merged = Object.assign({}, {x:1,y:2}, {y:10, z:3});
console.log(merged); // {x:1, y:10, z:3}

👾 #3

• 스프레드 문법으로 Object.assign메서드를 대체할 수 있음.

// 객체 병합
const merged = { ...{x:1,y:2}, ...{y:10, z:3} };
console.log(merged); // {x:1, y:10, z:3}

// 특정 프로퍼티 변경
const changed = { ...{x:1,y:2}, y:5 }; // == ...{y:5}
console.log(changed); // {x:1, y:5}

// 프로퍼티 추가
const added = { ...{x:1,y:2}, z:5 }; // == ...{z:5}
console.log(added); // {x:1, y:2, z:5}

2. Rest파라미터

• 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수를 의미
• 함수에 전달된 인수들의 목록을 배열로 전달받음.
• 할당된 인수를 제외한 나머지 인수들을 배열로 반환, 반드시 마지막 파라미터에 작성해야함.
• 단 한번만 선언할 수 있음.
• 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length프로퍼티에 영향을 주지 않음.

function foo(param1, pram2, ...rest) {
  // 인수들의 목록을 배열로 전달받음
  console.log(...rest); // [ 3,4,5 ]
}

foo(1,2,3,4,5)
console.log(foo.length) // 2

Rest파라미터와 arguments객체

• ES5에서는 가변 인자 함수의 경우 매개변수를 통해 인수를 전달 받는 것이 불가능하므로 arguments 객체를 활용하여 인수를 전달 받음.

📎 arguments객체

• 👾 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사배열 객체이며, 함수 내부에서 지역 변수처럼 사용할 수 있음.

function sum() {
  console.log(arguments); 
}
sum(1,2); // {length:2, '0':1, '1':2}

• 👾 arguments객체는 배열이 아니기 때문에 배열 메서드를 사용하려면 Function.prototype.call 이나 Function.prototype.apply메서드를 사용해 배열로 변환해야 함.

function sum() {
  var array = Array.prototype.slice.call(arguments);
  
  return array.reduce(function (pre, cur){
    return pre + cur;
  }, 0);
}

console.log(sum(1,2,3,4,5)) // 15

📎 Rest 파라미터

• 👾 화살표 함수는 함수 자체의 arguments 객체를 갖지 않으므로 반드시 rest 파라미터를 사용해야 함.

function sum(...args) {
  return args.reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1,2,3,4,5)) // 15