Rest parameter와 Spread syntax

Spread syntax와 Rest parameter

spread syntax 와 rest parameter 는 모두 … 를 사용하여 모양이 같아 혼동될 수 있다. 하지만 두 개의 기능은 오히려 정반대라고 할 수 있다.

 

Spread syntax

객체, 배열, 문자열 같이 뭉쳐있는 값들을 개별 요소의 목록으로 분해해 주는 문법이다. for..of 문으로 순회할 수 있는 배열, 문자열과 같은 iterable(반복 가능한, 순서가 있는)에 한정된다. spread syntax의 결과는 값들의 목록이기 때문에 결과는 변수에 할당할 수 없다.

console.log(...[1, 2, 3, 4]);

// 출력 결과
// 1 2 3 4

console.log(...'yuri');

// 출력 결과
// y u r i

const obj = { a: 1, b: 2, c :3 };
console.log({...obj});

// 출력 결과
// { a: 1, b: 2, c :3 }

• 객체 spread Syntax는 객체에서만 가능하다.

 

Spread syntax의 활용

1. 배열 병합 및 복사

• spread 를 사용한 배열 복사는 얕은 복사이다. ( arr1 === arr2 는 false )

 

2. 배열 요소 삽입

 

3. 객체 병합 및 복사

• spread 를 사용한 객체 복사는 얕은 복사이다. ( obj1 === obj2 는 false )
• 객체를 병합할 때 같은 키가 있으면 기존 값을 덮어씌운다.

 

Rest parameter

• rest parameter는 매개변수 앞에 3개의 점 … 을 붙여서 정의한 매개변수이다. rest parameter를 사용해 전달된 인자들은 배열의 형태로 전달된다.

  function restParameterTest(...rest) {
  	console.log(rest); 
  } 
  
  restParameterTest(1,2,3,4); 
  
  // 출력결과 
  // [1, 2, 3, 4]

 

• 함수에 전달된 매개변수와 rest parameter는 순차적으로 할당되며, rest parameter 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들을 배열로 만들어 준다.
  

  function restParameterTest(param, ...rest) { 
    console.log(param); 
    console.log(rest); 
  } 
    
  restParameterTest(1,2,3,4); 
  
  // 출력결과 
  // 1 
  // [2, 3, 4]

  function restParameterTest(param1, param2, ...rest) {
    console.log(param1);
    console.log(param2);
    console.log(rest);
  }
  
  restParameterTest(1,2,3,4);
  
  // 출력결과
  // 1
  // 2
  // [3, 4]

  // Uncaught SyntaxError: Rest parameter must be last formal paramete
  
  function restParameterTest(param1, ...rest, param2) {
    console.log(param1);
    console.log(param2);
  	console.log(rest);
  }
  
  restParameterTest(1,2,3,4);
  

 

arguments 객체

arguments 객체는 함수의 인수를 참조하는 유사 배열 객체이다. 유사 배열 객체이기 때문에 length 프로퍼티는 사용할 수 있지만, 배열의 메서드를 사용하기는 어렵다.

function func(a, b, c) {
 	console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

func('I am', 'so', 'tired');

// 출력 결과
// I am
// so
// tired

→ 만약 배열로 만들고 싶다면

function func(a, b, c) {
 	console.log([...arguments]);
}

func('I am', 'so', 'tired');

// 출력 결과
// ['I am', 'so', 'tired']

 

 

rest parameters와 spread syntax

[JS] Rest 파라미터 vs. 스프레드 문법(Spread syntax)

[JavaScript] Spread Syntax, Rest Parameter, arguments 정리