Shallow Copy는 A가 B에 대입을 하고
A의 값을 바꿨을 때 B의 값도 따라서 변경이 된다.
이 현상은 대입 할 때 A의 값을 그대로 넣는게 아니고
값을 참조하는 것이기 때문이다.
C언어에서 포인터를 배운 사람은 이해가 갈 것이다.
처음 접하는 사람은 이게 무슨 소리인가 하는데
예를 들자면
A의 값이 "한식이, 두식이, 석삼"이 있을 때
각각의 값의 주소가 1번지 2번지 3번지라고 치자
이럴 때 B에게 대입을 하면 "한식이, 두식이, 석삼"을 받는것이 아니고
1번지, 2번지, 3번지를 받아 그 위치에 있는 값을 참조하라는 것이다.
이 문제를 해결하기 위한 방법으로 값을 하나하나 씩 대입하면 된다.
예제를 한번 확인해보자.
<html>
<head>
<meta charset="UTF-8">
<title>배열 통 카피</title>
<link rel="icon" href="img/favicon.ico">
<style>
/*css 주석*/
</style>
<!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
</head>
<body>
<!--html 주석-->
</body>
<script>
var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function shallowCopy(){
var copyNum = num;
console.log("num : " + num);
console.log("copyNum : " + copyNum);
num[0] = 50;
console.log("num : " + num);
console.log("copyNum : " + copyNum);
}
shallowCopy();
// 위 코드를 동작하면 num을 나중에 바꾸는데 copy엔 값도 안넣었지만
// copy도 따라서 변경된다. 이 현상을 shallow copy현상이라고 한다.
function copyArr(){
var copy = [];
// 배열간 복사를 위해서는 값을 하나씩 전달 해야 한다.
for(var i = 0; i < num.length; i++){
copy[i] = num[i];
}
copy[0] = 99;
console.log("copy : " + copy);
console.log("num : " + num);
}
copyArr();
</script>
</html>
콘솔의 결과가 다음과 같이 나온다.
두번째의 결과는 하나하나 씩 대입하여 참조 형식으로 들어가지 않았다.
이 현상은 자기도 모르게 아무 생각없이 대입하여 나오는 실수로
값이 예상과 다르게 나온다면 꼭 의심해보고 주의하여야 한다.
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법 (0) | 2018.10.19 |
|---|---|
| [JS]04-08.for each문, 반복문 한꺼번에 (0) | 2018.10.19 |
| [JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join) (0) | 2018.10.19 |
| [JS]04-05.2차원 배열 생성, 값 조회, 추가 (0) | 2018.10.19 |
| [JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift (0) | 2018.10.18 |