JS Essential: 참조와 복사

박철연·2022년 2월 5일

JS Essential

목록 보기

5/10

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

자바스크립트에는 참조와 복사의 메커니즘이 만들어져 있습니다.

참조와 복사는 값을 변수로 할당할 때, 변수와 변수 사이에 값이 이동하는 메커니즘을 마련해 둔 것이라고 할 수 있습니다.

참조와 복사는 데이터 타입부터 시작해서, 변수를 다루는 방법까지 건드리는 매우 중요한 개념입니다.

다양한 예시들을 가지고 한번 이해해보도록 하겠습니다.

let a = 10;
let b = a;

console.log(b)   // 10

아주 간단한 변수 두 개를 만들어 보았습니다.

일단 a에 숫자 10을 할당했고, 변수 b에는 변수 a를 넣어주었습니다. 결과적으로 b의 값은 10이 되는 것 까지 확인할 수 있습니다.

다만, 변수 b처럼 변수에 다른 변수를 그대로 집어 넣으면 정확히 어떤 일이 일어나는가? 이것을 이해하는 것이 참조와 복사를 이해하는 가장 중요한 단계라고 할 수 있을 것 같습니다.

코드를 조금 바꿔볼게요.

let a = 10;
let b = a;

b = 20;

console.log(b)   // 20

아까 코드와 동일하지만, b에 20을 새로 할당하는 코드 하나를 추가해주었습니다. 그리고 b는 결국 20이라는 값을 가지게 되는 것도 확인할 수 있고요.

이것이 바로 복사 메커니즘의 개념입니다.

최초로 변수 b에 a의 값을 옮겼죠? 이 과정에서 a의 값인 10을 복사해서 b에다가 갖다붙인 것입니다. 그래서 나중에 새로운 값을 할당하면 그 복사본이 지워지고 새로운 값이 들어가게 됩니다.

즉, a에 들어간 10과 b에 들어간 10은 서로 다릅니다. b에 들어간 것은 복사본이기 때문에, 최초에 할당되고 나서는 남남인 것이죠.

그래서 당연히 b에 20을 새로 할당한다 하더라도, 변수 a의 값인 10에는 아무 영향도 없습니다.

이렇게 숫자처럼 원시 데이터 타입에 해당되는 값들은 모두 복사가 가능합니다. 이러한 메커니즘을 값에 의한 전달이라고 표현하기도 해요.

방금 원시 데이터 타입에 해당되는 값들은 모두 복사가 가능하다라고 설명했습니다.

미리 스포를 하자면, 원시 데이터 타입에 해당되지 않는 모든 데이터 타입은 복사가 아니라 참조 메커니즘의 영향을 받게 됩니다.
(객체, 배열, 함수 등등이 있겠죠?)

뭔 소린지 예시로 알아보죠.

let a = {
	name: 'Kim',
    age: 22,
    isMarried: false
};

let b = a;

console.log(b)   // a와 같은 값 반환

흐름은 복사 때 만들었던 코드와 동일합니다. 변수 a에다가 객체 값을 할당하고, 이를 그대로 b에 넣어주었습니다. 콘솔에 찍어보면 동일한 객체를 반환하는 것도 확인할 수 있습니다.

let a = {
	name: 'Kim',
    age: 22,
    isMarried: false
};

b.isMarried = true;

console.log(a);    // a도 isMarried의 값이 true로 변경

변수 b안에도 isMarried라는 key가 있겠죠? 여기에 접근해서 true로 변경해주었습니다.

그랬더니 깜짝 놀랄 일이 일어납니다. b와 별개로 만들어 두었던 a까지도 isMarried의 값이 true로 바뀌게 된 거에요.

왜 이런 일이 일어나냐면, 변수 b에는 객체 값 자체가 복사되어 할당되는 것이 아니라, 참조되기 때문입니다. 무슨 말이냐고요?

쉽게 말해, 우리가 변수 b에 할당한 것은 a의 객체 복사본이 아니라, 저 객체가 자리잡은 메모리의 주소를 "참조"하라고 설정된 것이죠.

그러니 b에서 객체 값을 수정하면, 자기가 참조하고 있던 메모리 주소의 객체 값을 바꿔버립니다.

이렇게 원시 데이터 타입이 아닌 값들은 변수에 그 값을 실제로 넣는 것이 아니라, 따로 마련된 메모리 주소에다 데이터를 만들어 놓고 그 주소를 "가리키게" 되어 있습니다.

그래서 a도 값이 같이 바뀌게 되는 거에요. a도 실제 값이 들어있는 게 아니라 우리가 코드로 만든 객체를 가리키고 있을 뿐이니까요.

이를 참조의 메커니즘, 혹은 참조에 의한 전달이라고 칭합니다.

Frontend Developer