JS : 값과 참조의 차이 (자바스크립트 원리)

📍 원시(Primitive) 이해

원시타입은 값이 복사되어 전달됨

let a = 1;
let b = a;

코드 설명

a가 가리키고 있는 메모리 값에 있는 1이 B에도 할당받게 됨 ▶️ b변수에는 a값에 들어있는 숫자 1이 들어있는 것을 알 수 있음

이러한 구조를 copy by Value 라고 한다.

결과값에 대한 작동 이유

원시타입은 값 자체가 복사되어서 할당되어짐

📍 객체(Object) 이해

객체타입은 참조값(메모리주소, 레퍼런스)가 복사되어 전달됨

let apple = {
  name: 'apple',
}
// orange라는 변수에 apple을 할당
let orange = apple;

코드 설명

이 때에는 원시값과 다르게 apple이 가리키고 있는 메모리에 들어있는 메모리 주소가 복사되어 할당받게 됨

이러한 구조를 copy by Reference (레퍼런스가 복사되어 재할당되는 것) 라고 한다.

let apple = {
  name: 'apple',
}
// orange라는 변수에 apple을 할당
let orange = apple;
// apple 객체에 있는 이름을 orange로 바꿈
apple.name = 'orange';

apple이 가리키고 있는 메모리 주소에 객체의 이름을 orange로 바꾸었으니 orange가 됨

// 원시타입은 값이 복사되어 전달됨
let a = 1;
let b = a; // 1
b = 2;
console.log(a);
console.log(b);

// 객체 타입은 참조값(메모리주소, 레퍼런스)가 복사되어 전달됨
let apple = { // 메모리주소 : 0x1234 라면
    name : '사과'
};
let orange = apple; // 동일한 메모리주소 할당 : 0x1234
orange.name = '오렌지';
console.log(apple); // 결과 : 오렌지
console.log(orange); // 결과 : 오렌지

• 원시타입과 객체타입은 어떻게 복사되어 전달되는지에 따라 달라짐
• 함수에서 매개변수로 전달할 때 원시타입은 값이 복사되어 전달됨
• 함수에서 매개변수로 전달할 때 객채타입은 그 오브젝트 값 자체가 아니라 너무 뚱뚱해서 전달될 수가 없음, 그걸 가리키고 있는 메모리주소가 복사되어 전달됨
• 객체타입은 메모리 주소를 복사하게 되면, 결국엔 동일한 곳을 가리키고 있기 때문에 한 곳에서 수정하면 동일한 곳을 가리키고 있는 오브젝트 자체가 변경됨

정리

원시타입은 값 자체가 메모리에 들어있고 객체타입은 참조값이 들어있다.

객체타입은 할당하거나 나중에 다른 함수에 매개변수로 전달할 때에는 항상 메모리 안에 있는 게 복사되어진다. (메모리값 자체가 전달되어 복사 됨)