기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Reference VS Copy</title>
</head>
<body>
<script>
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
const person = {
name: 'Wes Bos',
age: 80
};
const wes = {
name: 'Wes',
age: 100,
social: {
twitter: '@wesbos',
facebook: 'wesbos.developer'
}
};
</script>
</body>
</html>
목표
배열과 객체의 복사와 참조를 정확히 이해한다.
코드 분석
코드들을 분석하기 전에 객체의 특성에 대해서 알아야 한다.
문자열, 숫자, 불린을 제외한 객체는 다른 변수에 대입할 때 값을 복사하는 게 아니라
참조(메모리의 주소)를 복사한다.
따라서, 위의 기본 코드에 적힌 내용을 예시로 보면 현재 ['Wes, 'Sarah', 'Ryan', 'Poppy']라는 하나의 값을 team과 players라는 두 변수가 가리키고 있는 것이다.
이를 Shallow copy(얕은 복사) 라고 한다.
이럴 경우 두 변수 중 하나의 내용에 변화를 주더라도 다른 하나의 변수의 내용에도 변화가 생긴다.
const team2 = players.slice();
const team3 = [].concat(players);
const team4 = [...players];
그의 연장선으로 코드 분석에서 다룰 내용은 deep copy(깊은 복사) 이다.
이는 동일한 배열값을 하나 더 만들어서 따로따로 운영되게 만드는 방식이다.
그렇다면 깊은 복사를 할 수 있는 방법에 대해서 알아보자
.slice()는 말 그대로 배열을 잘라서 리턴해주는 것이다.
그런데 기준점과 길이를 정해주지 않으면 말 그대로 그 배열 자체를 자르지 않고 리턴한다..concat은 여러 배열들을 붙힌 다음 새로운 배열로 리턴하는 메서드이다.players만을 값으로 두기 때문에 동일한 배열이 다른 값으로 리턴되는 내용이다.[...players]는 spread operator(전개 연산자) 라고 부르는 ...이 들어간 내용인데, 이는 ...뒤에 적힌 변수 내용을 그대로 가지고 올 수 있다.
이렇게 만들면 team2, team3, team4의 내용을 바꾸더라도players의 기존 내용은 변하지 않게 된다.
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
.assign은 첫번째에는 어디에, 두번째는 무엇을, 세번째에는 어떻게 바꾸어 넣을 것인지를 적어서 새로운 값을 리턴해준다.
const dev = Object.assign({}, wes);
const dev2 = JSON.parse(JSON.stringify(wes));
JSON.parse(JSON.stringify(wes)는 JSON이라는 가상 저장 공간에 자바스크립트 값을 JSON 문자열로 변환하고, 변화된 배열이 지정되어있을 때 지정된 속성만 선택적으로 포함할 수 있는 JSON.stringify를 사용하여 wes를 넣어 새로운 값을 리턴하는 방식이다.
마무리
객체의 특성에 대해 자세히 알던게 아니라 이해하기 위해 여러가지 자료를 찾아보던 중 Zerocho 님의 사이트에 얕은 복사와 깊은 복사에 대해 너무 잘 설명된 글이 있어서 필요 내용만 발췌해서 사용하였다. (문제 시 자삭)
끝.
'개발 > JavaScript 30' 카테고리의 다른 글
| 16. Mouse move Shadow (0) | 2017.04.22 |
|---|---|
| 15. LocalStorage (0) | 2017.04.22 |
| 13. Slide in on Scroll (0) | 2017.04.19 |
| 12. Key Sequence Detection (0) | 2017.04.18 |
| 11. Custom Video Player (0) | 2017.04.18 |
