[JavaScript] spread, rest

spread 연산자

 

기존의 객체 혹은 배열을 참조해서 새로운 객체 혹은 배열 등을 만들고 싶을 때 사용하는 연산자입니다. 

또한, 함수의 인자에서도 사용가능합니다. 

const slime = {
    name : '슬라임'
};

const cuteSlime = {
    ...slime, // slime 객체가 가지고 있는 정보를 다 가져옴 
    attribute: 'cute'
};

const purpleCuteSlime = {
    ...cuteSlime, // cuteSlime 객체가 가지고 있는 정보를 다 가져옴
    color: 'purple'
};

const greenCuteSlime = {
    ...purpleCuteSlime, // 덮어쓰기도 가능하다.
    color: 'green'
};

console.log(purpleCuteSlime === cuteSlime);
// false 출력.

spread 연산자는 기존 객체를 복사하는 개념을 갖고는 있지만, 새로운 객체로 정의하기 때문에 기존의 객체와는 다른 객체 입니다. (복사했다고 다 같은 객체가 아닙니다.)

 

조금 두루뭉술 하게 설명하긴 했지만 방금 위에서 말한 같은 객체, 다른 객체의 개념은 자바스크립트의 깊은 복사, 얕은 복사와 관련이 있는 것 같습니다. 즉, 얕은 복사일 경우에 값을 넣는 것이 아닌 주소값을 같게 만들어 참조하게끔 만드는 것이지요. 추후 더 공부를 한 후에 따로 이 부분에 대해서 포스팅 해봐야겠습니다.

 

spread 연산자는 배열에서도 사용 가능합니다. 

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
// animals.concat('비둘기'); 랑 같은 코드임

console.log(animals); // ["개", "고양이", "참새"] 출력.
console.log(anotherAnimals); //["개", "고양이", "참새", "비둘기"] 출력.

[...animals, '비둘기']; 이 코드는 animals.concat('비둘기'); 와 같은 역할을 하는 코드입니다. 

 

spread 연산자는 중복해서 사용 가능합니다. 

const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);
// [1,2,3,4,5,1000,1,2,3,4,5] 출력.

 

 

rest 연산자

생김새는 spread와 비슷합니다. 하지만 역할은 다릅니다. 

 

spread는 다른 객체나 배열안에서 '퍼뜨리는' 역할을 한다면 

rest는 객체, 배열 등의 요소가 이미 퍼져있는 것(기존 요소들)을 '모아오는' 역할을 합니다.

 

rest는 함수의 파라미터 혹은 객체, 배열에서 사용할 수 있습니다.

const purpleCuteSlime = {
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
};

const { color, ...rest} = purpleCuteSlime;

console.log(color); // 'purple' 출력. 
console.log(rest); // Object {name: "슬라임", attribute: "cute"} 출력.

const { attribute, ...slime} = cuteSlime;
console.log(slime); // Object {name: "슬라임"} 출력.

이미 퍼져있는 요소들 중에서 color를 제외한 다른 객체 요소들을 모아와서 출력합니다. 

다시 쉽게 표현하자면, 컬러를 제외한 다른 객체 요소들을 출력하는 것입니다. 

 

이름을 rest말고 다른걸로 사용해도 무방합니다. 

 

배열에서도 사용 가능합니다.

const number = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;
console.log(one); // 0 출력.
console.log(rest); // 1,2,3,4,5,6 출력.

/*
const [...rest, last] = numbers;
위 코드는 할 수 없다.
배열에서의 rest 연산자는 맨 마지막에 와야한다.
*/

주석 안에 따로 작성한 코드는 사용할 수 없는 코드 입니다. 

배열에서의 rest 연산자는 맨 마지막에 와야합니다. 

즉, rest 연산자를 처음부터 쓰고 그 이후에 따로 따로 요소들에 접근하는 것은 불가능합니다.

 

 

함수 파라미터에서의 rest

예시를 보여드리겠습니다.

function sum (...rest) {

    return rest.reduce((acc, current) => acc + current, 0); 
}

console.log(sum(1,2,3,4,5,6,7,8)); // 36 출력.

간단하게 코드를 설명 드리자면 sum 함수의 파라미터로, rest 연산자를 사용하여 하나의 배열을 파라미터로 받아옵니다.

그 후, 배열 내장 함수인 reduce 내장 함수를 활용하여 각 요소의 합을 출력합니다. 

 

 

함수 인자에서의 spread

먼저 인자와 파라미터의 차이점을 알려드리겠습니다. 

// 함수로 받아주는 요소들 (x, y)가 파라미터이다.
function subtract(x, y)) {
    return x - y;
}

const result = subtract(1, 2); // 함수로 넣어주는 요소들 (1, 2)가 인자이다. 

좀 더 명확하게 설명드리기 위하여, 해당 위치에 맞게 주석을 달아놓았습니다. 

 

다시 설명하자면, 함수를 받아주는 요소들 (x, y)가 파라미터입니다. 

그리고 함수를 호출하기 위해서 함수에 넣어주는 요소들 (1, 2)를 인자라고 합니다. 

 

 

함수 인자에서의 spread 사용법을 아래 코드와 같습니다. 

function sum (...rest) {

    return rest.reduce((acc, current) => acc + current, 0); 
}

const numbers = [1,2,3,4,5,6,7,8];
console.log(sum(...numbers)); // 36 출력.

위에서 설명한 함수 파라미터에서의 rest 코드와 거의 유사합니다. 그 코드에서 sum 함수를 호출하는 부분을 

spread 연산자를 이용하여 수정한 것입니다. 

 

 

 

참고 강의

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스