11.1 원시 값
변경 불가능한 값
- 원시 타입의 값, 즉 원시 값은 변경 불가능한 값
- 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없음
- 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술
- 변수: 메모리 공간 자체
- 값: 변수에 저장된 데이터
- 변수는 언제든지 재할당을 통해 변수 값을 변경(교체)할 수 있다
- 상수: 재할당이 금지된 변수
- 불변성: 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경함
- 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없음
문자열과 불변성
- 문자열: 0개 이상의 문자로 이뤄진 집합
- 1개 문자는 2byte의 메모리 공간에 저장됨
- 문자열은 몇 개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정됨
- 숫자 값은 1도, 100000000도 동일한 8byte가 필요
- 원시 값이므로 변경 불가능
var str = 'Hello';
str = 'world';
- 문자열의 식별자(str)는 문자열이 저장된 메모리 공간의 첫 번째 메모리 셀 주소를 가리킴
- 위 예제 코드에서 두번째 문이 실행되면 새로운 메모리 공간에 문자열을 집어넣고 그 주소를 가리키게 되는 것
- “Hello”와 “world”는 모두 메모리에 존재하는 것, 식별자는 “world”를 가리키도록 변경되었을 뿐
- 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있음
- 유사 배열 객체: 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체
- 원시 값을 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환(21장. 원시 값과 래퍼 객체)
var str = 'string';
// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
// 하지만 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = 'S';
console.log(str); // string
- 문자열은 변경 불가능한 값이므로, 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않음
- 변수에 새로운 문자열을 재할당하는 것은 가능
- 기존 문자열을 변경하는 것이 아닌, 새로운 문자열을 새롭게 할당하는 것이기 때문
값에 의한 전달
- 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달
var score = 80;
var copy = score;
console.log(score, copy); // 80 80
- 이 경우에는 다른 메모리 공간에 저장된 별개의 값임
- 엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문에 “값에 의한 전달”이라는 용어는 적절하진 않음
- 변수와 같은 식별자는 값이 아닌 메모리 주소를 기억하고 있음(메모리 주소에 붙인 이름)
11.2 객체
- 객체는 프로퍼티 개수가 정해져 있지 않고 동적으로 추가되고 삭제할 수 있음 → 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없음
- 객체값은 원시 값과 다른 방식으로 동작하도록 설계되어 있음
변경 가능한 값
- 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있음
- 객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있는데 이를 참조 값이라 함
- 참조 값을 통해 객체에 접근할 수 있음
- 원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근
- ‘변수는 ㅇ값을 갖는다’, ‘변수의 값은 ㅇ다’라고 표현
- 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근
- ‘변수는 객체를 참조하고 있다’, ‘변수는 객체를 가리키고 있다’라고 표현
- 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있음
- 재할당을 하지 않으므로 객체를 할당한 변수의 참조 값은 변경되지 않음
- 메모리를 효율적으로 사용, 성능 향상의 장점이 있음
- 원시 값과 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 부작용이 있음
- 얕은 복사: 한 단계까지만 복사
- 깊은 복사: 객체에 중첩되어있는 객체까지 모두 복사
- 이와 같이 생성된 객체는 원본과는 다른 객체(참조 값이 다른 별개의 객체)
참조에 의한 전달
var person = {
name: 'Lee'
};
// 참조값을 복사(얕은 복사)
var copy = person;
- 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨
- 저장된 메모리 주소는 다르지만 동일한 참조 값을 가짐 → 원본과 사본 모두 동일한 객체를 가리킴 → 두 개의 식별자가 하나의 객체를 공유
- 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받음
var person = {
name: 'Lee'
};
// 참조값을 복사(얕은 복사). copy와 person은 동일한 참조값을 갖는다.
var copy = person;
// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person); // true
// copy를 통해 객체를 변경한다.
copy.name = 'Kim';
// person을 통해 객체를 변경한다.
person.address = 'Seoul';
// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.
console.log(person); // {name: "Kim", address: "Seoul"}
console.log(copy); // {name: "Kim", address: "Seoul"}
- 원본과 사본이 가리키는 객체의 내용은 같지만 다른 메모리에 저장된 별개의 객체임, 즉 참조값은 전혀 다름
var person1 = {
name: 'Lee'
};
var person2 = {
name: 'Lee'
};
console.log(person1 === person2); // false
console.log(person1.name === person2.name); // true
'JavaScript' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 13장 - 스코프 (0) | 2023.01.07 |
---|---|
[모던 자바스크립트 Deep Dive] 12장 - 함수 (0) | 2023.01.07 |
[모던 자바스크립트 Deep Dive] 10장 - 객체 리터럴 (0) | 2023.01.07 |
[모던 자바스크립트 Deep Dive] 09장 - 타입 변환과 단축 평가 (0) | 2023.01.07 |
[모던 자바스크립트 Deep Dive] 08장 - 제어문 (0) | 2022.12.19 |