javascript 원시값과 참조값

자바스크립트 변수는 크게 두 가지 타입으로 분류할 수 있는데, 바로 원시 값과 참조 값이다.

원시 값(Primitive Type)

원시 값은 단순한 데이터이며, 모든 원시 값은 변경이 불가능하다. 원시 값을 변수에 할당하면 변수에 실제 값이 저장된다.

• Number
• String
• Boolean
• Null
• Undefined
• Biglnt
• Symbol
  
  

let num = 6; 
num = 100; // 재할당

원시 값을 할당한 변수 num에 새로운 값 100을 재할당하면, 초기화했던 6이 저장된 메모리 안의 원시 값 자체를 수정하는 것이 아니라 새 메모리 공간에 재할당한 원시 값을 저장한다. 변수 num의 메모리 주소는 재할당한 원시 값인 100이 저장된 주소b로 바뀐다.

원시 값은 변경 불가능하므로 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다.

let num1 = 20;
let num2 = 20;
console.log(num1 === num1); // true

원시 값은 실제 값 자체를 비교하기 때문에 각각 다른 변수에 같은 값을 저정한 후 비교하면 두 값이 같다.

값에 의한 전달(Pass by Value)

원시 값이 실제 값이 복사 되어 전달되는 것을 값에 의한 전달이라고 한다.

let origin = 10;
let copy = origin;
console.log(origin === copy); // true

새로운 변수 copy에 원시 값이 저장된 다른 변수 origin를 할당하면, copy에 origin의 실제 값 10이 복사되어 전달된다.

copy = 222; // 재할당
console.log(origin === copy); // false

copy의 메모리 공간은 origin과 다른 메모리 공간을 사용하기에, copy의 값을 변경해도 origin 변수에 영향을 주지 않는다.

참조 값(Reference Type)

참조값은 여러 값으로 구성되는 메모리에 저장된 객체이며, 변경이 가능하다. 참조 값을 변수에 할당하면 변수에 참조 값이 저장된다.

• Object (객체)
• Array (배열)
• Function (함수)
  
  

let me = { 
  name : 'Fody'
}
me.name = 'Seohyeon';

참조 값을 할당한 변수 me에 새로운 값 Seohyeon을 재할당하면, 초기화했던 Fody이 저장된 메모리 안의 참조 값이 변경되며 메모리 주소 주소b에는 영향을 주지 않는다.

참조 값은 변경 가능하므로 값을 재할당하면 메모리 주소는 변하지 않고 참조 값 자체가 바뀐다.

let obj1 = {
	key : 'value'
}
let obj2 = {
	key : 'value'
}
console.log(obj1 === obj2); // false

참조 값은 값 자체가 아닌 참조 값을 저장하고 있는 메모리 주소를 비교하기 때문에 각각 다른 변수에 같은 값을 저정한 후 비교하면 두 값이 다르다.

참조에 의한 전달(Pass by Reference)

참조 값이 실제 값이 아닌 참조 값이 저장된 메모리 주소가 전달되는 것을 참조에 의한 전달이라고 한다.

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

새로운 변수 copy에 참조 값이 저장된 다른 변수 origin을 할당하면, copy에 origin의 메모리 주소 값 주소b가 복사되어 전달된다.

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

copy의 메모리 공간은 origin과 같은 메모리 주소를 참조하고 있기 때문에, copy의 값을 변경하면 origin 값에 영향을 준다. origin과 copy가 참조 값이 저장된 메모리 주소를 공유하고 있으므로, 두 변수 중 어느 하나의 값을 변경하더라도 두 변수의 값이 같이 바뀐다.

👉 참고: https://publizm.github.io/posts/javascript/Primitive_Reference