자바스크립트 - Spread 와 rest

 

Spread

Spread 는 객체나 배열의 요소들을 펼쳐본다는 개념으로 사용되는 문법이다.

아래의 객체가 있다고 가정하자.

const student = {
    name : `김구름`
};

예시를 들기 위해 키 값을 하나만 설정했지만, 만약 이 객체 키의 갯수가 100개가 넘어가는 방대한 양이라고 가정해보자.

여기서 위의 객체가 가지고 있는 속성들을 모두 포함하면서 플러스 알파로 확장된 객체를 만들고 싶을 땐 어떻게 해야 할까?

(OOP 에서 상속의 개념인 듯 하다.)

// 아래의 univStudent 객체에 student 객체가 가지고 있는 속성들을 모두 포함하면서,
// univStudent 만의 속성을 추가하려면 어떻게 해야할까?
const univStudent = {

}

이럴때 쓸 수 있는게 Spread 라는 개념이다.

univStudent 객체가 student 객체의 필드를 상속하면서 새로운 속성을 추가하려면 다음과 같이 코드를 작성해주면 된다.

const univStudent = {
    ...student, // student 객체 상속
    major : '컴퓨터공학과' // 속성 추가
}

console.log(univStudent.name);

결과 : 김구름

 

위의 코드와 같이 상속하고자 하는 객체의 앞에 ... 하고 점을 3개 찍어주는 것을 Spread 라고하며, 이와 같이 작성할 경우 ... 뒤에 오는 객체의 필드와 메소드들을 상속 받을 수 있다.

물론 이와 같은 방식으로 하위에 상속 받는 객체들을 계속 늘려 나가는 것 또한 가능하다.

const koreanUnivStudent = {
    ...univStudent,
    region : `Seoul`
}

console.log(koreanUnivStudent);

결과 : { name: '김구름', major: '컴퓨터공학과', region: 'Seoul' }

 

 

배열에서의 Spread

아래와 같이 코드를 작성해보자.

const oddNumbers = [1,3,5,7,9];
const evenNumbers = [2,4,6,8,10];

const allNumbers = [...oddNumbers, ...evenNumbers];
console.log(allNumbers)

결과 :

[
  1, 3, 5, 7,  9,
  2, 4, 6, 8, 10
]

 

배열에서도 앞서 정의된 배열의 내용을 그대로 상속 받아서 배열을 만드는 것이 가능하다.

단, 여기서 Spread 는 배열 자체를 가져다 주는 것이 아니라, 배열 내부에 있는 요소들을 넘겨주는 것이다.

 

 

Rest 키워드

rest 키워드는 구조분해 할당을 통해 값을 받아오는 객체 또는 배열이나 변수, 함수 매개변수에서 주로 쓰인다.

아래의 코드를 확인해보자.

function sum(...rest){
    console.log(rest);
}

const result = sum(...allNumbers);

결과 :

[
  1, 3, 5, 7,  9,
  2, 4, 6, 8, 10
]

 

rest 키워드는 인자로 넘어온 배열을 spread 와는 다르게 배열 그 자체로서 받아서 함수로 가져온다.

 

* spread 와 rest 의 차이점

spread 의 경우 배열의 요소들을 받아올 경우, 배열의 틀은 제외한 체 배열의 내부 요소들만 가져온다면

rest 는 배열 그 자체를 가져온다.

따라서 rest 를 활용하여 배열의 모든 요소의 합을 구하는 함수의 경우 다음과 같이 작성 가능하다.

const oddNumbers = [1,3,5,7,9];
const evenNumbers = [2,4,6,8,10];

const allNumbers = [...oddNumbers, ...evenNumbers];

function sum(...rest){
    let result = 0;
    rest.forEach(num => result+=num);

    return result;
}

const result = sum(...allNumbers);
console.log(result);

결과 : 55

 

마지막으로 구조분해 할당에서의 rest 를 알아보자.

아래와 같은 객체가 있다고 가정한다.

const koreanUnivStudent = {
    name : `김구름`,
    major : '컴공',
    region : `서울`
};

여기서 koreanUnivStudent 객체를 이루는 속성들이 엄청나게 많다고 가정해보자.

그리고 그 중에서 몇 개의 속성을 제외한 객체를 따로 만들고 싶다면 어떻게 해야할까?

즉, 기존 객체의 부분집합에 해당하는 객체를 만들려면 어떻게 해야할까?

 

아래의 코드를 확인해보자.

const {name, ...rest} = koreanUnivStudent;
// 위의 코드는 koreanUnivStudent 에서 name 속성을 제외한 나머지 속성들로 객체를 만든다는 의미이다.
console.log(rest);

결과 : { major: '컴공', region: '서울' }

 

위의 결과를 보면 name 속성이 제외된 새로운 객체 rest 가 만들어 졌다는 것을 확인할 수 있다.

이와 같이 구조분해 할당을 통해 객체를 만들 때 rest 문법을 유용하게 사용할 수 있다.

 

* 정리 : spread 는 객체 상속의 개념으로 쓰일 수 있고, rest 는 객체 부분집합의 의미로 쓰일 수 있다.

 

 

참고 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6 

프레임워크를 위한 JavaScript ES6 - 구름EDU