728x90
반응형
원시타입
변경 불가능한 값 (변경X, 삭제 및 생성)
- 변수가 아닌 값에 대한 진술 - 언제든 재할당으로 변수값을 변경할 수 있다.
→ 상수는 할당이 한번만 허용되어 값 변경 X - 변수 재할당 시, 참조하던 메모리 공간 주소를 변경 후 새로운 메모리 공간에 재할당 한 원시 값 저장. (불변성)
문자열과 불변성
- 문자열은 유사 배열 객체이면서도 이터러블하여 배열과 유사하게 문자에 접근 가능
- 문자열은 원시 값이라 일부 문자를 변경하려고 해도 반영 X
- 예기치 못한 변경으로부터 자유로움 --> 데이터의 신뢰성 보장
- 변수에 새로운 문자열을 재할당하는 것은 가능
값에 의한 전달
- 재할당을 할 때 변수가 아닌 값이 이동한다.
var score = 80;
var copy = score;
console.log(score, copy); // 80 80
console.log(score === copy); // true
score = 100;
console.log(score, copy); // 100 80
console.log(score === copy); // false
객체
변경 가능한 값
- 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근
- 이 참조 값을 통해 실제 객체에 접근 (변수는 객체 참조)
- 객체를 할당한 변수는 재할당 없이 객체를 직접 변경 (프로퍼티 동적 추가, 갱신 삭제 가능)
- 원시 값과 달리 여러 개의 식별자가 하나의 객체를 공유 가능
얕은 복사와 깊은 복사
- 얕은 복사
- 객체를 프로퍼티 값으로 하는 객체의 경우 1단계 까지만 복사하는 것
- 객체를 할당한 변수를 다른 변수에 할당하는 것
- 깊은 복사
- 객체의 중첩되어 있는 객체까지 모두 복사하는 것
- 원시 값을 할당한 변수를 다른 변수에 할당하는 것
const o = {x : { y:1 } };
// 얕은 복사
const c1 = { ...o }; // 35장 "스프레드 문법" 참고
console.log(c1 === o); // false
console.log(c1.x === o.x); // true
loadsh를 사용하여 깊은 복사 시 모두 false
// 이 부분에서 스프레드 연산자는 1단계 까지만 깊은복사를 수행하여 { x: ~ }는 깊은 복사이지만
// 그 안의 { y: 1}은 참조 값을 복사하기 때문에 얕은 복사라고 함
const v1 = 1;
// 깊은 복사라고 부르기도 함
const c1 = v;
const v2 = { x : 1};
// 얕은 복사라고 부르기도 함
const c2 = v2;참조에 의한 전달
- 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 --> 참조에 의한 전달
- 두 개의 식별자가 하나의 객체를 공유
- 결국 값에 의한 전달 & 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일하다. --> 그 값이 원시 값이냐 참조 값이냐의 차이
- 이 때문에 책에서는 JS는 참조에 의한 전달은 존재하지 않고 값에 의한 전달만 존재한다고 할 수 있지만 전달 되는 값의 종류가 원시 값인지 참조 값인지 구별해서 강조하자는 의미에서 구분하여 부름
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
반응형
