[Javascript] Rest Parameters(나머지 매개변수) / Spread Operator(스프레드 연산자)

Rest Parameters (나머지 연산자) : 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

 

기본 구문 > 

function sum(a, b, ...rest) {
	// 넣고 싶은 구문
}

 

※ 주의할 점 

1) 함수 하나에 하나의 나머지 매개변수만 존재해야 한다.

function sum(...rest1, ...rest2, ...rest3) ❌

function sum(a, b, ...rest) ⭕

 

2) 나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다. 

function sum(...rest, a, b) ❌

function sum(a, b, ... rest) ⭕

 

예제 >

function sum(...Arrest) {
	let total = 0;
    for (const num of Arrest) {
    	total += num;
    }
    return total;
}

console.log(sum(2, 3, 6)); // 11출력
console.log(sum(1, 5, 8, 9)); // 23출력

 

 

---

 

Spread Operator(스프레드 연산자) : 객채 또는 배열을 펼쳐주는 연산자

 

1. 객체 펼치기 > 

 

1) 기본 객체 구문

const obj1 = {
	name: '둘리'
}

const obj2 = {
    name: '둘리',
    age: 10
}

console.log(obj1);
console.log(obj2);

2) 스프레드 연산자 사용하기 

const obj1 = {
	name: '둘리'
}

const obj2 = {
    ...obj1, //  스프레드 연산자 써서 obj2객체에 obj1객체를 뿌려줌!
    age: 10
}

console.log(obj1);
console.log(obj2);

 

 

2. 배열 펼치기 >

 

1) 배열에 스프레드 연산자 사용하기

const animals = ['고양이','강아지','참새'];
const Animals = [..animals, '비둘기']; 
// 기존 animals배열을 건들이지 않고 새로운 배열에 새로운 항목만 추가되게 만들었다.

console.log(Animals); // ['고양이','강아지','참새','비둘기'] 라는 배열이 출력됨 !

 

2) 배열에서 스프레드 연산자를 쓸 때는 여러 번 사용할 수 있다.

cosnt numbers = [1,2,3,4,5];
const Numbers = [...numbers, 10000, ...numbers];

console.log(Numbers); // [1,2,3,4,5, 10000, 1,2,3,4,5] 라는 배열이 출력됨!