배열, 객체, 얕은 복사, 깊은 복사

배열

여러 개의 값을 순서대로 저장하는 리스트 형태의 데이터 구조

 

배열 수정하기

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

//배열 요소 수정 
fruits[1] = 'Blueberry';
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

 

배열 복사하기

 > 배열을 복사할 때는 얕은 복사(shallow copy)와 깊은 복사(deep copy) 두 가지 방법이 있다.

 

얕은 복사(Shallow copy)

 - 배열의 참조를 복사하는 것으로, 원본 배열과 복사된 배열이 동일한 객체를 참조한다. 따라서 한 배열을 수정하면 다른 배열에도 영향을 미친다. 

let original = ['Apple','Banana','Cherry'];
let shallowCopy = original;

shallowCopy[1] = 'Blueberry';
console.log(original); // ['Apple','Blueberry', 'Cherry']
console.log(shallowCopy); //  ['Apple','Blueberry', 'Cherry']

 

깊은 복사(Deep Copy)

 - 배열의 모든 요소를 새로운 배열에 복사하여 원본 배열과 복사된 배열이 서로 다른 객체를 참조하게 만든다. 깊은 복사를 하면 한 배열을 수정해도 다른 배열에 영향을 미치지 않는다.

 

 1. 재귀적 복제

function deepCopy(o) {
	var result = {};
    if (typeof o === "object" && o !== null)
    	for (i in o) result[i] = deepCopy(o[i]); // i : 현재 속성의 이름(키). 이 이름은 문자열로, 객체의 각 속성에 접근할 수 있게 해 준다. 
    else result = o;
    return result; 
}

const obj1 = {
	a : 1,
    b : [1,2,3]
};

var obj2 = deepCopy(obj1);

console.log(obj1 === obj2);
console.log(obj1);
console.log(obj2);

 

*헷갈리는 것 

  - 'for (i in o)' 에서 'i'는 먼저 "a"값을 가진다.

  - 'result[i] = deepCopy(o[i]) 에서 o[i]는 o["a"] 또는 '1'이다.

     > deepCopy(1)은 result = 1을 반환하므로 result["a"] =1 이 된다. 

 

2. JSON.parse, JSON.stringify로 복사

 - 깊은 복사는 가능하지만 gettser/setter 등 JSON으로 변경할 수 없는 프로퍼티는 무시한다. 배열도 깊은 복사가 가능하지만 배열 관련 함수는 사용 불가능하다. 

let original = ['Apple', 'Banana', 'Cherry'];
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy[1] = 'Blueberry';
console.log(original); // ['Apple', 'Banana', 'Cherry']
console.log(deepCopy); // ['Apple', 'Banana', 'Cherry']

 

객체

객체 수정하기

let person = {
	name : 'John',
    age : 30
};

console.log(person); // {name : 'John', age : 30}

//객체 속성 수정
person.age = 31;
console.log(person); // {name : 'John', age : 31}

 

객체 복사하기

얕은 복사

 - 객체의 참조를 복사하는 것으로, 원본 객체와 복사된 객체가 동일한 객체를 참조한다.

let original = {
	name : 'John',
    age : 30
};
let shallowCopy = original;

shallowCopy.age = 31;
console.log(original); // {name : 'John', age : 31}
console.log(shallowCopy); // {name : 'John', age : 31}

 

깊은 복사

 - 깊은 복사는 객체의 모든 속성을 새로운 객체에 복사하여 원본 객체와 복사된 객체가 서로 다른 객체를 참조하게 만든다. 

let original = {
	name : 'John'
    age : 30
};
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.age = 31;
console.log(original); // {name : 'John', age : 30}
console.log(deepCopy); // {name : 'John', age : 31}