Colin's Blog
자바스크립트 변수의 값 복사와 참조

자바스크립트에서 변수를 다룰 때, 값의 복사와 참조는 중요한 주제입니다. 변수를 복사하면 이전의 값과는 독립적으로 새로운 값을 가질 수 있습니다. 하지만 변수를 참조하면 값의 변경이 원래 변수에 영향을 미칠 수 있습니다.

이번 포스트에서는 자바스크립트에서 변수의 값 복사와 참조에 대해 알아보겠습니다.

값 복사

변수의 값을 복사하려면 = 연산자를 사용합니다. 값을 복사하는 것은 원본 값과 완전히 독립적인 새로운 값이 생성되어 변수에 할당됩니다.

let num1 = 10;
let num2 = num1; // num1의 값이 num2로 복사됩니다.

num1 = 20; // num1의 값을 변경합니다.

console.log(num1); // 출력: 20
console.log(num2); // 출력: 10

위의 코드에서 num1의 값을 num2로 복사한 후, num1의 값을 변경해도 num2의 값은 변경되지 않습니다. 즉, 값 복사는 독립적인 값을 생성하여 변수에 할당합니다.

참조

변수를 참조하면 값이 공유되게 됩니다. 변수가 참조하고 있는 값이 변경되면 모든 참조 변수에 영향을 미칩니다.

let arr1 = [1, 2, 3];
let arr2 = arr1; // arr1이 참조하는 배열이 arr2에 할당됩니다.

arr1.push(4); // arr1에 값 추가

console.log(arr1); // 출력: [1, 2, 3, 4]
console.log(arr2); // 출력: [1, 2, 3, 4]

위의 코드에서 arr1이 참조하는 배열을 arr2에 할당한 후, arr1에 값이 추가되면 arr2에도 동일한 값이 추가됩니다. 즉, 값을 참조하면 원본 값과 동일한 메모리 주소를 공유하게 됩니다.

얕은 복사 vs 깊은 복사

복사와 참조는 객체 또는 배열에서 더욱 민감한 문제가 됩니다. 자바스크립트에서 객체 또는 배열을 값 복사로 처리하면, 실제 값이 아닌 참조만 복사되기 때문에 원본 값과 같은 메모리 주소를 공유하게 됩니다. 이러한 문제를 해결하기 위해 얕은 복사와 깊은 복사라는 개념을 사용할 수 있습니다.

let obj1 = { name: "John", age: 30 };
let obj2 = Object.assign({}, obj1); // 얕은 복사

obj1.age = 40;

console.log(obj1); // 출력: { name: "John", age: 40 }
console.log(obj2); // 출력: { name: "John", age: 30 }

let obj1 = { name: "John", address: { city: "New York" } };
let obj2 = JSON.parse(JSON.stringify(obj1)); // 깊은 복사

obj1.address.city = "Los Angeles";

console.log(obj1); // 출력: { name: "John", address: { city: "Los Angeles" } }
console.log(obj2); // 출력: { name: "John", address: { city: "New York" } }

결론

자바스크립트에서 변수의 값 복사와 참조는 중요한 주제입니다. 값을 복사하면 독립적인 새로운 값이 생성되어 변수에 할당되고, 값을 참조하면 원본 값과 메모리 주소를 공유하게 됩니다. 객체 또는 배열을 복사할 때는 얕은 복사와 깊은 복사를 고려하여 원하는 대로 동작하도록 합니다.

© 2018 Colin. All rights reserved.