[JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터

스프레드 연산자 (. . .)

세개의 점(. . .)으로 이루어진 연산자는

기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.

객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 

사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다.  

 

• 배열 복제 · 병합 · 변경 · 추가
• 객체 복제 · 병합 · 변경 · 추가
• 함수 매개인자
• rest 파라미터 - 함수
• rest 파라미터 - 객체 · 배열

let array = [1,2,3,4,5];
/*
    ... ➡️ 스프레드 문법(점 3개)
    
    배열 안에 있는 항목들(요소들)을 전부 꺼내준다.
    즉 [...array]은 array에 있는 항목을 전부 꺼내
    새로운 배열[]에 넣어주겠다는 뜻
*/
let new_array = [...array];
console.log(new_array);

 

---

📌 [배열] 복제

ES6의 Spread연산자를 통해 간편하게 배열을 복제할 수 있다. 

여기서 복제는 Reference 복사가 아닌 값 복사로 newArray에서 변경을 해도 기존 array는 변경이 없다.

const array = [1,2,3,4,5]; 

const newArray = [...array];

---

📌 [배열] 병합

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

const arrayC = [...arrayA, ...arrayB]; 
console.log(arrayC); // [1,2,3,4,5,6];

---

📌 [배열] 기존 값 변경

originalArray.slice(0, 1)은 배열의 첫 번째 요소를 가져오고, 

originalArray.slice(2)는 나머지 요소들을 가져옵니다. 10은 새로 추가된 요소입니다.

const originalArray = [1, 2, 3];
const modifiedArray = [...originalArray.slice(0, 1), 10, ...originalArray.slice(2)];

console.log(modifiedArray); // [1, 10, 3]

---

📌 [배열] 새로운 값 추가

// 기존 배열에 새로운 값을 추가하는 경우
const arr1 = [1, 2, 3, 4];
const arr2 = [...arr1, 5, 6, 7];
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]

 

---

📌 {객체} 복제

const objA = { a:1, b:2 };
const objB = {...objA}; 

console.log(objB); // {a:1, b:2}

---

📌 {객체} 병합

const human1 = {
  lastName: "kwon",
  firstName: "sohyun"
};

const human2 = {
  position: "short step"
};

const obj = {...human1, ...human2}
console.log(obj);

---

📌 {객체} 기존 값 변경

주로 React 에서 state 관리할때 불변성을 유지하며, 객체 중 일부만 update 를 해야할 때 쓰인다. 

const objA = { a:1, b:2, c:3 };
const objB = { ...objA, b:4 }; // objA복제 후, b속성만 덮어쓰기 

console.log(objB); // {a:1, b:4, c:3}

---

📌 {객체} 새로운 값 추가

const userName={
name : 'Ryu'
}

const userAge={
age : '25'
}

const combinedUser={
	...userName, ...userAge, birthpalce:'서울'
};

 

---

🚀 함수 매개인자

함수 인자로 스프레드 연산자를 넣어서 사용할 수도 있다. 

test()의 인자는 총 3개이므로, arr 배열의 1, 2, 3까지만 test() 함수의 인자로 들어가게 된다.

function test(x, y, z){
    return x + y + z;
}

const arr = [1, 2, 3, 4];
const result = test(...arr); // 함수 인자에 사용
console.log(result); // 6

 

---

🚀 rest 파라미터 - 함수

rest는 함수의 매개변수로 사용될 때, 

함수의 인자 값들을 그대로 가져와서 펼쳐주는 역할을 수행한다.

 

sum()의 인자로 들어온 값들을 ...rest로 받아왔다.

곧, ...rest란 함수의 인자 값들을 배열로 나타낸 형태라고 보면 된다.

(sum()에서 return rest를 하면 [1, 2, 3]이라는 값이 출력된다.) 

// ▶ 1 함수 인자를 모두 더하는 함수
function sum(...rest) { // 매개변수에 rest 사용
    return rest.reduce((acc, cur) => {
        return acc + cur;
    }, 0)
}

const result = sum(1, 2, 3);
console.log(result); // 6


// ▶ 2 함수 인자를 배열로 만드는 함수
function makeArr(...rest) {
    return Array.from(rest);
}

const newArr = makeArr(1, 2, 3, 4, 5);
console.log(newArr); // [1, 2, 3, 4, 5]

 

🚀 rest 파라미터 - 객체 • 배열

 

배열과 객체에서의 rest는 비구조화 할당(구조 분해 할당)에서 나머지 패턴으로 많이 쓰인다.
a, b처럼 변수가 정해져있으면 그 변수에 차례대로 값을 할당하고, 

그 외에는 나머지(rest)에 할당시킨다는 개념이다.

// ▶ 배열
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // 3, 4, 5

// ▶ 객체
const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4, e: 5};
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4, e: 5}

 

---