[Javascript] 원시값과 객체

원시 값이 '불변(immutable)'하다는 것은?

원시 값이 불변하다는 것은 한 번 생성된 값 자체는 변경할 수 없다는 의미입니다.

메모리 공간에 한번 할당된 값은 변경이 불가능합니다.

변수에 새로운 값을 할당하는 것은 재할당이지, 기존 값의 변경이 아닙니다.

let name = 'John';
name = 'Jane';

let name = 'John'이라고 했을 때, 이 'John'이라는 문자열 자체는 절대 바뀌지 않습니다. 만약에 name = 'Jane'이라고 하면, 새로운 문자열을 만들어서 name 변수에 다시 할당합니다.

그렇다면 변경 가능한 값이 있을까요?

네, 변경 가능한 값이 있습니다. 객체는 변경 가능한 값입니다.

생성 후에도 프로퍼티를 추가, 수정, 삭제할 수 있습니다.

변수는 객체의 메모리 주소를 기억합니다.

const obj = { name: 'John', age: 24 };
obj.name = 'Jane'; // 원본 객체가 변경됨
console.log(obj); // { name: 'Jane', age: 24 }

let person = { name: 'John' }이라고 했을 때, 나중에 person.name = 'Jane'이라고 하면 그 객체의 내용이 바뀌어 버립니다.

메모리 관리 방식
- 원시 값: 스택(정적) 메모리에 값 자체를 직접 저장합니다.
- 객체: 힙(동적) 메모리에 실제 데이터를 저장하고, 변수는 그 메모리 주소(참조 값)를 저장합니다.

상수(const)와 원시값의 차이?

상수는 변수의 재할당을 제한하는 것이고, 원시값은 값 자체의 불변성을 의미합니다.
상수에는 원시값뿐만 아니라 객체도 할당할 수 있으며, 이 경우 객체의 내용은 여전히 변경 가능합니다.

문자열은 배열일까요?

아니요. 문자열은 유사 배열 객체 중 하나입니다.

문자열은 배열처럼 인덱스를 통해 각 문자에 접근할 수 있고, length 프로퍼티를 갖기때문에 유사 배열 객체라고 불립니다.

하지만, 실제 배열은 아니기때문에 배열 메서드를 사용할 수 없습니다.

# 원시값 # 변경 불가능

자바스크립트의 값 전달 방식

자바스크립트는 값에 의한 전달만 존재합니다.

변수 메모리 공간의 값을 복사하여 전달합니다.

차이점은 변수에 저장된 값이 원시값이냐 참조값이냐 입니다.

 

원시 값 전달

원시 값의 복사본이 전달되어, 함수 내부에서 수정해도 원본에 영향을 주지 않습니다.

function modifyValue(x) {
    x = 10;
}

let num = 5;
modifyValue(num);

console.log(num); // 5 (변경되지 않음)

 

객체 전달

하지만 객체는 객체의 참조 값이 복사되어 전달되므로, 함수 내부에서 객체를 수정하면 원본 객체가 변경됩니다.

function modifyArray(arr) {
    arr.push(4);
}

let originalArray = [1, 2, 3];
modifyArray(originalArray);

console.log(originalArray); // [1, 2, 3, 4] (원본이 변경됨)

얕은 복사와 깊은 복사의 차이는 무엇인가요?

얕은 복사는 겉면만 복사합니다. 중첩된 객체나 배열은 참조를 공유합니다.

// 예제1
const arr = [[1, 2], [3, 4]];
const arr2 = [...arr]; // 얕은 복사

arr2[0].push(3);
console.log(arr[0]); // [1, 2, 3] - 원본도 변경됨!

// 예제2
const original = {
    name: "Alice",
    details: { age: 25, city: "Seoul" }
};

const shallowCopy = { ...original };
shallowCopy.details.city = "Busan";

console.log(original.details.city); // "Busan" (원본도 변경됨)

 

깊은 복사는 중첩 객체까지 모두 복사합니다. 완전히 독립접인 하나의 객체가 생성됩니다.

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;

console.log(original.b.c); // 2 (원본은 변경되지 않음)