[자료형 심화] 10. 기본형과 참조형

자료형 (Data Type)

 

기본형 (Primitive Type)

Number, String, Boolean, Null, Undefined

 

어떤 값을 다룰 때 특별한 경우를 제외하면 모두 변수에 할당해서 사용하는데, Javascript에서 변수에 기본형 값을 할당하면 해당 변수 이름을 가진 상자에 그 값을 넣어준다고 생각해 볼 수 있습니다.

1번 줄에서 변수 x에 3이라는 값을 할당하고 있으니까 x라는 숫자에 값 3을 담았다고 볼 수 있습니다.

그리고 2번 줄에서는 y라는 변수에 변수 x를 할당하고 있는데 이러면 변수 y에 x가 가지고 있는 값을 복사해서 담게 됩니다. 그래서 4번 5번 줄이 실행되면 똑같이 숫자 3이 콜솔에 두 번 출력됩니다.

 

그리고 나면 6번줄에서 변수 y에 5라는 새로운 값을 할당해 주고 있습니다. 이렇게 되면 이제 y가 담고 있는 값은 3이 아니라 5가 되는 것입니다. 그래서 결국 8번과 8번 줄이 실행되면 그 땐 3과 5로 서로 다른 값이 출력되는 것입니다.

 

지금은 예시로 숫자 값만 사용했지만 변수에 기본형 값을 다루는 방식은 모두 똑같습니다. 

let x = 3;
let y = x;

console.log(x); // 3
console.log(y); // 3
y = 5
console.log(x); // 3
console.log(y); // 5

1번 줄에서 프로퍼티 하나를 가지고 있는 객체를 변수 x에 담고 2번 줄에서 x가 가지고 있는 값을 y에 복사해 주면서 4번, 5번 줄이 실행되면 자연스럽게 똑같은 결과가 출력 됩니다.

그리고 6번 줄에서는 y의 새로운 프로퍼티를 추가해주었는데, 이러면 코드를 실행했을 때 7번과 8번 줄이 서로 다른 결과를 출력해야 될 것 같은데 x에도 birthㄱ 추가된 것을 확인할 수 있습니다.

let x = {name:  'Codeit'};
let y = x;

console.log(x); // {name: 'Codeit'}
console.log(y); // {name: 'Codeit'}
y.birth = 2017;
console.log(x); // {name: 'Codeit', birth: 2017}
console.log(y); // {name: 'Codeit', birth: 2017}

사실 JavaScript에서 변수에 객체 값을 할당한 경우에는 조금 특별하게 동작을 합니다.

객체 값이 어딘가에서 만들어지고 변수에는 그 객체 값으로 가는 주소가 저장이 됩니다. 

조금 더 쉽게 표현하면 변수 상자와 객체 값 사이의 길이 열리는 것입니다. 

 

코드를 다시 보면 1번 줄에서 프로퍼티 하나를 가진 객체를 변수 x에 할당하고 있습니다. 

그러면 어딘가에서 이 객체가 만들어지고 이 객체와 이어지는 길이 변수 x에 이어지게 됩니다. 

그리고 2번 줄에서는 변수 y에 x를 할당해 주고 있습니다. 변수 x에는 객체 값이 담긴게 아니라 객체로 가는 길이 열려 있기 때문에 변수 y에는 이 길이 복사되는 겁니다.

그렇기 때문에 x와 y가 서로 같은 객체를 바라보게 되고 그래서 6번 줄에서 y만 수정을 했지만 결과적으로는 x도 같이 수정이 된 것처럼 보입니다.

이렇게 주소값을 참조해서 그 값에 접근하기 때문에 객체와 같은 자료형을 참조형, 영어로는 Reference Type이라고 부릅니다.

 

배열도 객체이므로 Reference Type입니다. 배열도 마찬가지로 변수에 할당될 때 배열 자체가 변수에 담기는 것이 아니라 주소값이 담깁니다. 그래서 이 변수 x를 y에 복사하게 되면 주소값이 복사되고 6번 줄에서 y에 2번 인덱스 값을 수정하게 되면 결과적으로 코드를 실행했을 땐 x도 함께 수정됩니다.

let x = [1, 2, 3];
let y = x;

console.log(x); // [1, 2, 3]
console.log(y); // [1, 2, 3]
y[2] = 4;
console.log(x); // [1, 2, 4]
console.log(y); // [1, 2, 4]

정리하면 기본형 값을 변수에 담아 사용할 때는 값이 그대로 할당되고 참조형 값을 변수에 담아 사용할 때는 해당 객체를 가리키는 주소값이 할당된다는 특징을 살펴보았습니다. 그래서 참조형의 경우에는 변수를 통해 다른 변수에 할당하면 값 자체가 복사되는 것이 아니라 주소값이 복사되기 때문에 결국은 같은 객체를 가리키게 되고 결과적으로 한쪽을 수정하면 다른 한쪽도 같이 수정이 됩니다.

기본형과 참조형은 JavaScript 뿐만 아니라 다른 프로그래밍 언어에서도 모두 적용되는 기본적인 개념이므로 잘 이해해두면 다른 언어들을 이해할 때도 유용하게 활용할 수 있습니다.