Day14-JavaScript References VS Copying

CODE

구현 사항: 배열과 객체의 복사 방법 익히기

1) 변수에 원시값(단순 데이터)을 할당하는 것은 아래 그림과 같이 값 그 자체를 접근하는 것이며, let num2 = num;과 같은 방식으로 값 할당 후 num2의 값을 다른 원시값으로 바꿔 할당하여도 num이 바뀌지 않는다.

let num = 10;
let num2 = num;
console.log(num, num2);
// 10 20
num = 30;
console.log(num, num2);
// 30 20

let name = "John";
let name2 = name;
console.log(name, name2);
// John Carl
name2 = "Jane";
console.log(name, name2);

2) 배열, 객체와 같은 참조값은 참조로 접근하는 것이며, team에 players 배열을 할당하는 것은 team이 players 배열을 참조하도록 하는 것이므로 team의 4번째 요소를 변경하는 것은 곧 players의 4번째 요소를 변경하는 것과 같다.

const players = ["Wes", "Sarah", "Ryan", "Poppy"];
const team = players;
team[4] = "Henry";
console.log(players);
// ['Wes', 'Sarah', 'Ryan', 'Poppy', 'Henry']

3) 배열을 '복사'하여 사용하기 위해 다음과 같은 방법을 사용할 수 있다.

const teamCopied = players.slice();
const teamCopied2 = [].concat(players);
const teamCopied3 = [...players];
const teamCopied4 = Array.from(players);

teamCopied3[4] = "Kate";
console.log(teamCopied3);
// ['Wes', 'Sarah', 'Ryan', 'Poppy', 'Kate']
console.log(team);
// ['Wes', 'Sarah', 'Ryan', 'Poppy', 'Henry']

• slice()
• concat()
• spread 문법
• Array.from()

4) 객체 또한 배열과 동일한 방법으로 작동함, boss에 person을 복사하여 할당했지만, 실제로는 boss가 person을 참조하고 있으므로 boss의 age를 변경하면 person의 age가 변경되게 됨

const person = {
  name: "Wes Bos",
  age: 80,
};
const boss = person;
boss.age = 10;
console.log(person);
// {name: 'Wes Bos', age: 10}

5) 객체를 '복사'하여 사용하기 위해 다음과 같은 방법을 사용할 수 있다.

const bossCopied = Object.assign({}, person, { number: 100, age: 10 });
console.log(bossCopied);
// {name: 'Wes Bos', age: 10, number: 100}

const bossCopied2 = { ...person };
console.log(bossCopied2);
// {name: 'Wes Bos', age: 10}

• Object.assign()
• spread 문법

참고