[Deep Dive] 11장 원시값과 객체
자바스크립트의 7가지 데이터 타입은 원시 타입과 객체 타입으로 구분됨
| 원시 타입 | 객체 타입 |
|---|---|
| 변경 불가능한 값 | 변경 가능한 값 |
| 변수에 실제 값이 저장 | 변수에 참조 값이 저장 |
| 값에 의한 전달 | 참조에 의한 전달 |
* 값에 의한 전달
변수를 다른 변수에 할당할 때 원본의 원시값이 복사되어 전달
* 참조에 의한 전달
변수를 다른 변수에 할당할 때 원본의 참조값이 복사되어 전달
1. 원시값
원시 타입의 값은 변경 불가능한 값 → 재할당을 할때 새로운 값을 생성
교체한다고 하는게 맞는 느낌이다!
변수 age -> 0x000000f2(주소) | 26(값)
___________________________________________
새로 생성 0x00001222(주소) | 27(값)
___________________________________________
0x000000f2(주소) | undefined(값)
변수 age -> 0x00001222(주소) | 27(값)
___________________________________________
원시 값을 재할당하면,
- 새로운 메모르 공간 확보
- 확보된 메모리에 값 저장
- 변수가 참조하는 메모리 변경
값이 변하지 않아 이를 불변성이라고 함
값에 의한 전달
let jongbin = "hi";
// 참조된 주소가 아닌 값이 전달
let jb = jongbin;
console.log(jongbin === jb); // true
변수 age -> 0x000000f2(주소) | 26(값)
⬇︎ age copy
변수 age -> 0x000000f2(주소) | 26(값)
변수 jbAge -> 0x00001222(주소) | 26(값)
메모리주소(저장된 값)을 복사한다(참조된 주소값은 다름!)
메모리 주소를 복사하지만 주소값이 같은 것이 아님 → 전달된 메모리 주소로 값을 참조할 수 있다
→ 복사한 변수를 수정해도 원본에 영향을 미치지 않음
2. 객체
객체는 메모리 크기가 정해져 있지도 않고, 프로퍼티를 추가, 삭제, 갱신 할 수 있기 때문에 원시값과는 다른 동작방식을 지닌다.
변경 가능한 값
객체 jongbin -> 0x000000f2(주소) | 0x00001222(값)
⬋ 참조(값에 주소를 저장)
0x00001222(주소) | { age: 26 }(값)
원시값과는 다르게 객체는 메모리에 참조값을 저장한다. 객체는 변경이 가능한 값이므로 내부 프로퍼티를 수정할 수 있지만 내부 프로퍼티를 수정해도 참조값은 바뀌지않는다.
이런 방식은 계속해서 변하는 객체의 특성 때문에 고려된 메모리 사용의 효율성과 성능을 위한 방식이다. 하지만 단점으로 여러개의 식별자가 동일한 객체를 공유할 수 있다.
참조에 의한 전달
객체 jongbin -> 0x000000f2(주소) | 0x00001222(값)
0x00001222(주소) | { age: 26 }(값) // 동일한 객체
⬇︎ copy
객체 jb -> 0x00002323(주소) | 0x00001222(값)
0x00001222(주소) | { age: 26 }(값) // 동일한 객체
복사를 하게 되면 메모리의 값(참조값)을 복사하기 때문에 동일한 객체를 참조하게 된다. 이는 여러개의 변수가 서로 영향을 미칠 수 있다.
원본의 참조값이 복사되어 전달되는 것을 참조에 의한 전달이라고 한다
참조 값만 복사하는 것을 얇은 복사라고 함
깊은 복사는 객체에 중첩되어 있는 객체까지도 전부 복사함
자바스크립트는 결국 메모리에 저장되어 있는 값을 전달한다 근데 그 값이 그냥 값인지 참조값인지에 따라 나뉘는 것 같다!
이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!