JavaScript _tip / 데이터 불변성 (Primitive & Reference)

원시 데이터와 참조 데이터 (Primitive & Reference)

---

알면서도 헷갈리는 원시자료형과 참조 자료형!!! 메모리 주소를 활용해서 이해 해보는 시간을 갖겠습니다!

 

원시데이터

String, Number, boolean, undefined, null 

 

참조형데이터

object, array, function

 

 

원시데이터는 쉽게 말해 생긴 값이 같으면 true이지만 정확한 표현으로는 같은 주소를 바라보고 있다라고 표현 할 수 있겠습니다. 하지만 참조형 데이터는 원시 데이터와 다른점이 있어 어떻게 다른지 직관적으로 이미지를 통해 블로깅을 하겠습니다!

 

---

1. 코드가 실행된 후, x의 값은 무엇일까 ?

 

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

정답은 2 입니다. 1번 문제와 다르게 이번 문제는 원시 자료형이 아닌 object입니다. 이런 자료형을 참조 자료형이라고 부르고 참조 자료형이 변수에 할당되는 경우는, 변수에 이 데이터가 저장되는 곳의 주소에 할당이 됩니다. 그래서 2번줄에 x의 값 {foo:3}의 주소를 y에 할당해서 변수 x와 y는 a는 모두 같은 {foo:3} 객체의 주소를 바라보고 있습니다.

3번줄에 y.foo = 2를 할당하여 값은 {foo:3}으로 변경 되었고 같은 곳을 바라보고 있던 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' });

 

답은 : true true false false 입니다.

 

정말 쉽게 풀이하자면 원시자료형은 모양이 같으면 true입니다. 하지만 참조 자료형은 생긴게 같아도 주소 값이 다를 수도 있기때문에 위의 문제는 false가 나옵니다.

---

4. 코드가 실행된 후, x.foo의 값은 ?

 

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

답은 : 3

 

2번문제와 같은 맥락이지만 다른점이 있다면 코드 3번줄에 y에 2를 할당하여 참조 자료형 {foo:3}에는 아무런 영향을 미치지 않았기 때문에 x.foo는 3이 나오게 됩니다.

---

5. 코드가 실행된 후, myArray의 값은 ?

 

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

5번 문제 풀이

답은 : [2,3,25,5]

 

4번 문제와 같은 맥락입니다.

---

6. 코드가 실행된 후,  player.score의 값은 ?

 

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

 

답은 : 2

 

함수가 호출되면 매개변수 obj에 변수 player의 값이 할당됩니다. { score: 3 }의 주소값을 얻습니다. obj.score에 2를 할당하면, obj와 player는 같은 주소값을 가지고 있기 때문에, player.score도 2가 되게 됩니다.

---

7. 코드가 실행된 후, score의 값은 ?

 

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

 

답은 : 80

 

아무의미 없는 함수입니다 매개변수에 score의 80이 전달되고, value에 90이 할당됩니다.

주소값을 전달하지 않고, 값자체를 복사하여 전달만하게 되어 함수와 별 관련없이 초기에 할당 된 80이 유지됩니다.