JavaScript는 소개가 필요 없으며 다양한 기능을 갖춘 강력한 언어입니다. 하지만 Javascript를 사용해 본 적이 있다면 아마도 몇 가지 특이한 동작을 발견했을 것입니다. 그 중 하나는 특히 객체 작업 시 JavaScript가 변수 복사본을 처리하는 방법입니다. 이 글에서는 전체 복사의 개념과 이것이 프로그램에서 데이터를 복제할 때 예상치 못한 문제를 피하는 데 어떻게 도움이 되는지 살펴보겠습니다.

변수의 복사본을 만들 때 JavaScript는 새로운 메모리 공간을 만들고 거기에 복사된 값을 저장합니다. 그런 다음 새 변수는 이 새 메모리 공간을 가리킵니다. 예를 들어:

x = 5;
y = x;

y 는 x와 동일한 값을 갖는 새로운 메모리 공간을 가리키고 있습니다. 즉, 5 입니다. 다음과 같습니다:

위 개념은 기본 값에만 적용되며 객체의 경우에는 다릅니다. 다음과 같은 두 개의 개체가 있다고 가정해 보겠습니다.

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

위의 예에서 b에는 예상한 대로 자체 메모리 공간이 없습니다. 대신, a는 a가 저장된 메모리 공간을 가리킵니다.

이 행동으로 인해 어떤 문제가 발생할 수 있나요? 기본적으로 a 또는 b에서 필드를 변경하면 두 변수가 모두 변경됩니다. 다음 코드를 실행하고 직접 확인해보세요.

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }

이 문제에 대한 해결책은 무엇입니까? b가 가리키는 새로운 독립 메모리 공간에 a의 값을 저장하려면 deep copy를 해야 합니다.

const b = JSON.parse(JSON.stringify(a));

이런 방식으로 형식을 개체에서 JSON으로 변경하여 JavaScript가 새로운 메모리 공간을 생성하도록 강제합니다. 이 작업은 stringify 메서드를 사용하여 수행된 다음 자체 메모리 공간이 있는 JSON이 parse 메서드를 사용하여 객체로 다시 변환되므로 두 변수는 완전히 독립적으로 유지됩니다.

이런 이상한 행동을 겪은 적이 있나요? 댓글로 알려주시면 기꺼이 읽어드리겠습니다!