728x90
1. 원시값
변경 불가능한 값
- 원시 타입의 값, 원시 값은 변경 불가능한 값
- 한번 생성된 원시 값은 읽기 전용 값. 변경할 수 없음
- 데이터의 신뢰성 보장
- 원시값을 할당한 변수에 새로운 원시 값 재할당 시
- 재할당 이전의 변수값 변경 X
- 새로운 메모리 공간 확보. 재할당한 원시 값 저장
- 변수가 새롭게 재할당한 원시 값 가리킴
- 변수가 참조하던 메모리 공간 주소 바뀜
문자열과 불변성
- 자바스크립트의 문자열도 원시 타입. 변경 불가능
- 문자열 -> 유사 배열 객체
- 유사 배열 객체?
- 배열처럼 인덱스로 프로퍼티 값에 접근 가능
- length 프로퍼티를 가지는 객체
- for 문으로 순회 가능
var str = 'string';
// 문자열은 유사 배열. 인덱스를 사용해 각 문자에 접근 가능
// but 문자열은 원시 값. 변경 불가. 에러 발생하지 않음
str[0] = 'S';
console.log(str); // string
값에 의한 전달
- 공유에 의한 전달
- 메모리 주소 전달
- 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조 가능
- 결론 ✍️
- 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값.
- 어느 한쪽을 재할당 하더라도 서로 간섭 불가 ❌
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 score = 80;
var copy = score;
console.log(score, copy); // 80, 80
console.log(score === copy); // true
// 같은 값을 가진다는 점에서 동일하지만 서로 다른 메모리 공간에 저장된 별개 값
var score = 80;
var copy = score;
console.log(score, copy); // 80 , 80
console.log(score === copy); // true
score = 100;
// score 변수와 copy 변수의 값은 서로 다른 공간에 저장된 별개 값
// copy 변수의 값은 변경되지 않음
console.log(score, copy); // 100 , 80
console.log(score === copy); // false
2. 객체
변경 가능한 값
- 객체(참조) 타입의 값, 객체는 변경 가능한 값
- 객체를 할당한 변수를 참조 시 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근
// 할당 이뤄지는 시점에 객체 리터럴이 해석 됨. 객체 생성
var person = { // 객체 {name:'sutrong'} 를 가리키고(참조하고) 있음
name : 'sutrong'
};
// person 변수에 저장되어 있는 참조 값으로 실제 객체 접근.
console.log(person); // {name: "sutrong"}
- 객체를 할당한 변수는 재할당 없이 객체 직접 변경 가능
- 재할당 없이 프로퍼티 동적 추가, 프로퍼티 값 갱신, 프로퍼티 자체 삭제 가능 😮
var person = {
name : 'sutrong'
};
// 프로퍼티 값 갱신
person.name = 'woojo';
// 프로퍼티 동적 생성
person.gender = 'women';
console.log(person); // {name:"woojo" , gender:"Seoul"}
- 원시값 처럼 이전 값 복사해 새롭게 생성할 수 없어 신뢰성 떨어짐 (객체의 구조적 단점)
- 객체는 원시 값처럼 크기가 일정하지 않고 매우 클 수 있음
- 메모리 사용의 효율성과 성능을 위해 구조적 단점 감안해 설계
참조에 의한 전달
- 객체를 가리키는 변수(원본)를 다른 변수(사본)에 할당할 때 원본의 참조 값이 복사되어 전달 되는 것
- 원본과 사본이 모두 동일한 객체를 가리킴
- 두 개의 식별자가 하나의 객체를 공유, 서로에게 영향 미칠 수 있음 ⭕
var person = {
name : 'sutrong'
};
// 참조 값을 복사(얕은 복사). copy와 person은 동일한 참조 값 가짐
var copy = person;
// copy와 person은 동일한 객체 참조
console.log(copy===person); // true
// copy 식별자를 통해 객체를 변경
copy.name = 'suji';
// person 식별자를 통해 객체 변경
person.address = 'Seoul';
// 서로 영향 주고 받음
console.log(person); // {name:"suji" , address:"Seoul"}
console.log(copy); // {name:"suji" , address:"Seoul"}
var person1 = {
name : 'sutrong'
};
var person2 = {
name : 'sutrong'
};
console.log(person1 === person2); // false. 서로 다른 별개의 객체
console.log(person1.name === person2.name); // true.
// 프로퍼티 값 참조하려는 pserson1.name 과 person2.name은 값으로 평가될 수 있는 표현식.
// 두 값 모두 'sutrong'으로 평가 됨
참고 : 모던 자바스크립트 Deep Dive
728x90
'TIL > JavaScript' 카테고리의 다른 글
[딥다이브] 13장 스코프 (0) | 2022.04.30 |
---|---|
[딥다이브] 12장 함수 (0) | 2022.04.30 |
[Vanilla JS 활용] DOM 제어 및 사용자 정보 획득 (0) | 2022.04.26 |
[딥다이브] 10장 객체 리터럴 (0) | 2022.04.26 |
[딥다이브] 9장 타입 변환과 단축 평가 (0) | 2022.04.24 |