-02- Reference v Value

const는 상수인데 객체나 함수의 값은 변경할 수 있는 이유??

자바스크립트 자료형

자바스크립트의 자료형에는 두 가지 종류가 있는데 referance 타입과 primitive 타입이 있습니다.

primitive type에는 num boolean string null… 등이 해당되고 reference type은 object, array, function 등이 있습니다 (사실은 다 object) primitive type의 자료를 변수에 담으면 변수에는 value가 저장되지만 reference type의 자료를 변수에 담으면 변수에는 값이 아닌 메모리 주소가 저장됩니다. (실제 값은 메모리의 heap에 저장됨)

// primitive type
let a = 10
let b = 20
let c = a

Variable	Value
a	10
b	20
c	10

// reference type
let a = 10
let b = 20
let c = [1, 2]

Variable	Value	Heap
a	10	x
b	20	x
c	10	[1, 2]

//같은 array를 비교해도 false가 나옴
let a = [1, 2]
let b = [1, 2]
console.log(a === b)
// false

Variable	Value	Heap
a	0x0000c	[1, 2]
b	0x0000b	[1, 2]

그러므로 const에 객체를 집어넣을 때 객체의 내용이 바뀌더라도 문제가 일어나지 않는 것입니다.(변수에 저장된 값은 똑같으니까) 반대로 객체의 값이 같더라도 다른 변수로 선언되었다면 메모리 주소가 다르기 때문에 서로 다른 것으로 인식하게 됩니다.

레퍼런스 타입 복사하기

만약 레퍼런스 타입의 변수는 메모리 주소를 저장하기 때문에 이미 선언한 변수를 새로운 변수에 넣는다면 같은 메모리 주소를 저장하게 됩니다 이렇게 중첩된 객체의 값을 조작하면 원본 혹은 복사본 한쪽의 값만 건드려도 다른 객체의 값 또한 바뀝니다 이렇게 한다면 예상하지 못한 버그를 만들어 낼 수 있습니다.

let a = 10
let b = 20
let c = [1, 2]
let d = c
d.push(3)

Variable	Value	Heap
a	10	x
b	20	x
c	0x0000b	[ 1 , 2 , 3 ]
d	0x0000b	[ 1 , 2 , 3 ]

레퍼런스 타입 변수의 값을 복사하기 위해서는. 새로운 변수에 복사하고 싶은 변수의 값을 넣어줘야 합니다. 메모리 주소가 다르기 때문에 값을 변경해도 서로 영향이 없습니다.(서로 다른 객체로 인식) 그렇기 때문에 예측 가능한 코드를 쓸 수 있습니다.

자바스크립트에서 객체의 값을 복사하는 방법은 전개 연산자를 사용하는 것입니다. 어떤 변수에 담긴 객체의 값을 그대로 복사하거나 새로운 값을 추가하는 것도 가능합니다.

let a = 10
let b = 20
let c = [1, 2, 3]
let d = [...c]

console.log(c === d) // false

Variable	Value	Heap
a	10	x
b	20	x
c	0x0000b	[ 1 , 2 , 3 ]
d	0x0000c	[ 1 , 2 , 3 ]

// spread 이용해서 복사 후 내용 갱신하기
const book = {
  title:" Reasons and Persons",
  author:" Derek Parfit"
}


const update = { ...book, year: 1984 }

 // { title:" Reasons and Persons", author:" Derek Parfit", year: 1984 }

만약 동일한 키에 서로 다른 값을 추가하면 어떤 값이든 가장 마지막에 선언된 값을 사용합니다.

const defaults = {
  author: "",
  title: "",
  year: 2017,
  rating: null,
};

const book = {
  author: "Joe Morgan",
  title: "ES6 Tips",
};

const bookWithDefaults = { ...defaults, ...book }


// { author: "Joe Morgan", title: "ES6 Tips",  year: 2017, rating: null }

결론: 레퍼런스 타입의 값은 변수에 메모리 주소를 저장한다 (값은 heap에) 레퍼런스 타입 변수의 값만을 복사하고 싶다면 전개 연산자를 사용하자.

참고자료:
Reference Vs Value - Most People Don't Understand This

자바스크립트 코딩의 기술