본문 바로가기

언어/javascript

javascript : 값 복사 , 깊은 복사

반응형

값 복사 : 깊은 복사

// 변수를 선언합니다.
var originalValue = 10;
var newValue = originalValue;

// 원본 값을 변경합니다.
originalValue = 273;

// 출력합니다
console.log(originalValue);
console.log(newValue);
273
10

 

참조 복사 : 얕은 복사

// 변수를 선언합니다.
var originalArray = [1,2,3,4];
var newArray = originalArray;

// 원본 배열의 값을 변경합니다.
originalArray[0] = 273;

// 출력합니다.
console.log(originalArray);
console.log(newArray);
[ 273, 2, 3, 4 ]
[ 273, 2, 3, 4 ]

 

 

객체의 깊은 복사

객체를 깊은 복사할 때는 다음과 같은 방법을 사용합니다. 새로운 객체를 만들고, for in 반복문으로 원본 객체에 반복을 돌리며 키와 값을 하나하나 옮기는 것입니다.

 

// 객체를 복제하는 함수입니다.
function clone(obj) {
    var output = {};
    for (var i in obj) {
        output[i] = obj[i];
    }
    return output;
}

// 테스트합니다.
var original = { a: 10, b: 20 }; // 원본 객체
var referenced = original; // 얕은 복사 객체
var cloned = clone(original); // 깊은 복사 객체

// 원본의 값 변경
original.a = 20;

// 확인
console.log(JSON.stringify(referenced,null,2));
console.log(JSON.stringify(cloned,null,2));
{
  "a": 20,
  "b": 20
}
{
  "a": 10,
  "b": 20
}

 

반응형

'언어 > javascript' 카테고리의 다른 글

javascript : 메서드 생성  (0) 2020.12.09
javascript : 배열 복제  (0) 2020.11.30
javascript : option 객체  (0) 2020.11.30
javascript : 동적으로 메서드 추가하기  (0) 2020.11.30
javascript : with 사용법  (0) 2020.11.30