원시값을 변수에 할당한다는 의미:
변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다. 변수와 같은 식별자는
값이 아니라 메모리 주소를 기억하고 있다.
1) var score;
변수를 선언하면 변수는 메모리 공간의 어떤 부분을 undefined으로 점유한다. 주소가 생기고 변수는 이 주소를 가리킨다.
2) var score= 80;
변수에 값을 할당해주면 선언할 때의 메모리 공간에 값을 넣어주는 것이 아니라 새로운 메모리 공간, 새로운 메모리 공간의 주소에 그 값을 할당한다.
3) var score = 100;
변수에 값을 다시 할당해주면 또 다른 새로운 메모리 공간, 또 다른 새로운 메모리 공간의 주소에 그 값을 할당한다. 1)~3)번 까지의 이 과정은 총 3개의 각기 다른 메모리 공간을 사용하였다. 값의 이러한 특성을 불변성이라고 한다.
값에 의한 전달 예시
var score = 80;
var copy = score;
console.log(score, copy); // 80, 80
console.log(score === copy) // true
score= 100
console.log(score,copy) // 100, 80
console.log(score===copy) //false
score와 copy는 각각 다른 메모리 공간의 다른 메모리 주소를 가리키고 있다.
score를 100으로 재할당해주었을 때 새로운 메모리 공간, 새로운 메모리 주소를 가리키게 생성되지만 copy는 여전히 같은 메모리 공간의 주소를 가리키므로 100이라는 값을 갖지 않는다.
하지만 객체는 변경 가능한 값이다. 객체를 할당한 변수는 메모리에 저장되어있는 참조값을 통해 실제 객체에 접근한다. 따라서 재할당없이 프로퍼티를 동적으로 추가할수도 있고 프로퍼티값을 갱신할수도, 제거할 수도 있다. 예를 들자면 객체의 프로퍼티의 키에 대한 값이 가르키는 곳이
원본 객체가 저장되어있는 메모리의 주소값을 가리키게 된다. 객체를 복사하면 동일한 원본 객체의 주소값이 복사된다.
위의 값에 의한 전달예시는 깊은 복사라고 볼 수 있다. 복사를 해도 원본 값에 영향이 미치지 않기 때문이다. 반대로 얕은 복사는 한 쪽에서 수정을 하면 원본 역시 변경이 된다. 특히 객체에서 중첩된 객체가 있을 때 참조로 복사를 하므로 주의하여야 한다.
다음 예시를 보자
const originalArray = [1,2, {a:3}];
const copy = [...originalArray]
copy[0]=11
console.log(originalArray); //[ 1, 2, { a: 3 } ]
console.log(copy); //[ 11, 2, { a: 3 } ]원본 객체를 새로운 배열로 복사하였고 각기 영향을 미치지 않고 있다.
const originalArray = [1,2, {a:3}];
const copy = [...originalArray]
copy[0]=11
copy[2].a=33
console.log(copy) // [ 11, 2, { a: 33 } ]
console.log(originalArray) // [ 1, 2, { a: 33 } ]원본과 복사본이 같은 객체를 참조하는 경우, 한 쪽에서 객체를 수정하면 다른 쪽에서도 영향을 받는다. 이를 얕은 복사라고 한다.
