자바스크립트에서 자료형은 아래와 같이 크게 기본형(Primitive Value) 과 참조형(Reference Type) 2가지로 나눌 수 있다.
기본형 (Primitive Value)
- Boolean
- Null
- Undefined
- Number
- String
참조형(Reference Type)
- Object(배열, 일반 객체, 함수)
이때 기본 자료형의 경우는 아래의 코드에서 볼 수 있듯이 copy 의 value 를 변경하더라도 string 의 value 엔 영향을 주지 않는다.
let string = "hello";
let copy = string;
console.log(copy); // 'hello'
let copy = "hi";
console.log(string); // 'hi'하지만, 참조형의 경우 ref 배열의 항목을 변경하면 array 의 항목도 변하는 것을 알 수 있다.
이는 참조형은 다른 변수에 대입할 때 값을 복사하는 게 아니라 참조(메모리의 주소)를 복사하기 때문에 발생하는 현상이다.
let array = ["a", "b", "c"];
let ref = array;
ref[0] = "d";
console.log(array); // ['d', 'b', 'c']위와 같은 특성으로 인해 참조형 copy 는 shallow copy(얕은 복사) 와 deep copy(깊은 복사) 가 있다.
shallow copy는 가장 상위 객체만 새로 생성되고 내부 객체들은 참조 관계인 경우를 의미하고 deep copy는 내부 객체까지 모두 새로 생성된 것을 의미한다.
Shallow Copy 코드
같은 주소를 보고 있기 때문에 복사한 variable 의 항목을 변경하면 원본의 값도 변경된다.
let employeeDetailsOriginal = {
name: "JayKim",
age: 30,
profession: "software Enginner",
};
let employeeDetailsDuplicate = employDetailsOriginal;
//Shallow Copy
employDetailsDuplicate.name = "NameChanged";
//This statement will also change name from employeeDetailsOriginal,
//since we have a shallow copy, or a reference to let employeeDetailsOriginal.
//This means, you’re losing the original data as well.-
장점 : 같은 객체를 공유하므로 메모리를 절약하고, 빠른 장점이 존재한다. 참조에 의한 호출(Call by Reference)에서 얕은 복사가 이루어 지는 이유 중 하나이다.
-
단점 : 두개 이상의 객체가 같은 대상을 가리키고 있기 때문에, 의도치 않게 여러 개의 객체가 동시에 수정될 수 있다.
Deep Copy 코드
객체 내부 항목들에 value 가 직접 할당되는 깊은 복사이기 때문에 복사한 variable 의 항목이 변경되더라도 원본 값엔 영향을 주지 않는다.
let employDetailsDuplicate = {
name: employDetailsOriginal.name,
age: employDetailsOriginal.age,
Profession: employDetailsOriginal.Profession,
};
//Deep copy-
장점 : 여러 객체가 동시에 수정되는 일이 발생하지 않아 안전하다.
-
단점 : 객체 생성 비용이 비싸며, 메모리를 많이 점유한다.
