spread와 rest

안녕하세요🤗

이번시간에는 spread와 rest 문법에 대해 배워보도록 하겠습니다.

spread

먼저 spread 문법에 대해 배워보겠습니다.

spread는 직역하면 확산, 퍼짐, 전파라는 뜻으로, 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 합니다.

객체

spread에 대해 알아보기 위해 toy 라는 객체를 선언해보겠습니다.

toy라는 객체의 프로퍼티로는 종류와 가격을 나타내는 type과 price 데이터를 넣어주도록 하겠습니다.

const toy = {
    type: "bear",
    price: 15000,
};

그럼 이번에는 toy 객체의 아래쪽에 파랑색 toy와 노랑색 toy 를 객체로 작성해줍시다.

color 라는 키값을 갖는 프로퍼티를 추가해서 두 개의 새로운 객체를 생성해보겠습니다.

const blueToy = {
    type: "bear",
    price: 15000,
    color: "blue",
};

const yellowToy = {
    type: "bear",
    price: 15000,
    color: "yellow",
};

우리가 작성한 객체들을 살펴보면, 새로 추가한 객체들과 toy 객체의 프로퍼티 중 type과 price값이 동일한 것을 볼 수 있습니다.

이렇게 비슷한 프로퍼티를 가진 객체를 생성하려면, 동일한 코드를 여러번 작성해야하는 번거로운 작업을 해야합니다.

우리는 이와 같은 상황에서 spread 문법을 사용할 수 있습니다.

spread는 '...' 기호로 표기하고, 작성된 객체들의 반복되는 프로퍼티들을 spread를 사용해 작성해보도록하겠습니다.

반복되는 프로퍼티들을 포함하는 객체의 이름을, ... 기호 뒤에 작성해주겠습니다.

blueToy의 type: "bear", price: 15000 프로퍼티는 ...toy로 바꿀 수 있고, yellowToy 객체 또한 동일하게 변경할 수 있습니다.

const toy = {
    type: "bear",
    price: 15000,
};

const blueToy = {
    ...toy,
    color: "blue",
};

const yellowToy = {
    ...toy,
    color: "yellow",
};

console.log(blueToy);
console.log(yellowToy);

이렇게 spread는 ...를 사용해, 특정 객체가 가진 프로퍼티들을 펼쳐줍니다.

실제 코드를 실행해보면, blueToy와 yellowToy의 프로퍼티에 toy 객체의 프로퍼티인 type: "bear", price: 15000가 할당된 것을 볼 수 있습니다.

배열

spread 문법은 객체 뿐만 아니라 배열에서도 사용 가능 합니다.

이번에는 color1 이라는 배열에 red, orange, yellow 값을, color2 배열에 blue, navy, purple 값을 넣어보도록하겠습니다.

const color1 = ["red", "orange", "yellow"];
const color2 = ["blue", "navy", "purple"];

그 다음, spread 문법을 이용해 rainbow라는 새로운 배열에 color1과 color2의 요소들을 넣어보도록하겠습니다.

rainbow라는 배열을 생성하고, 먼저 color1 배열의 요소들을, 그 다음 초록색 "green"이라는 값을 넣고, 마지막으로 color2 배열의 요소들을 퍼트려주겠습니다.

const color1 = ["red", "orange", "yellow"];
const color2 = ["blue", "navy", "purple"];

const rainbow = [...color1, "green", ...color2];

console.log(rainbow);

코드를 실행하면, rainbow라는 배열에 빨주노초파남보의 요소들이 알맞게 들어간 것을 확인할 수 있습니다.

이렇게 spread 문법은, 배열이나 객체에서 반복적인 부분을, ... 기호를 사용해 퍼트릴 수 있고, rainbow 배열처럼 순서에 상관 없이 여러번 사용할 수도 있습니다.

rest

다음으로는 rest 문법에 대해 배워보겠습니다.

rest는 "나머지 매개변수" 라고도 하며, rest 문법 또한 ... 기호를 사용하기 때문에 spread 와 비슷해보이지만, 이 둘은 서로 다른 역할을 하는 문법입니다.

spread는 객체나 배열에서 반복적인 값들을 퍼트려주는 문법이지만, rest 는 이와 반대로 특정 부분들을 하나의 배열이나 객체로 묶는 문법입니다.

