[JS] 스프레드 연산자와 rest파라미터 그리고 구조분해할당

> 같이보면 좋은 링크 :: 구조분해할당(비구조화할당)

❓ spread(스프레드)연산자란?

ES6 문법에 새롭게 추가된 스프레드 연산자는 전개 구문이라고도 한다.

이를 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 같은 경우)로 확장하여 0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있다고 MDN의 정의로 나와있다.

근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 코드를 보면서 하나씩 뜯어보도록하자.

 스프레드 연산자

let classMates = {
	name: "뽀로로",
    	age: 5,
    	school: "노는게제일좋고등학교"
}

와 같은 객체를 담은 변수가 있다고 가정해보자. 다음의 객체를 다른 변수에 복사하려면 다음과 같아야한다.

 객체의 key값 담기

// 위의 변수와 같은 데이터를 갖는 변수를 만들어보자.
let bbb = {
	name: classMates.name,
    	age: classMates.age,
    	school: classMates.school
}

이런식으로 변수에 객체값을 꺼내서 담을 수 있지만 스프레드 연산자를 이용하면 문장을 간결하게쓰고 데이터를 담을 수 있다.

 스프레드 연산자

let ccc = { ...classMates }

이런식으로 간결하게 데이터값을 복사해서 담을 수 있다.

원본은 회손되지 않는다. ccc라는 변수의 데이터 값을 수정해도 classMates의 값까진 수정되지 않는다.

이처럼 원본을 회손하지않고 데이터를 복사해오는 것을 얕은 복사(ShallowCopy)라 한다.

한편 스프레드 연산자는 데이터 값만 복사하는 것은 아니다. 배열같은 경우 복사해서 합치는 것도 가능하다. MDN의 예제를 살펴보자.

 배열 합치기(concat)

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); // ["a", "b", "c", "d", "e", "f"]

각각의 배열을 합치는 방법으로는 concat이라는 메소드가 있다. 하지만 concat을 안쓰고 스프레드 연산자로도 합칠 수 있다.

 스프레드 연산자로 배열 합치기

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = [...array1, ...array2];

console.log(array3); // ["a", "b", "c", "d", "e", "f"]

배열도 객체와 동일하게 원본을 회손하지않고 데이터 수정이 가능하다.

❓rest 파라미터란?

ES6 문법에 새롭게 추가된 rest파라미터는 스프레드 연산자와도 연관이 깊다.

스프레드 연산자가 모든 값을 복사해준다면 rest 파라미터는 필요없는 값은 제외한 나머지 값만을 묶어준다고 볼 수 있다!

근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 코드를 보면서 하나씩 뜯어보도록하자.

 객체 선언

let classMates = {
	name: "뽀로로",
    	age: 5,
    	school: "노는게제일좋고등학교",
        money: 5000,
        weight: 100
}

와 같은 객체를 담은 변수가 있다고 가정해보자. 다음의 객체에서 age와 money만 뺀 새로운 값을 담고싶다면 다음과 같을 수 있다.

 객체값 삭제

delete classMates.age;
delete classMates.money;

이런식으로 delete를 이용해서 객체 값을 지워야 했다. 만약 원본을 회손하지 않고 객체를 복사하고 싶다면?

객체를 하나 더 생성해서 값을 지워야 했다. 하지만 rest 파라미터를 사용하면 손쉽게 간결하게 코드를 쓸 수 있다.

  rest 파라미터

let { age, money, ...rest } = classMates;

console.log(classMates);
/* 출력값
let classMates = {
	name: "뽀로로",
    	age: 5,
    	school: "노는게제일좋고등학교",
        money: 5000,
        weight: 100
}
*/

console.log(rest);
/* 출력값
let classMates = {
	name: "뽀로로",
    	school: "노는게제일좋고등학교",
        weight: 100
}
*/

이런식으로 간결하게 데이터값을 복사해서 담을 수 있다. { } 안에 빼고 싶은 key값을 적고, 제일 마지막으로 ...rest를 담는다.

그러면 rest 파라미터는 나머지값을 묶어주는 역할이라고 했기에 age,와 money를 뺀 나머지 값이 담긴다.

이때 rest대신 다른 이름을 넣어도 된다. 일종의 관례일뿐 평범하게 { age, money, ...peguin } 이런식으로 써도 된다.