Search

8장 원시 / 객체 비교

대분류
언어
서적
소분류
JS DeepDive
태그
원시
객체
얕은/깊은 복사
참조 전달
최종 편집 일시
2024/10/27 15:41
생성 일시
2024/01/25 08:11
14 more properties

원시타입

변경 불가능한 값 (변경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
JavaScript
복사

객체

변경 가능한 값

변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근
이 참조 값을 통해 실제 객체에 접근 (변수는 객체 참조)
객체를 할당한 변수는 재할당 없이 객체를 직접 변경 (프로퍼티 동적 추가, 갱신 삭제 가능)
원시 값과 달리 여러 개의 식별자가 하나의 객체를 공유 가능

얕은 복사와 깊은 복사

얕은 복사
객체를 프로퍼티 값으로 하는 객체의 경우 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;
JavaScript
복사

참조에 의한 전달

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 --> 참조에 의한 전달
두 개의 식별자가 하나의 객체를 공유
결국 값에 의한 전달 & 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일하다. --> 그 값이 원시 값이냐 참조 값이냐의 차이
이 때문에 책에서는 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"}
JavaScript
복사
var person1 = { name: 'Lee' }; var person2 = { name: 'Lee' }; console.log(person1 === person2); // false console.log(person1.name === person2.name); // true
JavaScript
복사