마찬가지로, 전에 작성했었던 blueToy 라는 객체를 생성해 rest 문법에 대해 자세하게 알아보도록하겠습니다.

객체

객체에서 rest는 구조 분해 할당과 함께 사용됩니다.

blueToy 객체를 생성한 다음, 구조 분해 할당을 통해 blueToy 프로퍼티의 값을 변수들에 할당해주겠습니다.

const blueToy = {
    type: "bear",
    price: 15000,
    color: "blue",
};

const { type, price, color } = blueToy;

console.log(type);
console.log(price);
console.log(color);

이때, 여기서 price, color 각각의 값이 아니라, 이들을 type 값을 제외한 나머지의 값으로 묶어 객체 형태로 출력하고 싶다면, price와 color를 rest 문법을 사용해 출력할 수 있습니다.

const blueToy = {
    type: "bear",
    price: 15000,
    color: "blue",
};

const { type, ...rest } = blueToy;

console.log(type);
console.log(rest);

출력 결과, rest 변수는 객체의 형태로 출력되고, 객체 안에는 blueToy 객체 프로퍼티 중 type 값을 제외한 나머지 값들이 들어있는 것을 볼 수 있습니다.

이렇게 rest는 구조 분해 할당을 통해 원하는 값들을 꺼내고 나머지 값을 별도로 묶어서 할당할 수 있습니다.

그럼 이번엔, type과 rest의 순서를 바꿔 blueToy 객체를 할당하는 코드를 작성해보겠습니다.

const { ...rest, type } = blueToy; // SyntaxError

rest 문법은 spread와는 달리 순서에 상관없이, 여러번 작성 할 수 없고 항상 맨 마지막에 작성해야 하기 때문에 주의해서 작성해야합니다.

배열

다음으로는 rest문법을 배열에서 사용해보도록하겠습니다.

마찬가지로 아까 작성했던 color 배열을 작성한 다음, 구조 분해 할당 문법과 함께 rest를 사용해보겠습니다.

const color = ["red", "orange", "yellow", "green"];
const [c1, c2, ...rest] = color;

console.log(c1);
console.log(c2);
console.log(rest);

이렇게 배열 구조 분해 할당을 통해 color 배열에서 red, orange 값은 밖으로 꺼내고, rest 문법을 사용해 yellow 와 green 값은 별도의 배열로 묶어 rest 변수에 할당했습니다.

코드를 실행하면, rest에는 배열이, c1과 c2에는 color 배열의 0 번째, 1번째 요소가 할당된 것을 확인할 수 있습니다.

함수

이러한 rest와 spread 문법은 함수에서 유용하게 사용되기도 합니다.

먼저 나머지 매개변수라고도 불리는 rest 문법이 함수에서 어떻게 사용되는지 배워보도록하겠습니다.

매개변수로 받은 값을 출력하는 print 함수를 선언해주겠습니다.

print 함수는 6개의 매개변수를 받고, 첫 번째와 두 번째 값을 제외한 나머지 매개변수들을 배열에 담아 출력해보도록하겠습니다.

const print = (a, b, c, d, e, f) => {
  console.log([c, d, e, f]);
};

print(1, 2, 3, 4, 5, 6);

만약 여기서 print 함수가 6개보다 더 많은 매개변수를 받고, 동일하게 첫 번째와 두 번째 값을 제외한 나머지 매개변수들을 배열에 담아 출력해야한다고 가정해봅시다.

그럼 우리는, 이 console.log에 무수히 많은 매개변수들을 변수에 담아 출력해야합니다.

이때 이 a와 b 매개변수를 제외한 나머지 매개변수들을 rest로 묶어서 출력해봅시다.

const print = (a, b, ...rest) => {
    console.log(a);
    console.log(b);
    console.log(rest);
};

print(1, 2, 3, 4, 5, 6);

출력 결과를 보면, a와 b 에는 각각 1과 2의 값이 할당되었고, rest에는 1과 2를 제외한 나머지 값인 [3, 4, 5, 6] 이 할당되었습니다.

이렇게 함수의 매개변수에 rest를 사용하게 되면, rest에는 함수에서 받아온 매개변수들로 이루어진 배열이 할당되게 됩니다.

rest 매개변수는 함수의 매개변수가 매우 많거나, 몇 개가 될 지 모를 떄, 함수에서 받아온 매개변수들을 배열로 나타내야 될 때 유용하게 사용할 수 있는 문법입니다.

