⇨ ES6에 도입된 spread와 rset문법은 서로 다른 문법이지만 비슷한 부분이 있어 비교하면서 알아보자.
🔸 Rest Parmeters
⇨ Rest 파라미터(나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수로 함수에서 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.
- 객체, 배열, 함수의 매개변수에서 사용가능하다.
- 객체와 배열에서 사용할땐 구조 분해 할당 문법과 함께 사용한다.
//rest : 나머지 매개변수
function nums1(param, ...rest) {
console.log(param); // 1
console.log(rest); // [ 2, 3, 4, 5 ]
}
nums1(1, 2, 3, 4, 5);
// 꼭 추출값의 이름 rest라고 안해도 됨
function nums2(param1, param2, ...params) {
console.log(param1); // 1
console.log(param2); // 2
console.log(params); // [ 3, 4, 5 ]
}
nums2(1, 2, 3, 4, 5);↪ 이처럼 Rest 파라미터는 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 배열에 담아 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터야 한다.
✅ 구조 분해 할당(Destructuring Assignment)
⇨ 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.
즉, Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정이다.
의미있는 변수로 만들어 편하게 사용 할 수 있다.
const nums = [1, 2, 3, 4];
//구조분해할당
const [first, second, ...others] = nums;
console.log(first); //1
console.log(second); //2
console.log(others); //[ 3, 4 ]
//함수
function name() {
return ['kim', 'jisu'];
}
const [firstName, rastName] = name();
console.log(firstName); //kim
console.log(rastName); //jisu
//object
const melon = { name: '멜론', color: 'green', seed: 'true' };
function display({ name, color, seed }) {
console.log('이름 :', name);
console.log('색 :', color);
console.log('씨 유무 :', seed);
}
display(melon);
// 이름 : 멜론
// 색 : green
// 씨 유무 : true
//변수할당
//:(콜론)을 사용한 목표 변수 설정
const { name: fruitName, color, seed, shape = 'round' } = melon;
console.log(fruitName); //멜론 (키이름 변경 name → fruitName)
console.log(color); //green
console.log(seed); //true
console.log(shape); //round (shape키 추가 and 기본값 'round')🔸 Spread Parmeters
⇨ Spread 문법(Spread Syntax, ...)는 '펼치다, 퍼뜨리다'뜻처럼 대상을 개별 요소로 분리한다.
Spread 문법의 대상은 이터러블이어야 한다.
// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3
// 문자열은 이터러블이다.
console.log(...'hi'); // h i
// Map과 Set은 이터러블이다.
console.log(...new Map([['a', 'b'], ['c', 'd']])); // [ 'a', 'b' ] [ 'c', 'd' ]
console.log(...new Set([1, 2, 3])); // 1 2 3
// 이터러블이 아닌 일반 객체는 Spread 문법의 대상X
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator👉 함수의 인수로 사용하는 경우
- 배열의 요소를 분해하며 순차적으로 파라미터 할당
- spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
// ES6
function spread(x, y, z) {
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
}
// 배열을 spread 함수의 인자로 전달하려고 한다.
const arr = [1, 2, 3];
/* ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)*/
spread(...arr);👉 배열에서 사용하는 경우
- 간결하고 가독성 좋게 표현 가능하다
concat
ES5에서는 서로다른 배열을 합쳐 새로운 배열을 만들고 싶은 경우, 배열 리터럴만으로 해결 할 수 없고 concat 사용해야 했지만 ES6이후로 Spread문법을 사용하면 배열 리터럴 만으로 해결 가능하다.
const color1 = ['빨강', '주황'];
const color2 = ['노랑', '초록'];
//concat
let array1 = color1.concat(color2);
console.log(array1); //[ '빨강', '주황', '노랑', '초록' ]
//spread
let array2 = [...color1, ...color2];
console.log(array2); //[ '빨강', '주황', '노랑', '초록' ]
//서로다른 배열안에 또다른 인자를 추가할 수 있다.
array2 = [...color1, '파랑', ...color2];
console.log(array2); //[ '빨강', '주황', '파랑', '노랑', '초록' ]그 외에 push와 splice, copy도 Spread문법을 사용하면 더 간단하게 코드를 작성할 수 있다.
👉 객체에서 사용하는 경우
//object
const study = {
id: 1,
content: { subject: 'HTML' },
};
const studyUpdate = { ...study, completed: true };
console.log(study); //{ id: 1, content: { subject: 'HTML' } }
console.log(studyUpdate); //{ id: 1, content: { subject: 'HTML' }, completed: true }
console.log((study.content.subject = 'CSS')); //CSS
console.log(study); //{ id: 1, content: { subject: 'CSS' } }
console.log(studyUpdate); //{ id: 1, content: { subject: 'CSS' }, completed: true }Spread는 얕은 복사(Shallow Copy)를 한다. 이 경우 주소 값을 복사하기 때문에, 참조하고 있는 실제값은 같다.
✌ Rest와 Spread 비교
- 함수 매개변수 rest
- 함수 매개변수에
...사용 - 나머지 모든 요소들을 배열로 수집
- rest를 이용해 여러개의 인자를 받아오는 방법
- 함수인자는 spread
- 함수 호출에
...사용 - 배열과 같이 반복 가능한 객체를 단일 요소로 압축 해제(개별 요소로 분리)
- spread를 이용해 여러개의 인자를 전달하는 방법
참고 및 출저
rest - MDN
spread - MDN
구조분해할당 - MDN
매개변수 기본값, Rest 파라미터, Spread 문법, Rest/Spread 프로퍼티 - poiemaweb
[JavaScript] Spread / Reat 문법 (feat. 구조 분해 할당) - 하나몬
