[JS] ...props ? 잔여연산자(Rest Parameter)와 전개구문(Spread syntax)

react로 개발하면서 매우 자주 봤던 { ...props }와 같은 잔여연산자 구문!

React

점을 연이어 3개 사용하는 잔여연산자(Rest Parameter)에 대해 알아보다가, 똑같이 ...을 쓰는 전개구문(Spread syntax)에 대해서도 정리해보려 한다.

둘은 구문은 똑같지만 역할은 거의 정반대라고 볼 수 있다.

 

 

잔여 연산자 ( Rest Parameter )

내가 애용하는 MDN에서는 잔여 연산자를 다음과 같이 설명하고 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

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

 

그런데 보니까, 꼭 배열이 아니더라도 JSON 같은 형태는 Object로도 반환해 주는 것 같다. 예시로 확인해보자.

 

예시 1 - 배열로 반환

const random=[3,48,107]
const randomRest=[...random]

console.log("random",random);
console.log("randomRest",randomRest);

randomRest[0]=30;

console.log("random",random);
console.log("randomRest",randomRest);

 

 

잔여 연산자는 값을 복사하여 반환해주는 것이기 때문에 원래의 random은 값이 변하지 않음을 확인할 수 있다.

 

 

예시 2 - Json 을 Object로 반환

var address={
  country:"Korea",
  city:"Seoul",
  add1:"Gangnam-gu",
  add2:"Sinsa-dong 12",
  add3:"345 Street"
}

const {country, city, ...detail} = address

console.log("address", address);
console.log("detail", detail);

 

주소정보를 담고있는 address 객체를 country, city 키로 분할하고, 나머지 잔여 키들은 detail이라는 별도의 변수로 저장해준다. 

 

 

보다시피 Json 객체는 꼭 배열이 아니더라도 detail을 Object로 반환해주고 있는 것을 볼 수 있다.

이를 응용해서 함수와 데이터를 유용하게 다룰 수 있을 것 같다.

 

 

전개구문(Spread syntax)

MDN에서의 설명은 다음과 같다.

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

요소를 배열 또는 객체로 반환해주는 잔여연산자와 달리, 배열을 요소로 풀어주는(Spread) 역할을 한다.

 

예시 1 - 배열에서의 Spread

3개의 요소가 있는 배열을 하나씩 함수의 파라미터로 넣어주고자 할 때 사용할 수 있다. 다음의 코드를 참고하자.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));

console.log(sum.apply(null, numbers));

 

sum은 x,y,z 세 개의 파라미터를 받아 합한 값을 반환해주는 함수이다.

그리고 numbers는 1,2,3 세 개의 요소를 배열로 가지고 있는 함수이다. 이 세 개의 값을 바로 넣고싶으면,

sum(numbers[0],numbers[1],numbers[2])와 같은 조금은 부족한 코드나,

.apply() 함수를 이용해야 한다.

그렇지만 spread 구문, ...numbers를 이용하면 쉽게 배열 요소를 풀어줄수 있다.

 

 

 

예시 2 - 문자열에서 Spread 구문

문자열 간의 조합은 push(), slice(), concat()등을 이용해야 하며 그 값을 따로 저장해야 하는 등 함수와 변수 사용에 불편함이 많았다. 이를 Spread 구문을 통해서 간결하게 만들 수 있다.

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

console.log(lyrics);

 

중간에 합치기 위해서 사용해야했던 slice나 concat 등의 함수 없이 간단하게 표현이 가능하다. 

 

JS, JavaScript, 자바스크립트, 전개구문, ... , 잔여연산자, Rest 연산자, Rest Parameter , React , 리액트 , React Native , 리액트 네이티브 , ... syntax