스프레드 연산자(Spread Operator)

1) 스프레드 연산자란?

: 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있음. 배열, 문자열, 객체 등에 전개를 위해 사용

1️⃣ 스프레드 연산자 예제

const beverage = ['americano', 'latte', 'tea']
console.log(...beverage)

//결과: americano latte tea
console.log('americano', 'latte', 'tea');//→ 같은 결과 즉
// 쉼표로 구분되면서 각각의 아이템으로 전개되어 들어감

const beverage = ['americano', 'latte', 'tea']
const toObject = (a,b,c) => {
return {
  a:a,
  b:b,
  c:c
  }
};
console.log(toObject(...beverage));
// 결과
// {a: "americano", b: "latte", c: "tea"}
// 만약 스프레드 연산자를 사용하지 않으면 하단과 같이 작성해야 같은 결과를 얻을 수 있음
// console.log(toObject(brverage[0], brverage[1], beverage[2]))

// 축약형 표현
// 리턴 키워드 안에 하나의 로직만 담고 있다면, return 키워드가 {}생략 가능
// 객체 데이터를 축약형으로 반환하고 싶다면, ()로 {}를 한번 더 감싸줌
const toObject = (a,b,c) => ({a,b,c});

2️⃣ 스프레드 연산자를 이용한 객체 데아터 생성 예제

// 매개변수에 spread연산자를 활용시, 배열의 개수와 매개변수의 개수가 일치하지 않을 경우,
// 배열의 나머지 요소들을 받아내는 역할을 함. → 이걸 rest parameter라고 부름
const beverage = ['americano', 'latte', 'tea', 'smoothie']//'tea', 'smoothie'가 나머지 아이템
const toObject = (a,b,...c) => {
return{
a:a,
b:b,
c:c
 }
};
console.log(toObject(...beverage));
// 결과
// {a:"americano", b:"latte", c:Array(2)}
// a: "americano"
// b: "latte"
// c: (2) [tea, smoothie]

3️⃣ 2개의 Object를 합치는 방법 2가지 - spread 연산자 예제

const beverage = {coffee: 'latte', allergie:'milk'}
const info = {price: 30, orgin:'korea', birth:'2022-05-30'};
const union = {...beverage, ...info};
console.log(union);
// 결과 {coffee: 'latte', allergie:'milk',price: 30, orgin:'korea', birth:'2022-05-30'}

// 여기서 객체에 key를 업데이트 하고 싶은 경우
const union = {...beverage, ...info, price: 50};
console.log(union);
// 결과 {coffee: 'latte', allergie:'milk',price: 50, orgin:'korea', birth:'2022-05-30'}
// 기존의 값은 변하지 않으면서 price만 변경됨

4️⃣ 2개의 Object를 합치는 방법 2가지 - Object.assign() 예제

const beverage = {coffee: 'latte', allergie:'milk'}
const info = {price: 30, orgin:'korea', birth:'2022-05-30'};
const union = Object.assign(beverage, info);
console.log(union);
// 결과 {coffee: 'latte', allergie:'milk',price: 30, orgin:'korea', birth:'2022-05-30'}

2) push 대신 사용하는 스프레드 연산자 예제

1️⃣ 배열에서 하나의 값을 추가할 때, push 사용시 마지막 인자로 추가됨

const beverage = ["americano", "latte"];
beverage.push("tea");
console.log(beverage)// (3) ["americano", "latte", "tea"]

2️⃣ push는 기존의 beverage를 를 수정하는 것. spread 연산자를 사용하여 요소를 추가한 새로운 배열을 만들게 됨

const beverage = ["americano", "latte"];
beverage = [...bevergae, "tea"]
console.log(beverage)// (3) ["americano", "latte", "tea"]

3) 불변성

: 기존의 값은 유지하면서 새로운 값을 추가하는 것. 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미.

1️⃣ 원시 데이터

• 원시 데이터 종류: String, Number, Boolean, undefined, null
• 데이터가 불변함
• 데이터의 생김새가 같으면 똑같은 메모리 주소를 바라보고 있고, 이를 같은 데이터라고 해도 무방

2️⃣ 참조형 데이터

• 참조형 데이터 종류: Object, Array, Function
• 데이터가 불변하지 ❌ → 변수 선언할 때마다 새로운 메모리 주소에 각 참조형 데이터들이 할당
• 데이터의 생김새가 같아도 서로 같은 데이터가 아닐 수 있음
• 할당 연산자(a=b)를 사용할 때, 같은 메모리를 바라보고 있는 여러개의 변수들이 있을 때 한쪽 변수(a), 속성의 값을 수정했을 경우, 다른 변수(b) 속성의 값도 바뀌는 경우가 있음 → 불변성을 지키지 못함
• 이 문제를 해결하기 위해 복사(얕은 복사)를 이용하여 불변성을 지켜줌

4) 얕은 복사

1️⃣ 얕은 복사: Object.assign

Object.assign({ }, 변수);

2️⃣ 얕은 복사: Object.assign 예제1

const user = {
name: 'Yuntroll',
address: 'seoul',
gender: ['female'],
}

const copyUser = Object.assign({}, user); //user를 copyUser에 얕은 복사
console.log(copyUser === user);

user.address = 'busan' //user 속성 값 변경
console.log('address', address);
console.log('copyUser', copyUser); //불변

// 결과
false
user {name: "Yuntroll", address: "seoul", gender: Array(1)}
copyUser {name: "Yuntroll", address: "busan", gender: Array(1)}

3️⃣ 얕은 복사: spread operator 얕은 복사 예제2

const user = {
name: 'Yuntroll',
address: 'seoul',
gender: ['female'],
}

const copyUser = {...user}; // spread 연산자로 copyUser에 user를 얕은 복사
console.log(copyUser === user); // false → 불변성이 지켜짐

user.address = 'busan';
console.log('user', user);
console.log('copyUser', copyUser);  // 불변

// 결과
false
user {name: "Yuntroll", address: "seoul", gender: Array(1)}
copyUser {name: "Yuntroll", address: "busan", gender: Array(1)}

4️⃣ 얕은 복사: spread operator 얕은 복사 예제3(불변성❌)

: 여기서 user.gender 데이터는 배열이고, 배열은 참조형 데이터이기 때문에, 배열에 push로 데이터가 추가되면서 불변성이 지켜지지 않아, copyUser.gender가 user.gender와 똑같이 변함

const user = {
name: 'Yuntroll',
address: 'seoul',
Emale: ['cadyky95@naver.com'],
}

const copyUser = {...user}; // spread 연산자로 copyUser에 user를 얕은 복사
user.address = 'busan';

user.Emale.push('cadyky95@gmail.com'); //push로 배열에 데이터 추가
console.log(copyUser.gender === user.gender); //true → 불변성이 안지켜짐
console.log('user', user);
console.log('copyUser', copyUser);

// 결과
user {name: "Yuntroll", address: "busan", Emale: Array(2)}
Emale: (2), ['cadyky95@naver.com', 'cadyky95@gmail.com']
address: busna
name: Yuntroll

copyUser {name: "Yuntroll", address: "seoul", gender: Array(2)}
Emale: (2), ['cadyky95@naver.com', 'cadyky95@gmail.com']
address: seoul
name: Yuntroll