Primitives type vs Reference type

위의 자료에서 볼 수 있듯이 primitive은 call stack에 저장되어지고
reference type은 heap에 저장되어진다.

각각 코드를 보면서 어떻게 자바스크립트에서 작동되는지를 배웠는데 정말 흥미로웠다.
primitive value는 아까 말했듯이 call stack에 저장되는데
처음에는 identifier age와 oldAge 둘 다 address 0001를 가리키고 있다가
age=31;을 한 상황부터 value자체가 달라지는게 아니라
새로운 address인 0002로 가서 다른 value값을 갖는다.
이런 원리로 console.log(age) 는 값이 31이 나오고
console.log(oldAge)는 값이 30이 나오는것이다!

다음으로 reference value는 값이 heap에 저장되지만
맨처음에 콜스택에서 address와 value(heap에서의 address)를 받은 뒤
heap으로 가게 되면 여기서는 다른 점이 heap에 있는 value에서 그냥 값이
바뀌게 된다!!!! 그러한 이유로 똑같이 27이라는 값이 나오는 것이다.

Reference type에서

const jessica = {
  firstName: 'Jessica',
  lastName: 'Williams',
  age: 27,
};
const marriedJessica = jessica;
marriedJessica.lastName = 'Davis';
console.log('Before marriage:', jessica);
console.log('After marriage:', marriedJessica);

const인데 marriedJessica.lastName을 'davis'로 바꾸는게 가능하나라는
생각이 들테지만 요건 property만 바꿔준거라 아무 상관이 없다.
안되는건

marriedJessica = {};

이런식으로 object를 바꾸려고 할때 안되는것이다.
object 를 카피해서 다른 결과가 나오게 해줄 수 도 있는데
예시는 아래와 같다.

const jessica2 = {
  firstName: 'Jessica',
  lastName: 'Williams',
  age: 27,
  family: ['Alice', 'Bob'],
};

const jessicaCopy = Object.assign({}, jessica2);
jessicaCopy.lastName = 'Davis';
console.log('Before marriage:', jessica2);
console.log('After marriage:', jessicaCopy);

이렇게 object.assign이라는걸 이용해서 object를 카피해줄 수 있다.
근데 여기서 알아야할 점이 있는데
it only works in the first level it is called shallow copy...

예를 들어

jessicaCopy.family.push('Mary');
jessicaCopy.family.push('John');

console.log('Before marriage:', jessica2);
console.log('After marriage:', jessicaCopy);

이런식으로 family에 배열 추가해주면
카피해도 카피한 결과가 안나온다. 왜냐면 first level이 아니기 때문이다.

좋은 웹페이지 즐겨찾기