[javascript] 6. 자바스크립트 값 복사와 참조 복사 그리고 clone

[javascript] 6. 자바스크립트 값 복사와 참조 복사

* 목차 *

1. 자바 스크립에서의 복사

2. 자바 스크립에서의 배열 및 객체의 깊은 복사 방법

1. 자바 스크립에서의 복사

  1) 자바스크립에 존재하는 복사 방식

복사 방식	복사 대상	해당 되는 자료형	차이점
값 복사	값 자체를 복사	기본 자료형 중   (숫자, 문자열, bool)	메모리의 값을 복사
참조 복사	값이 들어있는 메모리 주소 값을 복사	객체 또는 배열  (자료형들이 모인것)	메모리의 주소를 복사

 * "참조" 란? 주소 값을 이야기 합니다.

  2) 예제를 통한 정확한 이해 

    (1) 값 복사

      - "test"에 할당된 값(10)을 복사 하기 때문에 복사 한 후 원본(test)의 값이 변하여도
        미리 복사한 대상(test1)의 값은 변하지 않는다.

var test = 10;

var test1 = test;

test = 20;

alert(test); // 결과 값 20

alert(test1); // 결과 값 10

    (2) 참조 복사

      - "test"에 할당된 자료(배열A)의 메모리 주소를 "test1"에 복사 하기 때문에 test에 값이 바뀌면 

         test1의 값도 변견된다. 왜냐 하면 test와 test1은 동일한 대상의 메모리 주소 값을 가지고 있기 때문이다. 

var test = [1,2,3,4];

var test1 = test;

test[0]=20;

alert("test[0]" + test[0]); // 결과 : "test[0] 20"

alert("test1[0]" + test1[0]); // 결과 : "test1[0] 20"

2. 자바 스크립에서의 배열 및 객체의 깊은 복사 방법

  1) 1:1 매칭을 통합 대입 방법

    - 상기 1-1) 에서 배열이나, 객체를 복사 할때 대입 참조 복사가 이루어 진다고 했습니다.

      그러나 참조 복사가 아닌 깊은 복사를 해야 하는 경우도 발생합니다.

      이럴때는 1:1 대입을 해주는 함수(object_copy)를 만들어서 복사를 해야 합니다.

    (1) 배열의 깊은 복사 

function object_copy(src) {

var coped_object= [];

for(var i in src) {

coped_object[i] = src[i];

}

return coped_object;

}

var deep_test = [1,2,3];

var deep_test1 = object_copy(deep_test);

deep_test[0] = 20;

alert(deep_test);

alert(deep_test1);

    (2) 객체의 깊은 복사

function object_copy(src) {

var coped_object = {};

for(var i in src) {

coped_object[i] = src[i];

}

return coped_object;

}

var deep_test = {

value1 : 1,

value2 : 2,

value3 : 3

};

var deep_test1 = object_copy(deep_test);

deep_test.value1 = 20;

alert(deep_test.value1); // 결과 20

alert(deep_test1.value1); // 결과 1

<연관된 글>

- [javascript] 1. 자바스크립트 기초 (기본 구조)

- [javascript] 2. 자바스크립트 함수란?

- [javascript] 3. 자바스크립트 내장 함수

- [javascript] 4. 자바스크립트 실행 순서

- [javascript] 5. 자바스크립트 객체 란?

- [javascript] 6. 자바스크립트 값 복사와 참조 복사

- [javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)