Primitive type & Reference type

<원시 자료형 & 참조 자료형>

 

문제: 코드가 실행된 후, x.foo의 값은 무엇일까요?

let x = { foo: 3 };
let y = x;
y.foo = 2;

// 오답 : 3
// 정답 : 2;

 

해설

자바스크립트에서 원시 자료형이 아닌 모든 것은 Object 입니다. 배열([])과 객체({}), 함수(function(){})가 대표적입니다. 이런 자료형을 참조 자료형 (reference data type)이라고 부릅니다.

참조 자료형이 변수에 할당되는 경우는, 변수에 이 데이터가 저장되는 곳의 주소가 할당이 됩니다.

변수는 사실 컴퓨터의 메모리에 무언가를 저장하는 것을 보다 인간이 이해하기 쉽게 하기 위해서 만든 개념입니다. 그렇기 때문에 변수의 선언은 메모리에 자리를 잡는 것이고, 값의 할당은 메모리에 값을 채우는 것이라고 볼 수 있습니다.

원시 자료형은 배열과 객체와는 다르게 하나의 정보만 담고 있기 때문에 변수에 직접 값을 복사해도 큰 문제가 없습니다. 변수 하나에 값 하나, 단순하게 이해할 수 있습니다.

객체와 배열은 조금 다릅니다. 우리가 어떻게 코드를 작성하느냐에 따라서 담길 수 있는 정보의 크기가 천차만별입니다. (100만개의 회원정보가 담긴 배열을 상상해봅시다.) 그렇기 때문에 동적(dynamic)으로 변수의 크기가 변할 수 있어야 합니다. 변수에 하나의 객체를 통째로 넣을 수 없는 합리적인 이유가 생긴거죠.

그래서 자바스크립트는 머리를 씁니다. 그러면 메모리에 공간은 내가 알아서 부여하고, 변수는 그 공간의 주소만 참조하도록 하자! 그래서 참조 자료형이 탄생하게 됩니다.

let y = x;

변수 x를 변수 y에 할당하는 경우, 변수 x의 값은 참조 자료형이기 때문에 x의 값 { foo: 3 }의 주소를 y에 할당합니다. 값 자체를 할당했던 1번 문제와의 차이점이죠.

이 상태는 변수 x와 변수 y에 모두 같은 { foo : 3 } 이라는 객체의 주소를 바라보고 있습니다.

y.foo = 2;

y.foo = 2, 값이 3이였던 y.foo에 2를 할당을 했습니다. 그러면 x.foo는 무엇일까요? 현재는 같은 주소를 바라보고 있는 y.foo가 2로 변경이 되었으니, 같은 곳을 바라보고 있었던 x.foo도 2가 되어야 합니다.

 

문제 : 코드가 실행된 후, myArray의 값은 무엇일까요?

let myArray = [2, 3, 4, 5]; 
let ourArray = myArray; ourArray[2] = 25; 
ourArray = undefined;

// 오답 : [2, 3, 4, 5]
// 정답 : [2, 3, 25, 5]

 

해설

let ourArray = myArray;

변수 ourArray에 myArray의 주소값이 할당 되었습니다.

ourArray[2] = 25;

ourArray 주소값에 위치한 배열의 의 2번째 요소를 25로 변경합니다. ourArray와 myArray의 주소값은 같음으로 현재 myArray는 [2, 3, 25, 5] 입니다.

ourArray = undefined;

이제 변수 ourArray에 원시 자료형 undefined가 할당되었기 때문에, myArray에 접근할 수 없습니다. 하지만 myArray는 그대로 [2, 3, 25, 5]이기 때문에 답은 [2, 3, 25, 5] 입니다.

문제 : 코드가 실행된 후, player.score의 값은 무엇일까요?

let player = { score: 3 };

function doStuff(obj) {
	obj.score = 2;
}

doStuff(player);

// 오답 : undefined
// 정답 : 2

 

해설

doStuff(player);

함수 doStuff에 변수 player를 인자로 전달하여 호출합니다. (실행합니다.)

function doStuff(obj) { obj.score = 2; }

함수가 호출되면 (실행되면) 매개변수 obj에 변수 player의 값이 할당됩니다. { score: 3 }의 주소값이겠죠? obj.score에 2를 할당하면, obj와 player는 같은 주소값을 가지고 있기 때문에, player.score도 2가 되게 됩니다. 정답은 2입니다.

 

문제 : 코드가 실행된 후, score 의 값은 무엇일까요?

let score = 80; 
function doStuff(value) { 
	value = 90; 
}

doStuff(score)

// 오답 : undefined
// 정답 : 80

 

해설

doStuff(score)

함수 doStuff에 score의 값을 인자로 전달하여 실행합니다.

function doStuff(value) { value = 90; }

매개변수 value에 score의 값 80이 전달되고,

value = 90에서 value에 90이 할당됩니다.

다만 변수 score의 값 80은, 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달하게 됩니다. 그래서 함수에서 어떤 일이 발생했던가와 관련이 없이 score는 초기에 할당된 값 80이 그대로 유지됩니다. 정답은 80입니다.