Wesbos - 배열 참조 vs 복사

---

---

참조와 원본 간의 관계

num, string, boolean값들의 참조 변수는 앞에 선언된 것을 우선시한다.

age = 100;
age = age2;

console.log(age, age2); // 100 100

//하지만 여기서 age값을 바꿔주면
age = 200;
console.log(age, age2); // 200 100 이 결과값으로 도출된다.

---

하지만!!! 배열에선 다르다

💡 위에선 참조와 원본이 다르게 처리됐지만, 배열에선 참조를 변경 시 원본에 영향을 준다.

const players = ['hoonjoo', 'chanjoo', 'jaeseong', 'hyobum'];
const team = players;

team[1] = 'saeeun';

//team = ['hoonjoo', 'saeeun', 'jaeseong', 'hyobum'];
//players = ['hoonjoo', 'saeeun', 'jaeseong', 'hyobum'];

그렇다면, 배열에서 원본에 영향을 주지 않고 참조를 변경하는 방법은 없을까?

---

array.slice()

💡 앞에서 배웠던 것과 같이, slice()를 사용하면 배열의 복사본을 만든다.

concat(array)

💡 [].concat(array)를 사용해서 빈 배열에 기존 배열을 합치는 식의 복사를 할 수도 있다.

spread

💡 newArray = […orgArray]; 와 같은 방식을 사용할 수도 있다.

Array.from()

💡 newArray = Array.from(orgArray);

---

복사와 원본 간의 관계

object.assign()

💡 특정 객체를 “얕게” 복사함

object.assign({}, 복사할 객체)

assign을 통해 복사를 할 경우,
이는 얕은 복사이기 때문에 한 층에 대한 변경은 원본 배열 객체에는 영향을 주지 않는다!

하지만, 더 깊은 층에 대한 변경은 원본 배열에도 영향을 준다

---

예시

const hoonjoo = {
  name: 'hoonjoo',
  country: 'Korea',
  social: {
    twitter: '@hoon',
    instagram: '#hooonjooo',
  },
};

const second = object.assign({}, hoonjoo);

// 이 경우 원본 배열에는 영향 주지 않음 (원본 : Korea, 복사본 : USA)
second.country = 'USA';

//하지만....
// 이 경우 social의 층이 깊기 때문에 원본 배열에도 영향을 준다
second.social.instagram = '$hooonjooo';

//따라서 이 두 결과값은 동일하다
hoonjoo.social;
second.social;

그렇다면 딥 클론을 할 수 있는 방법은?

편법!!

const second = JSON.parse(JSON.stringify(hoonjoo));

---