[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdevlog-juneby.vercel.app%2Fposts%2FJavaScript%2Fdeep-dive-js-11&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 🌟 원시값과 객체 원시타입의 값, 즉 원시값 은 변경 불가능한 값(immutable value)이다. (즉, 읽기 전용 값이다) 이에 비해, 객체(참조) 타입의 값, 즉 객체 는 변경 가능한 값이다. 원시 값을 변수에 할당하면, 변수(확보된 메모리 공간)에는 실제 값 이 저장된다. 객체를 변수에 할당하면, 변수에는 참조 값 이 저장된다.

**원시 값을 갖는 변수를 다른 변수에 할당** 하면, 원본의 **원시 값이 복사**되어 전달된다. 이를 `값에 의한 전달` 이라고 한다.

**객체를 가리키는 변수를 다른 변수에 할당** 하면, 원본의 참조 값이 복사되어 전달된다. 이를 `참조에 의한 전달` 이라고 한다.

`변수` 는 언제든지 재할당을 통해 변수 값을 변경할 수 있다. (재할당시 새로운 메모리 공간에 변경하려는 원시값을 넣고, 변수가 해당 메모리 공간을 가르키도록 한다.) 이에 비해, `상수`는 재할당이 금지된 변수를 말한다. (const) # 🌟 문자열과 불변성 1개의 문자는 2바이트의 메모리 공간에 저장된다. 8개의 문자로 이루어진 문자열은 총16바이트의 공간에 저장된다. 자바스크립트는 원시 타입인 문자열 타입을 제공한다. 자바스크립트의 문자열은 원시 타입이며, 변경 불가능하다 -> 이는, **문자열이 생성된 이후에는 변경할 수 없음**을 의미한다. ```js var str = "Hello"; str = "world"; ``` 첫 번째 문 이후, 문자열 `Hello`가 생성되고, 식별자 `str`은 해당 문자열이 저장된 **메모리 공간의 첫 번째 메모리 셀 주소**를 가리킨다. 두 번째 문 이후, 이전 문자열 `Hello를 수정하는 것`이 아닌, 새로운 문자열 `world를 메모리에 생성`하고, **해당 메모리 공간의 첫 번째 메모리 셀 주소를 가리키도록** 한다. 문자열은 `유사 배열 객체` 이기 때문에, 배열과 유사하게 문자에 접근할 수 있다. (`유사 배열 객체`란, 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.) ```js var str = "string"; console.log(str[0]); // s console.log(str.length); // 6 console.log(str.toUpperCase()); // STRING var arr = "string"; arr[0] = "S"; // 불가능 ``` 문자열은 변경 불가능한 값이기 때문에, `arr[0] = "S"` 처럼 **이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다.**
# 🌟 값에 의한 전달 ```js var score = 80; var copy = score; console.log(score); // 80 console.log(copy); // 80 score = 100; console.log(score); // 100 console.log(copy); // 80 ``` var copy = score 하는 순간 새로운 숫자 값 80이 생성되고 copy변수에 할당된다. 이처럼 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수(copy)에는 할당되는 변수(score)의 원시값이 복사되어 전달된다. 이를 `값에 의한 전달` 이라고 한다. (값에 의한 전달도 사실은 값을 전달하는 것이 아니라 메모리 주소를 전달한다는 것을 기억하자. 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.) # 🌟 객체 객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다. 또한, 프로퍼티의 값에도 제약이 없다. 따라서, 원시 값과 다르게 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다. 또한, 원시 값과 다르게 객체는 `변경 가능한 값`(mutable value)이다. ```js var person = { name: "Lee", }; person.name = "Kim"; person.address = "Suwon"; console.log(person); // {name : "Kim", address : "Suwon"} ``` 객체는 할당한 변수가 기억하는 **메모리 주소를 통해 해당 메모리 공간에 접근**하면 `참조값`에 접근할 수 있는데, 이 참조 값은 **객체가 저장되어 있는 메모리 공간의 주소, 그 자체**이다

# 🌟얕은복사와 깊은복사 `얕은 복사` 는 한 단계까지만 복사하는 것을 말하고 `깊은 복사`는 개체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다. ```js var person = { name: "Lee", }; var copy = person; ``` 객체를 가리키는 변수(person) 을 다른 변수(copy)에 할당하면 원본의 참조 값(객체의 주소)이 복사되어, 전달된다. 즉, 두 개의 식별자가 하나의 객체를 공유한다는 것이다.
# 🌟요약 `원시 값`은 `변경 불가능한 값`, `객체`는 `변경 가능한 값` (객체는 참조 값이 저장되는거임 -> 주소) 문자열은 원시 타입이기 때문에, 변경이 불가능하다 -> 따라서, 새로운 문자열을 만들어야 한다. 원시 값을 갖는 변수를 다른 변수에 할당하면, 원시 값이 복사되어 전달된다. 객체는 다른 변수에 할당하면, 주소값을 전달함 -> 따라서, 복사받은변수가 객체를 변경하면 기존 변수도 바뀐다.

원시 값과 객체의 비교 [모던 자바스크립트 Deep Dive 11장]