원시 값과 객체의 비교
값 변수에 할당시 확보된 메모리 공간에는? 다른 변수에 할당하면?
원시 타입 (Primitive type) |
변경 불가능한 값 (Immutable value) |
실제 값이 저장됨 | 원본의 값이 복사되어 전달 ⇒ 값에 의한 전달(pass by value) |
객체 타입 (Object / Reference type) |
변경 가능한 값 (Mutable value) |
참조 값이 저장됨 | 참조 값이 복사되어 전달 ⇒ 참조에 의한 전달(pass by reference) |
원시 값
- 변경 불가능한 값
- 읽기 전용 값으로서 변경할 수 없음 ⇒ 데이터의 신뢰성 보장
- 불변성
- 변수값 변경(=원시값 재할당) → 새 메모리 공간 확보 → 재할당한 값 저장 → 변수가 참조하던 메모리 공간의 주소 변경
- 재할당 이외에 변수 값을 변경할 수 있는 방법은 없음
문자열과 불변성
- 문자열
- 원시 타입. 한번 생성된 문자열은 변경할 수 없음.
- 0개 이상의 문자로 이루어진 집합. 1개의 문자는 2바이트의 메모리 공간에 저장됨 ⇒ 몇개의 문자로 이루어졌느냐에 따라 필요한 메모리 공간의 크기가 결정됨
- 유사 배열 객체이면서 이터러블. 배열과 유사하게 각 문자에 접근할 수 있음.
💡 유사배열 객체
배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체
값에 의한 전달
변수에 원시 값을 갖는 변수를 할당했을때, 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 정확하게는 메모리 주소가 전달되는 것이다. 변수는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.
var score = 80;
var copy = score;
console.log(score); // 80
console.log(copy); // 80 <- 할당되는 변수(score)의 원시값인 80이 할당받는 변수(copy)에 복사
변수 | score | copy | |
메모리 주소 | 01 | 02 | 03 |
저장된 값 | 80 | 80 |
score = 150;
console.log(score); // 100
console.log(copy); // 80 <- 다른 메모리 공간에 저장된 별개의 값이라 변경되지 않음
변수 | copy | score | ||
메모리 주소 | 01 | 02 | 03 | 04 |
저장된 값 | 80 | 80 | 150 |
변수에 원시 값을 갖는 변수를 할당했을때, 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.
객체
- 프로퍼티의 개수 정해져 있지 않음
- 동적으로 추가, 삭제 가능
- 프로퍼티의 값에 제약 없음
- 확보할 메모리 공간의 크기를 사전에 정할 수 없음
변경 가능한 값
객체는 변경 가능한 값이다. 변수에 객체를 할당하면 생성된 객체가 저장된 메모리 공간의 주소인 참조값에 접근할 수 있고, 변수는 이 참조값을 통해 실제 객체에 접근할 수 있다.
변수 | person | ||
메모리주소 | 01 | 02 | 03 |
저장된 값 | 03 | { name : ‘harry’ } |
객체는 변경 가능한 값이므로 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 이때 변수에 재할당을 하지 않았으므로 변수의 참조 값은 변경되지 않는다.
변수 | person | ||
메모리주소 | 01 | 02 | 03 |
저장된 값 | 03 | { name : ‘harry’, age: 11 } |
여러개의 식별자가 하나의 객체를 공유할 수 있기 때문에 주의해야한다.
- 얕은 복사
- 객체를 프로퍼티 값으로 갖는 객체를 한 단계까지만 복사 (= 참조 값을 복사)
- 깊은 복사
- 객체에 중첩되어 있는 객체까지 모두 복사(=완전한 복사본)
참조에 의한 전달
객체를 가리키는 변수(원본)를 다른 변수(사본)에 할당할 경우 원본의 참조 값이 복사되어 전달되는 것.
var person = {
name : 'harry'
}
// 참조 값을 복사 (얕은 복사)
var copy = person;
변수 | person | copy | |||
메모리주소 | 01 | 02 | 03 | 04 | 05 |
저장된 값 | 03 | 03 | { name : ‘harry’ } |
person과 copy가 모두 동일한 객체를 가리키고 있어서, 원본이나 사본 중 한쪽에서 객체의 프로퍼티 값을 변경하거나 추가, 삭제하는 경우 서로 영향을 주고 받는다.
var person = {
name : 'harry'
}
// 참조 값을 복사 (얕은 복사)
var copy = person;
copy.name = 'ron'
person.age = 11
console.log(person) // {name: 'ron', age: 11}
console.log(copy) // {name: 'ron', age: 11}
// => 두개의 변수가 같은 객체를 참조하고 있는 경우,
// 둘중 한쪽에서 값을 변경하면 서로 영향을 주게 된다
'study > JavaScript' 카테고리의 다른 글
딥다이브 스터디 : 13장 스코프 (0) | 2024.05.29 |
---|---|
딥다이브 스터디 : 12장 함수 (0) | 2024.05.29 |
즉시 실행 함수(IIFE) (0) | 2023.03.28 |
[JavaScript] 이벤트 버블링, 캡쳐링, 이벤트 위임 (0) | 2023.02.22 |
[JavaScript] localStorage 사용하기 (0) | 2023.01.24 |