날것 - 원시 값과 객체의 비교

개요

원시타입, 객체타입이란 뭐냐!
원시타입은 원시값이고 객체타입은 객체임 (진짜임)
이번 챕터 진행하면서 지능 -10 됐음

원시 값

변경 불가능한 값

원시값의 가장 큰 특징중 하나로는 변경이 불가능하다 라는 특징이 있다.
한번 생성된 값은 읽기 전용으로써 변경이 불가능하다는 뜻

var test = 10; // 여기서 '10' 은 죽을때까지 10임

근데 그럼 변수에 값을 재할당 하는건 뭐냐! 라고 했을때
그건 값을 버려버리고 새집을 얻는다는 것

var test = 10; // 여기서 '10' 은 죽을때까지 10임
test = 20; // 니 값은 이제부터 20이여

이때 중요한 건, 값이 바뀌는 게 아니라 변수가 가리키는 대상이 바뀐다는 것이다.

재할당이 일어나면 기존 값(10)을 수정하는 것이 아니라  
새로운 원시값(20)이 생성되고,  
변수 test는 그 값이 저장된 새로운 메모리 주소를 가리키게 된다.

즉, 원시값은 여전히 변경되지 않고 그대로 존재하며,  
단지 변수에 저장된 메모리 주소(참조 정보)만 변경된다.

문자열과 불변성

문자는 객체다!
                   -Java-

나는 아님 ㅋㅋ
                   -Javascript-

환장할 노릇
문자열은 0개 이상의 문자로 이뤄진 합을 뜻하며 한글자에 2byte씩 사용해야함

자바스크립트의 문자열은 원시 타입으로 변경할 수 없음

var str = 'Hello'
str = 'world' // 여까진 뭐 그럴수 있다 치자

얜 근데 웃긴게 객체처럼 쓰려고 하면 자기가 알아서 원시값을 감싸는 래퍼 객체로 자동 변환된다.
이를 유사 배열 객체라고 한단다
객체의 이점을 가져가면서 불변의 특징을 가지고 있는게 좀 골때림

// 1. primitive "10000"
// 1. 임시 String wrapper 생성
// 2. wrapper[1] = 1 시도
// 3. ❗ 문자열은 read-only → 변경 안됨
// 4. wrapper 즉시 파괴

var str = '10000'
str[1] = 1

console.log(str) // "10000"

왜 객체로 관리하면 더 편할것같은데 이걸 원시값으로 관리할까?
불변성, 성능, 예측 가능성 떄문이란다
불변성, 성능은 그렇다 쳐도 예측 가능성은 바로 위 예제만 봐도 나는 잘 몰?루겠다...

값에 의한 전달

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

score = 100;

console.log(score); // 100
console.log(copy); // 80

아까 말했듯이 변수에 원시타입 값은 '직접저장' 된다
따라서 copy에 값을 전달한 시점에서 score은 원시타입을 가지고 있기 때문에 값을 직접 할당한다.

따라서 다른 메모리 공간에서 저장된 별개의 80이란 값 2개가 생기는것

낚 였 다 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

값이 할당되어있는 주소값을 변수끼리 공유하다가 특정 변수에 값이 재할당 되는 순간 다시 원시값을 할당하는 방식으로 동작할때도 있다고 한다
내부 최적화에 의해 지 맘대로 동작한다고 함

아오 ㅋㅋ 첨부터 이렇게 말하던가
어차피 서로 간섭은 못한다는 측면에서 신경 안써도 될듯 함 넘 로우레벨임

객체

변경 가능한 값

왜! 넌 변경이 가능하니

var person = {
	name: 'jeon'
}

참조값을 저장하기 때문임

참조에 의한 전달

원시값은 값 자체가 복사됐지만, 객체는 참조값(메모리 주소)이 복사된다.
그래서 두 변수가 하나의 객체를 같이 바라보게 됨

var person = {
	name: 'jeon'
};

var copy = person; // 참조값(메모리 주소)이 복사됨

console.log(person === copy); // true — 같은 객체를 가리킴

copy.name = 'kim';

console.log(person.name); // 'kim' — person도 바뀜!

원시값에서는 score = 100 해도 copy에 영향이 없었는데
객체는 copy.name = 'kim' 하면 person.name까지 바뀌어 버린다.

같은 참조를 공유하니까 한쪽에서 수정하면 다른 쪽도 영향받는 구조

얕은 복사와 깊은 복사

얕은 복사는 참조값만, 깊은 복사는 내부 객체까지 전부 복사

얕은 복사 (Shallow Copy)

1단계 프로퍼티만 새로 복사하고, 중첩된 객체는 여전히 참조를 공유한다.

var original = {
	name: 'jeon',
	address: { city: 'Seoul' }
};

// 방법 1: spread 연산자
var shallow1 = { ...original };

// 방법 2: Object.assign
var shallow2 = Object.assign({}, original);

shallow1.name = 'kim';
console.log(original.name); // 'jeon' — 1단계는 독립

shallow1.address.city = 'Busan';
console.log(original.address.city); // 'Busan' — 중첩 객체는 같이 바뀜!

깊은 복사 (Deep Copy)

중첩된 객체까지 전부 새로 만들어서 완전히 독립시킨다.

var original = {
	name: 'jeon',
	address: { city: 'Seoul' }
};

// 방법 1: structuredClone (모던 브라우저)
var deep1 = structuredClone(original);

// 방법 2: JSON (함수, undefined 등은 날아감)
var deep2 = JSON.parse(JSON.stringify(original));

deep1.address.city = 'Busan';
console.log(original.address.city); // 'Seoul' — 완전 독립!

JSON 방식은 간편하지만 undefined, function, Symbol, Date 객체 등이 제대로 복사 안 되는 한계가 있다.
structuredClone이 더 안전하지만 함수는 여전히 복사 못함

참고 자료

• 모던 자바스크립트 Deep Dive 11장
• 객체 리터럴 — 객체의 생성과 프로퍼티 접근
• 데이터 타입 — 원시 타입 7가지와 객체 타입
• var let const — 변수 선언과 할당