rest 와 spread

이렇게 rest와 spread 문법에 대해 배우고, rest 문법을 함수의 매개변수에서 사용하는 방법까지 배워보았습니다.

아직까지는 처음 배우는 개념이다 보니 많이 헷갈릴 수 있습니다.

두 문법의 차이를 헷갈리지 않고 더 명확하게 하기 위해, 이번에는 함수에서 spread와 rest 문법을 모두 사용하는 코드를 작성해보면서 두 문법의 차이점에 대해 살펴보도록하겠습니다.

먼저 numbers라는 배열의 요소들을 print 함수의 파라미터로 넘겨, 매개변수의 값을 출력하는 print함수를 코드로 작성해보겠습니다.

const print = (a, b, c, d, e, f) => {
    console.log(a, b, c, d, e, f);
};

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

numbers 배열에는 1부터 6까지의 값을 넣어주고, print 함수는 이 6개의 요소들을 매개변수로 받아 출력하게 작성해줍니다.

그 다음 print 함수를 호출하고 인수로 numbers[0] 부터 numbers[5] 까지 넘겨주도록 하겠습니다.

const print = (a, b, c, d, e, f) => {
    console.log(a, b, c, d, e, f);
};

const numbers = [1, 2, 3, 4, 5, 6];
print(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], numbers[5]);

이 6개의 매개변수와 인수들만 하더라도 작성하기 매우 번거로운데, 만약 numbers 배열에 10개가 넘는 요소가 존재했다면, 코드가 길어지고 코드를 작성하기 더 까다로웠을 것 같은데요,

이러한 경우에, 우리는 print 함수의 인수 부분을 spread 문법을 이용해 간단하게 작성할 수 있습니다.

spread 문법은, 퍼지다, 확산 의 뜻을 갖고 있고 실제로 배열이나 객체의 값을 퍼트리는 역할을 하는 문법이기 때문에, 이 numbers 배열 요소들을 퍼트려주도록 하겠습니다.

const print = (a, b, c, d, e, f) => {
    console.log(a, b, c, d, e, f);
};

const numbers = [1, 2, 3, 4, 5, 6];
print(...numbers); // spread

출력 결과 아까와 동일한 값이 출력되는 것을 볼 수 있습니다.

함수에서 spread 문법을 사용하면 이렇게 훨씬 간편하게 코드를 작성할 수 있고, spread 문법은 이렇게 인수로 많은 값을 넘겨줘야 할 경우에 자주 사용되는 문법입니다.

이번엔 print 함수의 매개변수 부분을 살펴보겠습니다.

numbers 배열의 요소들이 6개인 것을 알고있기 때문에 파라미터로 6개를 작성해주었는데, 이렇게 작성할 경우, numbers 배열의 요소들이 늘어나거나 적어진다면 오류가 발생 할 위험이 있습니다.

그리고 만약 매개변수로 전달된 값이 매우 많다면, 하나 하나 작성하기 번거롭고 코드의 길이가 길어지게 됩니다.

그럼, 이 print 함수의 매개변수 부분을 rest 문법을 이용해 작성해보겠습니다.

const print = (...rest) => { // rest
    console.log(rest); 
};

const numbers = [1, 2, 3, 4, 5, 6];
print(...numbers); // spread

출력 결과 역시 동일한 값이 출력되고, 이처럼 rest 문법은 매개변수를 전달 받을 때 훨씬 깔끔한 코드를 작성할 수 있도록 도와주는 문법입니다.

정리해보면, spread 문법은 객체나 배열에서 중복된 부분을 퍼트릴 때, 혹은 함수를 호출 할 때 인수로 전달할 값들을 퍼트릴 때 사용되고,

rest 문법은 객체나 배열에서 특정 부분을 하나의 객체나 배열로 묶어야 할 때, 구조 분해 할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때, 그리고 함수의 매개변수로 많은 값들을 전달 받거나 특정 매개변수들을 제외한 나머지 매개변수들을 묶어서 사용할 때 사용되는 문법입니다.

이번 시간에는 이렇게 자바스크립트의 spread와 rest 문법에 대해 배워보았습니다.

다음 시간 부터는 자바스크립트의 비동기 처리에 대해 배워보도록 하겠습니다.

감사합니다.