[ JavaScript ] 자바스크립트 기본 문법 | 복제와 참조 | 참조데이터란 |

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

복제란 무엇인가?

 

 

 

 

전자화된 시스템의 가장 중요한 특징은 복제입니다.

현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제 하는데는 비용이 거의 들지 않죠.

 

바로 이러한 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징 중 하나 일겁니다.

 

프로그래밍에서 복제가 무엇인가를 살펴보도록 합시다.

 

 

 

 

var a = 1;
var b = a;
b = 2;
console.log(a); // 1

 

 

 

 

 

 

결과는 당연합니다.

 

값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로입니다.

 

변수 b의 값에 변수 a의 값이 복제된 것입니다.

 

 

이를 그림으로 표시하면 아래와 같습니다.

 

 

 

참조란 무엇인가?

 

 

 

var a = {'id':1};
var b = a;
b.id = 2;
console.log(a.id);  // 2

 

 

위 예제를 볼까요?

 

처음 들었던 예시와 거의 동일해 보이나, a 에는 원시데이터 타입이 아닌 객체가 들어갔습니다.

 

출력 결과를 보도록 하겠습니다.

 

 

 

 

 

 

 

놀라운 차이점이 있죠.

 

변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 되버렸습니다.

 

이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미합니다. 

 

포스팅 초반에 전자화된 세계에서 가장 중요한 특징으로 복제를 들었습니다.

 

 

그런데 복제만으로 전자화된 시스템을 설명하는 것은 조금 부족합니다.

 

비유하자면 복제는 파일을 복사하는 것이고,

참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷합니다.

 

 

원본 파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면

심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 이치입니다.

 

심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨 있습니다.

 

누군가 심볼릭 링크에 접근하면

컴퓨터는 심볼릭 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 됩니다.

 

 

다시 말해서 원본을 복제한 것이 아니라 원본 파일을 참조(reference)하고 있는 것입니다.

 

덕분에 저장 장치의 용량을 절약할 수 있고,

원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 됩니다.

 

 

 

프로그래밍에서 광범위하게 사용하는 라이브러리라는 개념도 일종의 참조라고 할 수 있습니다.

 

공용 라이브러리를 사용하게 되면,

하나의 라이브러리를 여러 애플리케이션에서 공유해서 사용하게 됩니다.

 

라이브러리의 내용이 변경되면 이를 참조하고 있는 애플리케이션에도 내용이 반영됩니다.

 

 

또 우리가 변수를 사용하는 이유도 말하자면 참조를 위해서라고 할 수 있을 것입니다. 

 

 

 

아래 두 개의 구문의 차이점을 생각해봅시다.

 

 

 

 

a = 1;

 

 

 

a = {'id':1};

 

 

 

정말 간단한 예시죠. 차이점이 뭔지 생각 해보셨나요?

 

 

 

전자는 데이터형이 숫자이고 후자는 객체입니다.

 

숫자는 원시 데이터형(기본 데이터형, Primitive Data Types)입니다.

 

 

만약 여기서 원시 데이터형이라는 단어가 익숙하지 않으시다면 바로 이전 포스팅을 보시는 것을

추천드립니다.

 

 

전 포스팅에서도 말했듯이,

 

자바스크립트에서는 원시 데이터형을 제외한 모든 데이터 타입은 객체입니다.

 

 

객체를 다른 말로는 참조 데이터 형(참조 자료형)이라고도 부르기도 합니다.

 

 

기본 데이터형은 위와 같이 복제 되지만, 참조 데이터형은 참조됩니다.

 

 

모든 객체는 참조 데이터형인 것입니다.

 

이를 그림으로 나타내면 아래와 같습니다.

 

 

정리하자면, 변수에 담겨있는 데이터가 원시형이면 그 안에는 실제 데이터가 들어있고,

 

객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다고 할 수 있습니다.

 

 

 

 

 

 

함수와 참조

 

 

그럼 일종의 변수할당이라고 할 수 있는 메소드의 매개변수는 어떻게 동작하는지 알아보도록 하겠습니다.

 

 

아래 코드는 원시 데이터 타입을 인자로 넘겼을 때의 동작 모습입니다.

 

 

 

 

var a = 1;
function func(b){
    b = 2;
}
func(a);
console.log(a);

 

 

 

 

위의 예시는 우리에게 너무나 당연한 것 같죠.

 

 

 

 

 

다음 예시는 참조 데이터 타입을 인자로 넘겼을 때 동작하는 것입니다.

 

 

 

var a = {'id':1};
function func(b){
    b = {'id':2};
}
func(a);
console.log(a.id);  // 1

 

 

 

 

 

함수 func의 파라미터 b로 전달된 값은 객체 a입니다.

 

(b = a) b를 새로운 객체로 대체하는 것은

 

(b = {'id':2}) b가 가리키는 객체를 변경하는 것이기 때문에 객체 a에 영향을 주지 않습니다.

 

 

아래 예시까지 한번에 보도록 하겠습니다.

 

 

 

 

var a = {'id':1};
function func(b){
    b.id = 2;
}
func(a);
console.log(a.id);  // 2

 

 

 

 

 

파라미터 b는 객체 a의 레퍼런스입니다.

 

이 값의 속성을 바꾸면 그 속성이 소속된 객체를 대상으로 수정작업을 한 것이 되기 때문에

 

b의 변경이 a에도 영향을 미치게 되는 것입니다.