Javascript Spread와 Rest Parameters

Spread Operator

전개 연산자는 ES6이후부터 사용할 수 있는 문법으로 배열 또는 객체를 하나하나 넘기는 용도로 사용된다

배열, 문자열과 같은 반복 가능한(iterable) 요소 앞에 사용해서 배열의 개별 요소를 다른 배열이나 함수의 인자로 펼쳐서 넘기는게 가능하다 객체에 대해 전개 연산자를 사용하면 객체의 속성을 넘기는 것도 가능하며 배열 복사라고도 부른다

사용방법은 전개하고자하는 배열 앞에 ... 기호를 붙인다 여러 예제를 통해 사용법을 익혀보자

(1)배열 전개 연산자

  const fruits = ['사과', '바나나', '망고'];
  const newFruits = ['포도', ...fruits];
  
  console.log(fruits); // 결과 : ['사과', '바나나', '망고']
  console.log(newFruits); // 결과 :['포도', '사과', '바나나', '망고']

(2) 객체 전개 연산자

   const person = {
       name: '홍길동',
       age: 20,
       city: "서울"
   }
   // person 객체를 전개연산자로 객체복사를하고 job을 추가하여 newPerson을 만든다
   const newPerson = {...person, job: '개발자'};
   
   console.log(person); // 결과 : {name: '홍길동', age: 20, city: '서울'}
   console.log(newPerson); // 결과 : {name: '홍길동', age: 20, city: '서울', job : '개발자'}

(3) 문자열 전개 연산자

  const msg = "Hello";
  const newMsg = '${msg} I am Javascript';
  
  console.log(msg); // 결과 : Hello
  cosnole.log(newMsg); // 결과 : Hello I am Javascript 

Rest Parameters

Rest Parameters는 위의 스프레드 연산자와 사용방법은 동일하다

차이점은 스프레드 연산자의 경우 객체, 배열 복사등에 사용하지만 Rest의 경우 함수의 파라미터로 사용된다

Rest Parameter도 예제를 보면서 사용법을 익혀보자

(1) Rest 파라미터만 함수에 전달하는 경우

function addFun(a, b, c){
  console.log(a, b, c);
}

const numbers = [1, 2, 3];
addFun(numbers); // 결과 : [1, 2, 3] undefined undefined
addFun(numbers[0], numbers[1], numbers[2]); // 결과 :  1 2 3
addFun(...numbers); // 결과 : 1 2 3

(2) Rest 파라미터외에 여러 파라미터를 함수에 전달하는 경우

  const numbers = [1, 2, 3];
  
  function addFun(a, b, c, d, e, f){
    console.log(a, b, c, d, e, f);
  }
  
  addFun(...numbers, 10, ...numbers);  // 결과 : 1 2 3 10 1 2