14 - JavaScript References VS Copying (Javascript 30)

이번 파트는 자바스크립트의 참조와 복사에 대해서 공부하는 파트입니다.

 

1. 

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

const team = players;
console.log(players, team);

team[3] = 'Lux';
console.log(players, team);

 결과는 players와 team이 같이 바뀐다 이것은 얕은 복사라서 그렇습니다.

 

2. 

const team2 = players.slice();
const team3 = [].concat(players);
// 아래 두 방법은 ES6부터 사용가능합니다.
const team4 = [...players];
const team5 = Array.from(players);

배열은 위의 방법으로 깊은 복사를 할 수 있습니다.

 

3.

const person = {
	name: 'Wes Bos',
	age: 80
};

// 첫 번째 방법
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
console.log(cap2);

// 두 번째 방법
const cap3 = {...person};

객체는 위와 같은 방법으로 깊은 복사를 할 수 있습니다.

 

4.

const wes = {
  name: 'Wes',
  age: 100,
  social: {
    twitter: '@wesbos',
    facebook: 'wesbos.developer'
  }
};

// 이 방식으로는 social은 깊은복사가 되지 않는다.
const dev = Object.assign({}, wes);
dev.social.twitter = '@wesbos2';
console.log(wes, dev);

// JSON으로 변경한뒤 다시 만들면 깊은 복사가 된다.
const dev2 = JSON.parse(JSON.stringify(wes))
dev2.social.twitter = '@wesbos3';
console.log(wes, dev2);