[JavaScript] 자바스크립트 spread와 rest

※ 본 포스팅은 패스트 캠퍼스 강의를 정리한 내용입니다.

---

 

목차

 

spread 연산자

rest

함수 파라미터에서의 rest

함수 인자에서의 spread

 

---

 

---

[spread 연산자]

spread : 펼치다, 퍼트리다

이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다.

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

const cuteSlime = {
	name : '슬라임',
    attribute : 'cute'
}

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

이 객체들을 출력한다면 다음과 같을 것이다.

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

각 slime마다 가지고 있는 속성들이 출력된다.

만약 기존에 만들었던 객체를 참고해서 새로운 객체를 만든다면 spread를 사용하면 편리하다.

spread는 ... 연산자를 사용한다.

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

const cuteSlime = {
	...slime, //spread 연산자
    attribute : 'cute'
}

const purpleCuteSlime = {
	...cuteSlime
    color : 'purple'
}

...연산자를 사용하여 기존에 가지고 있던 객체의 정보가 그대로 들어오게 된다.

 

객체가 아닌 배열에서도 사용이 가능하다.

const animals = ['개','고양이','참새'];
const anotherAnimals = [...animals,'비둘기'];// == animals.concat('비둘기');

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

 

---

[rest]

rest의 생김새는 spread와 비슷하지만 역할이 다르다.

rest : 객체, 배열, 함수 파라미터에서 사용된다.

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

const {color, ...rest} = purpleCuteSlime;
// 객체 비구조화 할당을 하면서 ...rest를 넣어주었다.
console.log(color); // purple
console.log(rest);

rest라는 객체 안에 color를 제외한 attribute와 name 값이 ...rest안으로 들어오게 된다.

rest안에 attribute와 name 값이 들어있다.

 

객체가 아닌 배열에서도 사용이 가능하다.

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

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

※ 이때 배열에서의 rest는 가장 마지막에 와야 한다.

 

<spread와 rest 비교>

spread : 특정 객체나 배열 안에 다른 객체들을 퍼트리는 역할

rest : 퍼져있는 것들을 다시 모아 오는 역할

 

---

[함수 파라미터에서의 rest]

파라미터로 넣어준 모든 값들을 합해주는 sum함수가 있다.

sum 함수에 인자값을 매개변수의 수 만큼 입력한다면 작동한다.

하지만 sum함수에 인자값을 매개변수의 수보다 적게 입력한다면 NaN가 나타난다.

매개변수의 수보다 많게 입력한다면 작동을 하지 않을 것이다.

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

console.log(sum(1,2,3,4,5,6)); // NaN

 

만약 함수의 매개변수가 여러 개의 값을 받아들여야 한다면... rest을 사용하면 된다.

함수 인자로 넣어준 값들이 하나의 배열로 받아와 reduce를 사용한다.

function sum(...rest){
	return rest.reduce((acc,current) => acc+current,0);
    //기본값 0으로 시작해서 
    //이 0이라는 값이 acc가 되고
    //current는 1,2,3,4,5,6,7,8,9가 들어가서 acc+current를 순차적으로 실행한다.
}

console.log(sum(1,2,3,4,5,6,7,8,9));

이때 sum 함수 안에 있는 rest는 하나의 배열이다.

기본값 0으로 시작하여, 이 0이라는 값이 acc가 되고, current는 1,2,3,4,5,6,7,8,9가 들어가서 acc+current를 순차적으로 실행한다.

---

[함수 인자에서의 spread]

함수 인자에서도 ... 연산자를 사용할 수 있다.

 

배열의 특정 인덱스 값을 함수 인자에 넣어야 하는 상황이 생긴다.

function subtract(x,y){
	return x-y;
}

const numbers = [1,2];
const result = subtract(numbers[0],numbers[1]);
console.log(result);

이러한 작업을 해야하는상황에서는  배열의 인덱스를 사용하여 인자값을 넣기보다는 ...연산자를 사용할 수 있다.

function subtract(x,y){
	return x-y;
}

const numbers = [1,2];
const result = subtract(...numbers);
console.log(result);

 

 

[JavaScript] 자바스크립트 Scope와 hoisting

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]