JavaScript 배열 객체 수정 시 주의할 점 - 참조 vs 재할당

js 참조 및 재할당

개요

안녕하세요. 오늘은 JavaScript에서 배열 안의 객체를 수정할 때 주의해야 할 점에 대해 알아보려 합니다. 이번 주제는 지난번 포스팅에서 다뤘던 Shallow Copy(얕은 복사)와 Deep Copy(깊은 복사) 개념과도 밀접한 관련이 있습니다.

 

간단히 다시 짚자면, 얕은 복사는 객체의 1단계까지만 복사하고, 내부에 중첩된 객체는 여전히 원본 객체와 참조를 공유합니다. 반면에 깊은 복사는 객체 전체를 재귀적으로 복사하기 때문에 원본과 완전히 분리된 새로운 객체가 생성됩니다.

 

이와 비슷하게, 배열 안에 있는 객체도 참조와 재할당에 따라 전혀 다른 동작을 하게 됩니다. 어떤 차이가 있는지, 아래 예제를 통해 좀 더 자세히 살펴보겠습니다😁

 

참조📙

참조는 객체(Object), 배열(Array), 함수(Function) 같은 참조형 데이터 타입에서 발생합니다. 변수에 값을 직접 저장하는 것이 아니라, 메모리 상의 주소(챰조값)를 저장하여 해당 데이터를 가리키는 방식입니다.

let a = { value: 1 };
let b = a;       // b는 a가 참조하는 객체를 동일하게 참조함
b.value = 2;

console.log(a.value); // 2 → 같은 객체를 참조하고 있기 때문

 

언뜻 보면 b의 값을 할당한 이후에 b의 value를 바꿨는데, a의 value가 바뀌는 것이 이상해 보일 순 있지만 위에서 설명드린 바와 같이 a와 b는 같은 객체를 참조하고 있기 때문에 하나의 변경이 다른 변수에도 영향을 줄 수 있습니다.

 

아래의 예시도 동일하게 참조하기 때문에 결과가 같겠죠?

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

const person = people.find(p => p.name === "Bob");
if (person) {
  person.age = 31;  // Bob의 나이를 바꾼다
}

console.log(people);
/*
결과:
[
  { name: "Alice", age: 25 },
  { name: "Bob", age: 31 }  배열 안도 같이 바뀐다!
]

 

재할당📘

재할당은 변수가 가리키는 값을 새롭게 바꾸는 것입니다. 이는 원시형이든 참조형이든 모두 가능합니다. 단, 참조형 변수에 재할당을 하면 참조 자체가 끊어지고 새로운 객체를 가리키게 됩니다.

let a = { value: 1 };
let b = a;

b = { value: 3 }; // b는 이제 새로운 객체를 참조함
console.log(a.value); // 1 → a와 b는 더 이상 같은 객체를 참조하지 않음

 

위 코드에서 b = { value: 3} 으로 인해 b는 더 이상 a와 같은 객체를 참조하지 않습니다. 이런 일련의 과정을 재할당(Reassignment)이라고 부릅니다.

 

아래의 예시도 재할당이 진행되기 때문에 원래 배열에는 아무 영향이 없습니다.

const person = { ...people.find(p => p.name === "Bob") };
person.age = 31;

console.log(people); // 원래 배열에는 아무 영향 없음

 

마치며

참조와 재할당은 JS에서 쉽게 놓칠 수 있는 부분이어서 꼭 숙지하시면 좋습니다. 쉽게 설명을 드리면, 참조는 '복사한 사진'이 아니라 '같은 사람을 가리키는 이름표'를 주는 것이며, 재할당은 '복사한 사진'을 주는 거라고 생각하시면 될 것 같습니다. 다음에는 더 유익한 포스팅으로 찾아뵐게요🙇‍♂️