✔Rest 파라미터

Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

 function 함수2(...파라미터들){
  console.log(파라미터들)  //[1,2,3,4,5,6,7]
}

함수2(1,2,3,4,5,6,7);

=>원하는 파라미터 왼쪽에 ... 기호를 붙여주시면 "이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻입니다.

function 함수2(a, b, ...파라미터들){
  console.log(파라미터들) // [3,4,5,6,7]
}

함수2(1,2,3,4,5,6,7);

=>함수에 전달된 인수들은 순차적으로 파라미터와 Rest 파라미터에 할당된다.

❕Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.❕

[예제1]모든 파라미터를 전부 하나씩 콘솔창에 출력해주는 함수를 만들기

function 함수(...rest){
  for (var i = 0; i < rest.length; i++) {
    console.log(rest[i]);
  }
}

함수(1,2,3,4,5,6,7,8);

✔Spread 문법

Rest parameter와 구문이 동일하지만 Spread operator는 인수뿐만 아니라 배열 자체를 가집니다. for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있습니다.

간단히 말하자면 "괄호제거 해주는 연산자" 입니다.

1.함수 인자로 사용

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

// 배열을 foo 함수의 인자로 전달하려고 한다.
const arr = [1, 2, 3];

foo(...arr);

...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.

var 문자 = 'hello';
console.log(문자);  //hello
console.log(...문자);  //h e l l o

문자에 붙이면 문자에 붙은 괄호를 제거해줍니다.

2.배열 에사용

array 두개를 합치고 싶을때

var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b];  //[1,2,3,4,5]

arrray의 값을 복사하고 싶을때

var a = [1,2,3];
var b = [...a];

console.log(a);
console.log(b)

자바스크립트에선 array 값을 복사할때 spread를 이용해 줘야함 그냥 등호로 복사하면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어납니다. 그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 문제가 발생

arrray를 파라미터형태로 집어넣고 싶을 때

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];
더하기(...어레이);

3.Object에 사용

object 두개를 합치고 싶으면

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);

+오브젝트의 key값 중복이 발생하면 어떻게될까요?

var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };
console.log(o2);

o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있는겁니다.

이렇게 a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 이깁니다.

그래서 출력해보면 a : 1 이라는 자료가 담겨져있습니다.

❕spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 보통 사용하셔야합니다.

다른 곳에서 그냥 썼다간 에러가날 수 있습니다. ❕