JS

• JS에서 단일 상수,문자열 등의 변수는 독립된 값을 가진다.
• 이러한 변수를 , 다른 변수의 대입해서 복사개념으로 사용하고, 기존의 변숫 값을 변경해도, 독립된 값들을 유지한다.

let age = 100;
let age2 = age;
console.log(age, age2);
age = 200;
console.log(age, age2);
// 200 100

let name = "young";
let name2 = name;
console.log(name, name2);
name = "min";
console.log(name, name2);
// min young

• 하지만, 배열이나 오브젝트는 완벽한 복사가 이뤄지지 않는다.
• 이는, 기존의 배열이나 오브젝트를, 복사한 것들이 같은 주소를 참조(Reference) 하기 때문이다.

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

// and we want to make a copy of it.
const team = players;

console.log(players, team);
// You might think we can just do something like this:
team[3] = "Lux";
console.log(players, team);

// however what happens when we update that array?
// now here is the problem!
// oh no - we have edited the original array too!
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
// 배열은 독립된 값 변경이 이뤄지지 않는다.
// 이건 완벽한 복사가 아니다. 주소의 공유다.
// ["Wes", "Sarah", "Ryan", "Lux"]
// ["Wes", "Sarah", "Ryan", "Lux"]

그럼, 완벽한 복사를 하기 위해선 어떻게 할까 ?

방법은 여러가지가 있다.

• 배열의 경우
  • Array.slice();
  • [ ].concat(기존배열)
  • Array.from(기존배열)
  • ★ (ES6+) spread 연산자

// one way
const team2 = players.slice();
// or create a new array and concat the old one in
const team3 = [].concat(players);
// or use the new ES6 Spread
const team4 = [...players];
// now when we update it, the original one isn't changed
team4[3] = "heeee haww";
console.log(team, team4)
// 위에 완벽한 복사 방법들 중, spread 연산자 결과에 값을 업데이트
// 기존에 오리지널 배열과 독립된 결과를 보존한다.
// ["Wes", "Sarah", "Ryan", "Lux"]
// ["Wes", "Sarah", "Ryan", "heeee haww"]

// or use Array.from()
const team5 = Array.from(players);
team5[3] = "heeee haww";
console.log(team, team5)

• 오브젝트의 경우
  • Object.assign({ }, 기존오브젝트, { 할당할 프로퍼티 })
  • spread 연산자
  • (선호하지는 않지만) JSON.parse(JSON.stringify(기존오브젝트))

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

// and think we make a copy:
const man = person;
man.number = 99;
console.log(person, man);
// 단순한 대입 복사는 완벽한 복사가 아니다.
// 배열과 마찬가지로 같은 주소를 참조하는 개념이다.
// { name: "Wes Bos", age: 80, number: 99 }
// { name: "Wes Bos", age: 80, number: 99 }

// how do we take a copy instead?
// We will hopefully soon see the object ...spread
const man2 = {...person};
man2.number = 101;
console.log(person,man2);
// object 역시 spread 연산을 통해 완벽한 복사가 가능하다.
// { name: "Wes Bos", age: 80, number: 99 }
// { name: "Wes Bos", age: 80, number: 101 }

// or use Object.assign({}, 복사할 object, { 프로퍼티들 });
const man3 = Object.assign({}, person, { number : 102, age : 27 });
console.log(person, man3);
// { name: "Wes Bos", age: 80, number: 99 }
// { name: "Wes Bos", age: 27, number: 102 }

// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
// 오브젝트 하나 선언
const young = {
	name : "young",
	age : 27,
	social : {
		facebook : "@young",
		instagram : "@young.develper"
	}
};

console.log(young);
const dev = Object.assign({}, young);
const dev2 = JSON.parse(JSON.stringify(young));
console.log(dev,dev2);