1. 저장되는 값

원시 타입과 객체 타입은 메모리에 저장되는 값이 다릅니다. 원시 타입은 실제 값을 저장하고, 객체 타입은 실제 데이터가 저장된 위치의 메모리 주소인 참조 값이 저장됩니다.

원시타입은 변수에 연결된 주소에 실제 값이 저장되어 있습니다.

let name = 'weniv';

let name = 'weniv';

객체타입은 실제 값이 저장되어 있는 위치의 주소, 즉 참조 값을 저장합니다.

const user = {
  age: 30,
  name: 'licat',
};

const user = {
  age: 30,
  name: 'licat',
};

2. 불변성과 가변성

원시타입은 불변성을 가지고 있습니다. 한번 생성된 원시 타입의 값은 변경이 불가능합니다. 원시 값이 할당된 변수에 새로운 값을 할당하면 새로운 값을 메모리에 생성하고 변수가 해당 값을 가리키게 됩니다.

let str = "hello";
console.log(str[0]); // "h"

str[0] = "H"; // 수정 시도
console.log(str); // "hello" (변경되지 않음)

str = "Hello"; // 새로운 값 할당
console.log(str); // "Hello"

let str = "hello";
console.log(str[0]); // "h"

str[0] = "H"; // 수정 시도
console.log(str); // "hello" (변경되지 않음)

str = "Hello"; // 새로운 값 할당
console.log(str); // "Hello"

이와 달리 객체 타입은 가변성을 가지고 있습니다. 객체를 생성한 후에도 객체의 속성을 변경할 수 있습니다.

let user = { name: "라이캣", age: 20 };
console.log(user);

user.age = 30; // 프로퍼티 값 변경
user.job = "개발자"; // 새 프로퍼티 추가

console.log(user);

let user = { name: "라이캣", age: 20 };
console.log(user);

user.age = 30; // 프로퍼티 값 변경
user.job = "개발자"; // 새 프로퍼티 추가

console.log(user);

const로 선언한 변수는 상수가 아니다?!
const는 흔희 상수를 선언한다고 알려져 있지만, 정확히는 변수의 재할당을 금지하는 선언 키워드입니다. 상수를 선언한다고 알려진 이유 중 하나는 const로 선언한 원시 타입의 값은 변경이 불가능하기 때문입니다. 원시 타입의 불변성과 const의 재할당 불가로 선언된 값이 변경되지 않습니다.

하지만 const로 선언한 객체는 재할당이 불가할 뿐, 객체의 변경이 가능합니다. 객체를 const로 선언하면 객체의 수정은 자유로우면서 의도치 않은 재할당을 피할 수 있기 떄문에 객체는 const로 선언하는 것을 권장합니다.

const user = {name: '라이캣'};
user.age = 20; // 수정 가능

user = {name: '위니브'}; // 재할당 불가

const user = {name: '라이캣'};
user.age = 20; // 수정 가능

user = {name: '위니브'}; // 재할당 불가

3. 값에 의한 전달과 참조에 의한 전달

자바스크립트에서 값의 전달은 어떤 값이 한 변수에서 다른 변수로 옮겨지는 것을 의미합니다. 값의 전달은 다음과 같은 상황에서 발생합니다.

변수에 다른 변수의 값을 할당

let a = 10;
let b = a;

let a = 10;
let b = a;

함수에 인자를 전달

function sum(num1, num2) {
  console.log(`${num1} + ${num2} = ${num1 + num2}`);
}
sum(3, 5);

function sum(num1, num2) {
  console.log(`${num1} + ${num2} = ${num1 + num2}`);
}
sum(3, 5);

함수에서 값을 반환할 때

function sum(num1, num2) {
  return num1 + num2;
}
let answer = sum(3, 5);

function sum(num1, num2) {
  return num1 + num2;
}
let answer = sum(3, 5);

원시 타입과 객체 타입은 변수에 할당하거나 함수에 인자로 전달할 때 다르게 동작합니다.

2.1 원시 타입의 값 전달

원시 타입은 변수에 실제 값 자체가 저장되고, 다른 변수에 할당할 때 그 값의 복사본이 생성됩니다. 따라서 복사본을 변경해도 원본에는 영향을 주지 않습니다. 이를 '값에 의한 전달(Pass by value)' 이라고 합니다.

let a = 10;
let b = a; // a의 값이 b에 복사

console.log(a); // 10
console.log(b); // 10

// b의 값을 변경해도 a에는 영향 X
b = 20;
console.log(a); // 10
console.log(b); // 20

let a = 10;
let b = a; // a의 값이 b에 복사

console.log(a); // 10
console.log(b); // 10

// b의 값을 변경해도 a에는 영향 X
b = 20;
console.log(a); // 10
console.log(b); // 20

2.2 객체 타입의 참조 전달

객체 타입은 변수에 객체 자체가 아닌 메모리 주소(참조)가 저장됩니다. 다른 변수에 할당하면 객체의 참조가 복사되어, 두 변수는 같은 객체를 가리키게 됩니다. 따라서 한 변수를 통해 객체를 수정하면 다른 변수를 통해서도 변경사항이 보입니다. 이를 '참조에 의한 전달(Pass by reference)' 이라고 합니다.

let obj1 = { name: 'licat', age: 30 };
let obj2 = obj1; // obj1의 참조가 obj2에 복사

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'licat', age: 30 }

obj2.age = 31;

console.log(obj1); // { name: 'licat', age: 31 }
console.log(obj2); // { name: 'licat', age: 31 }

let obj1 = { name: 'licat', age: 30 };
let obj2 = obj1; // obj1의 참조가 obj2에 복사

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'licat', age: 30 }

obj2.age = 31;

console.log(obj1); // { name: 'licat', age: 31 }
console.log(obj2); // { name: 'licat', age: 31 }

자바스크립트에는 Call by value만 존재합니다
자바스크립트는 엄밀히 말하면 '값에 의한 전달(Call by value)'만 존재합니다. 객체 타입의 경우 '참조에 의한 전달(Call by reference)'처럼 보이지만, 실제로는 객체에 대한 참조가 값으로 전달되는 것이기 때문에 Call by value로 보는 것이 정확합니다.

자바스크립트는 기술적으로 항상 Call by value이지만, 객체의 경우 그 값이 참조이기 때문에 Call by sharing이라고 불리기도 합니다.

let obj1 = { name: 'licat', age: 30 };
let obj2 = obj1; // obj1의 참조가 obj2에 복사됨

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'licat', age: 30 }

obj2 = { name: 'weniv' };

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'weniv' }

let obj1 = { name: 'licat', age: 30 };
let obj2 = obj1; // obj1의 참조가 obj2에 복사됨

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'licat', age: 30 }

obj2 = { name: 'weniv' };

console.log(obj1); // { name: 'licat', age: 30 }
console.log(obj2); // { name: 'weniv' }

객체 타입이 Call by value로 동작했다면, obj2에 새 객체를 할당했을 때 obj1도 함께 변경되어야 합니다. 하지만 자바스크립트에서는 참조 자체가 값으로 복사되어 전달되므로, 새로운 객체를 할당하는 경우 원본 변수에 영향을 주지 않습니다.

JavaScript 에센셜

원시타입 vs 객체타입