원시값과 참조값의 비교

1.원시값(primitive type)

- 원시값은 단순한 데이터이다. 변수가 가리키는 메모리에 실제로 값이 들어있다.

- 변경 불가능한 값(Immutable value) -> 원시값 자체를 변경할 수 없는 것이지, 변수를 변경(재할당)하는것은 가능하다.

- 원시값은 데이터의 신뢰성을 보장한다.

- 변수에 값을 재할당시 메모리에 저장된 값을 지우고 다시 할당하는것이 아니라 다른 메모리 주소에 값을 저장한다.

- 원시값에는  Number, Bigint, String, Boolean, Symbol, undefined, null 7가지가 있다.

- 값에 의한 전달(pass by value) : 원시값은 실제 값이 복사되어 전달된다. 이를 값에 의한 전달 이라고 한다.

var height = 80;

var copy = score;

console.log(height, copy); // 80 80
console.log(height === copy); // true

 위의 코드에서 height와 copy는 동일한 값을 가지고있지만, 별개의 메모리 공간에 저장되어 있다. 어느 한쪽을 재할당 하더라도 다른 한쪽의 값에 영향을 주지 않는다.

 

2. 참조값(Reference type)

- 참조값은 여러 값으로 구성되는 메모리에 저장되는 객체이다.

- 참조값은 크기가 정해져있지 않고, 변수의 값이 저장된 메모리블록의 주소가 저장된다.

- 참조값은 변경 가능한 값(mutable value) 이다.

- 참조값을 할당한 변수는 재할당 없이 참조값을 직접 변경할 수 있다.

- 참조값에는 Object(Object, function, array etc)가 있다.

- 참조에 의한 전달(pass by reference) : 참조값이 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다.

   이 때 복사된 사본과 원본이 같은 참조값을 가리킨다. 따라서 둘 중 한곳에서 값을 변경하면 다른쪽에도 영향을 준다.

let origin = {
	key : 'value'
}
let copy = origin;
console.log(origin === copy); // true

copy.key = 'new'; // 재할당
console.log(origin === copy); // true

* 얕은복사(shallow copy)와 깊은복사(deep copy)

 - 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다.

 - 얕은복사는 객체에 중첩되어 있는 객체의 경우 참조값을 복사한다.

 - 깊은복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시값처럼 완전한 복사본을 만든다.

 

3. 원시값과 참조값의 비교

 - 원시값은 변경 불가능한 값(immutable value)이고, 참조값은 변경 가능한 값(mutable)이다.

 - 원시값을 변수에 할당하면 실제 값이 저장된다. 참조값을 변수에 할당하면 값이 있는메모리를 가리키는 참조값이 저장된다.

 - 원시값을 복사하면 값에 의한 전달(pass by value)이 되고, 참조값을 복사하면 참조에 의한 전달(pass by reference)이 된다.

 

 

Reference

- https://choar816.tistory.com/154

-https://jsh99.github.io/JavaScript/primitive_reference/

- https://serzhul.io/JavaScript/11.%EC%9B%90%EC%8B%9C-%EA%B0%92%EA%B3%BC-%EA%B0%9D%EC%B2%B4%EC%9D%98-%EB%B9%84%EA%B5%90/