참조에 의한 전달

객체 값의 전달 방식

참조에 의한 전달

 

예제

const person = {
	name: 'Max'
};

const secondPerson = person; // 참조 값을 복사(얕은 복사)

console.log(secondPerson);

결과

[object Object] {
	name: "Max"
}

 

 

객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라고 한다. 객체 person은 메모리에 저장되어있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다. 

 

참조에 의한 전달

위 그림처럼 Person을 사본 SecondPerson에 할당하면 원본 person의 참조 값을 복사해서 SecondPerson에 저장한다. 

이때 원본 Person과 사본 SecondPerson은 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다. ( 참조값을 복사한 것)

 

즉, 원본 Person과 사본 SecondPerson은 모두 동일한 객체를 가리킨다.

 

문제 발생

이것은 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 

 

 

예제

const person = {
	name: 'Max'
};

const secondPerson = person;

person.name = 'Manu';

console.log(secondPerson); // name: 'Manu'

결과

[object Object] {
	name: "Manu"
}

secondPerson에 person을 할당한 후에 person의 프로퍼티를 변경했는데 변경된 값이 출력되는 것을 확인할 수 있다.

바뀐 name이 출력되는 이유는 단지 참조 값을 복사했고, person이 가리키는 메모리에 있는 동일한 객체를 가리키기 때문이다.

 

이러한 특징으로 인하여 오류가 많이 발생한다.

어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받아서 부작용을 초래할 수 있다. 

 

해결 방법

변경할 수 없는 방법으로 복사하는 방법을 알아보자.

스프레드 연산자를 사용하여 참조 값이 아닌 객체로 저장하면 위와 같은 문제를 해결할 수 있다.

 

예제

const person = {
	name: 'Max'
};

const secondPerson = {
	...person
};

person.name = 'Manu';

console.log(secondPerson); // name: "Max"

결과

[object Object] {
	name: "Max"
}

객체의 속성을 펼쳐 새로운 객체를 선언 했기에 secondPerson은  복사 이후엔 person의 프로퍼티 값이 변경되어도 영향을 받지 않습니다.