3.2 section1 unit 9 원시 자료형과 참조 자료형 종합퀴즈

💁‍♀️ 1. 다음 코드가 실행된 후, x의 값은 무엇인지 고르세요.

let x = 2;
let y = x;
y = 3;

 

 

A. 2

B. 3

C. 5

D. undefined

 

🔈 해설

정답 A

 

변수의 선언과 할당에 대해서 배웠던 것이 기억이 나시죠? 변수는 어떤 정보를 담는 하나의 그릇이고, 여기에 어떤 정보를 직접 담는 것을 할당이라고 배웠습니다. 이제는 우리가 담는 값에 따라서 할당의 방식이 달라지는 것을 배우게 될 겁니다.

숫자와 같은 자료의 형태를 자바스크립트에서는 - 그리고 많은 컴퓨터 언어에서는 - 원시 자료형(primitive data type)이라고 부릅니다. 다양하고 많은 정보를 담을 수 있었던 배열과 객체와는 달리 원시적으로, 하나의 값만 가질 수 있어서 원시 자료형이라고 부릅니다.

원시 자료형을 할당하는 경우, 그 값 자체를 변수에 할당합니다. 즉, 그 값을 복사하여 변수에다가 저장한다고 생각하시면 됩니다.

let y = x;

변수 x를 변수 y에 할당하는 경우, 변수 x의 값은 원시 자료형이기 때문에 x의 값이었던 2를 y에 복사하여 할당되고,

y = 3;

y에 3이 할당되어도, 여전히 x는 2입니다. x의 값을 y로 복사하여 할당했기 때문입니다. Line 3의 코드가 변수 x에 영향을 미치지 않습니다.

 

---

💁‍♀️ 2. 다음 코드가 실행된 후, x.foo의 값은 무엇인지 고르세요.

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

 

 

A. 2

B. 3

C. 알 수 없음

 

🔈 해설

정답 A

자바스크립트에서 원시 자료형이 아닌 모든 것은 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가 되어야 합니다.

 

---

💁‍♀️ 3. 다음 코드가 실행된 후, 콘솔에 찍히는 값은 각각 무엇인지 고르세요.

console.log('codestates' === 'codestates');
console.log(3.14 === 3.14);
console.log([1,2,3] === [1,2,3]);
console.log({ foo: 'bar' } === { foo: 'bar' });

 

A. true true true true

B. true true false false

C. false false true true

D. false false false false

 

🔈 해설

정답 B

참조 자료형은 heap이라는 별도의 메모리 저장 공간을 사용합니다.

참조 자료형의 ===(strict equality)는 주소값이 같은지를 확인합니다.

그렇기 때문에 두 참조 자료형의 주소값은 다르다고 판단을 내릴 수 있습니다.

console.log([1,2,3] === [1,2,3]);

컴퓨터가 위 코드를 읽으면서, 이미 두 개의 heap 저장 공간의 주소를 확보했습니다. 다만 우리는 눈으로 확인하지 못할 뿐입니다. 배열([])과 객체({}) 등 참조 자료형을 읽을 때, 미리 주소값과 메모리 값을 잡아둔다고 생각하면 편합니다. 그러므로 [] === [] 도 true가 나오지 않는 것이죠.

그래서 참조 자료형의 strict equality를 확인하는 Line 3, 4가 false가 나오고, 답은 B입니다.

 

---

💁‍♀️ 4. 다음 코드가 실행된 후, x.foo의 값은 무엇인지 고르세요.

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

 

A. 2

B. 3

C. undefined

D. Reference Error

 

🔈 해설

정답 B

let y = x;

여기서 변수 y는 x의 주소값을 할당받았습니다.

y = 2;

하지만 다시 2를 할당받았습니다.

이 과정 중에서 참조 자료형 { foo : 3 } 에는 아무런 영향을 미치지 않았기 때문에, x.foo를 조회해도 그대로 3이 나오게 됩니다.

 

 

---

💁‍♀️ 5. 다음 코드가 실행된 후, myArray의 값은 무엇인지 고르세요. <오답노트>

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

 

A. []

B. [2, 3, 4, 5]

C. [2, 3, 25, 4, 5]

D. [2, 3, 25, 5]

 

🔈 해설

정답 D

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]이기 때문에 답은 D 입니다.

 

---

💁‍♀️ 6. 다음 코드가 실행된 후, player.score의 값은 무엇인지 고르세요.

let player = { score: 3 };
function doStuff(obj) { 
  obj.score = 2;
}

doStuff(player);

 

A. 2

B. 3

C. undefined

D. 알 수 없음

 

🔈 해설

정답 A

doStuff(player);

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

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

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

 

---

💁‍♀️ 7. 다음 코드가 실행된 후, score 의 값은 무엇인지 고르세요.

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

doStuff(score)

 

A. 80

B. 90

C. undefined

D. 알 수 없음

 

🔈 해설

정답 A

doStuff(score)

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

function doStuff(value) {
  value = 90;
}

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

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

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

 

---