Spread Operator(전개구문) 사용하기

객체 또는 배열이 가지고 있는 요소를 쫙 펼쳐서 사용하여 객체나 배열을 복사할때 주로 쓰인다!

 

이렇게 originalUser에 있던 걸 updateUser에 할당해서 이름을 바꿔보았다.

원하는 결과가 전혀 아닌 원본 객체 내용도 바뀌는 것을 확인할수 있다. (당황당)

 

이를 해결하기위해 spread 연산자를 사용할 수 있다.

객체에서의 사용

• ...originalUser로 새로운 객체를 생성한것이다.
• { ... originalUser } : originalUser에 있는 객체 들을 촥 펼친 다음 중괄호를 감싸준거라 생각하면 쉽다. 
• 즉 {name : "르탄이", age : 28} 객체가 다시 만들어 진것이다.

const originalUser = { name: "르탄이", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "르탄이", age: 28, location: "한국" }

 

배열에서의 사용

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

 

예제 살펴보기

• 다음 두 객체 obj1과 obj2가 주어졌을 때, 두 객체의 속성을 스프레드 연산자를 사용하여 병합한 새 객체 mergedObj를 생성하고 결과를 출력하세요.
• 단, 같은 이름의 키가 존재할 경우 obj2의 값이 우선하여 반영되어야 합니다. 또한, mergedObj에서 name 속성의 값을 **'원장님'**으로 변경 후, 원본 객체 obj1과 obj2가 변경되지 않는 것을 확인하세요.

const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rsoony@sparta.com" };

• 동일한 키가 있을때에는 뒤에있는 객체가 앞에있는 객체를 덮어쓴다.
• 원본배열이 바뀌지 않고 새로운 객체를 바꾸었다(불변성을 유지함)

 

REST Operator

나머지 연산자(rest operator) 는 spread operator와 비슷하다.

사용방법 : ...변수명

 

1.함수의 매개변수로 쓰인다

function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

 

sum을 배열로 넘긴적이 없는데도 매개변수에서 rest operator로 사용해서 배열로 반환 해준다.

 

2.객체 분해 할당 시, 여러값을 그룹핑 해준다.

const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};

 

만약 여기서 name, age, country만을 가진 객체를 만들고 싶다면? (occupation을 제외한 나머지를 객체로 묶기)

const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }

 

이방식은 정말 많이 쓰이는 방식이라고 하니 꼭 알아두자!