원시형과 참조형의 복사

자바스크립트에는 원시형(primitive type: string, number, boolean etc)과 참조형(reference type: object, Array etc)이 존재한다. 원시형은 값 자체이며 메모리에 바로 저장된다. 참조형은 원시타입을 제외한 나머지를 저장하는 방식으로, 메모리에 실제 값들이 저장되어 있는 주소가 저장되어있다.

let value1 = "대한";
let value2 = "";

value2 = value1;
value2 += "민국"

console.log(value2); // "대한"
console.log(value1); // "대한민국"

원시형이 저장된 변수 value1의 값을 value2에 복사하고, value2에 "민국"이라는 문자열을 추가해주었다. 이러한 과정은 당연하게도 value1의 값에는 전혀 영향을 끼치지 않는다.

let number1 = [1, 2, 3, 4];
const number2 = number1;

number2.push(5)

console.log(number1) // (5) [1, 2, 3, 4, 5]

그러나 참조형을 복사하려고 하면 예상과는 전혀 다른 현상이 발생한다. 변수에 참조형을 할당할 때, 객체를 넣어주는 게 아니라 객체값이 존재하는 메모리의 주소를 참조하게 된다. 때문에 상수로 선언한 number2에 arr.push()를 사용해도 상수가 참조하고 있는 주소 자체는 변하지 않았기 때문에 문제가 발생하지 않는 것이다. 또한, push를 사용하여 number2에 item을 추가해주었지만, 같은 주소를 공유하는 number1의 배열도 변경된 것을 알 수 있다.

const x = {};

x.some = y; // x에 할당된 객체 주소는 변하지 않았으므로 에러가 뜨지 않는다
x = {some: y} // 할당된 객체 주소 자체를 변경하는 행위이므로 에러가 뜬다

 

배열 복사

배열을 통채로 복사하려면 arr.slice() 메소드를 사용한다.

let number1 = [1, 2, 3, 4];
let number2 = number1.slice();

number2.push(5)

console.log(number1) // [1, 2, 3, 4]
console.log(number1) // [1, 2, 3, 4, 5]

 

객체 복사

여기서는 object.assign() 메서드를 사용하면 된다. assign(a, b)는 모든 b 객체의 프로퍼티를 a에 복사한다.

let x = {..}
let y = {};

y = object.assign({}, x);

y.new = `yes, it's new!!`;

console.log(x) // {..}
console.log(y) // {.., new: `yes, it's new!!`}

간단한 1차원 객체의 경우 for..in 반복문을 사용할 수도 있다.

for (let key in x) {
 	y[key] = x[key]
}