240808 Spread Operator 전개 구문

💡 배열이나 객체의 요소를 개별 요소로 확장할 때 사용.

1. 객체에서 사용

• 객체의 속성을 다른 객체로 복사/확장할 때 사용.

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

Spread Operator 없이 그냥 냅다 복사하려고 하면 아래와 같은 상황이 발생한다.
불변성이 깨져버렸다. 😨

const originalUser = {
    name: "훈이",
    age: 5
};

// 객체를 복사하고 수정하고 싶어서 복사를 했는디?!
const updateUser = originalUser;
updateUser.name = "유리";

// 기존 객체마저 바뀌어 버린다 => 불변성이 깨져버림.
console.log("원본 => ", originalUser); // 원본 =>  { name: '유리', age: 5 }
console.log("복사본 => ", updateUser); // 복사본 =>  { name: '유리', age: 5 }

불변성을 지키기 위해 Spread Operator를 써줘야한다!
훈이 지켜..아니 지키지마.. 🙄

const updateUser = {...originalUser}; // { name : "훈이", age : 5} ;
updateUser.name = "유리";

console.log("원본 => ", originalUser); // 원본 =>  { name: '훈이', age: 5 }
console.log("복사본 => ", updateUser); // 복사본 =>  { name: '유리', age: 5 }

2. 배열에서 사용

const first = [1,2,3];
const second = [4,5,6];

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

3. 실습

1.

• 다음 두 배열 array1과 array2가 주어졌을 때, 두 배열을 합친 새 배열 combinedArray를 스프레드 연산자를 사용하여 만들고, 결과를 출력하는 코드를 작성하세요.
• 또한, array1을 스프레드 연산자를 사용하여 복제한 후 원본 배열 array1에 변화를 주어 복제된 배열이 영향을 받지 않는지 검증하는 코드도 작성하세요.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 정답 
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [ 1, 2, 3, 4, 5, 6 ]

const copyArray1 = [...array1];
console.log("복사본 : ", copyArray1); // 복사본 :  [ 1, 2, 3 ]
copyArray1.push(100);
console.log("복사본 수정 : ", copyArray1); // 복사본 수정 :  [ 1, 2, 3, 100 ]
console.log("기존 array1 : ", array1); // 기존 array1 :  [ 1, 2, 3 ]

2.

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

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

// 정답
const mergedObj = { ...obj1, ...obj2 };
mergedObj.name = "원장님";

console.log("결과 => ", mergedObj); // 결과 =>  { name: '원장님', age: 25, email: 'rsoony@sparta.com' }
console.log("원본 1 => ", obj1); // 원본 1 =>  { name: '르탄이', age: 25 }
console.log("원본 2 => ", obj2); // 원본 2 =>  { name: '르순이', email: 'rsoony@sparta.com' }