[JavaScript] 전개 연산자(Spread Operator) [...] 와 Rest Parameter

전개 연산자(Spread Operator)

전개 연산자(스프레드 연산자 ...)는 배열의 요소나 반복 가능한 객체 등의 요소를 전개하거나 나열해주는 연산자 입니다. 

 

apply()를 이용하여 배열의 요소 전개하기

function sum(a, b, c, d) {
    return a + b + c + d;
}

let nums = [1, 2, 3, 4];

let result = sum( nums[0], nums[1], nums[2], num[3] );
let result = sum( sum.apply(null, nums) );

위의 코드처럼 sum()에 num배열의 각 요소를 넘기려면 하나 씩 번거롭게 넘겨야 합니다. 그러나 전개 연산자를 사용한다면 배열의 요소들이 개별 매개변수로 전달되기 때문에 보다 간편하고 간결하게 배열의 요소를 전개할 수 있습니다.

function sum(a, b, c, d) {
    return a + b + c + d;
}

let nums = [1, 2, 3, 4];

// 전개 연산자를 사용한다면 한번에 전개할 수 있습니다.
let result = sum( ...nums );

전개 연산자(...)를 사용하여 배열 복사

let num = [1, 2, 3, 4, 5];

let soArray = [...num, 6, 7, 8, 9, 10];

console.log(soArray); // 결과 : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

전개 연산자(...)와 push() 사용

let arr = [1, 2, 3, 4, 5];

let arr2 = [6, 7, 8, 9, 10];

arr1.push(...arr2);

console.log(arr1); // 결과 : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

전개 연산자(...)를 사용하여 객체 전개

const obj1 = { x : 'Park', y : 'Choi' };
const obj2 = { z : 'Lee' };
const obj3 = {...obj1, ...obj2};

console.log(obj3); // 결과 : {x: 'Park', y: 'Choi', z: 'Lee'}

 

Rest Parmeter

let sum = function(...arr){
		let result = 0;
        for(i of [...arr]){
        result += i*2;	
        }	
        return result;
    } 
    
 console.log(sum(1, 100, 1000, 100000)); // 결과 : 202202
 
 console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 결과 : 110

const arr = ["a", "b", "c", "d"]

const [firstElement, ...rest] = arr

console.log(firstElement) // 결과 : "a"

console.log(rest) // 결과 : ["b", "c", "d"]

----------------------------------------------------
const obj = { a: "Park", b: "Choi", c: 3 };

const { c, ...obj2 } = obj 

console.log(obj);	// 결과 : {a: 'Park', b: 'Choi', c: 3}
console.log(obj2); 	// 결과 : {a: 'Park', b: 'Choi'}

Rest Parameter와 destructing(구조 분해 할당)를 사용하여 arr의 있는 요소들 중에서 firstElement("a") 를 뺀 배열과 나머지 요소(rest)를 얻을 수 있는 유용한 코드입니다. 

 

스프레드 연산자를 매개변수로 사용하면 이를 rest parameter 라고 합니다.

ES2015(ES6) 에서 처음 도입된 것 으로 rest parameter로 사용하면 함수 호출 시 여러 개의 인수를 전달 할 수 있고 함수에서는 이 인수들을 하나의 배열로 묶어 처리할 수 있습니다. 

Rest 문자의 뜻 그대로 Rest의 역할을 하기 때문에 대응시키고 남은 인수들을 배열로 만들어 주기 때문에처음이나 중간에 올 수 없고, 마지막에만 올 수 있습니다.

 

 

Spread operator와 Rest Parameter는  spread 뜻 (펼치다, 퍼뜨리다)처럼 '펼치고', rest 뜻(나머지)처럼 '나머지' 값을 모은다고 문자의 뜻 그대로 생각하면 복잡하지 않다.

 

---

 

Reference

• Mdn web docs
• https://soopdop.github.io/2020/12/02/rest-and-spread-in-javascript/