[240305] 11장 원시 값과 객체의 비교
11장 원시 값과 객체의 비교
데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는 무엇일까?
- 원시 값은 변경 불가능한 값이다 / 객체(참조) 타입의 값은 변경 가능한 값이다.
- 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. / 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.
- 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 값에 의한 전달 (pass by value) / 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 참조에 의한 전달 (pass by reference)
원시 값
변경 불가능한 값
- 한 번 생성된 원시 값은 읽기 전용값으로서 변경할 수 없다.
- 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술
- 상수는 재할당이 금지된 변수일 뿐, 변경 불가능한 값과 동일하지 않음
// const 키워드를 사용해 선언한 변수는 재할당이 금지된다.
// 상수는 재할당이 금지된 변수일 뿐이다.
const o = {};
// const 키워드를 사용해 선언한 변수에 할당한 원시 값은 변경할 수 없다.
// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
o.a = 1;
console.log(o); {a:1}
- 원시 값은 변경 불가능한 값, 읽기 전용
- 데이터의 신뢰성 보장
- 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당하고 변수는 새롭게 재할당한 원시 값을 가리킨다. 이때 변수가 참조하던 메모리 공간의 주소가 바뀐다.
- 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.
문자열과 불변성
- 원시 값을 저장 하려면 확보해야하는 메모리 공간의 크기를 결정해야함
- ECMAScript 사양
- 문자열 타입은 2바이트
- 숫자타입 8바이트
- 이외 원시 타입은 브라우저 제조사의 구현에 따라 다를 수 있음
- ECMAScript 사양
- 문자열은 0개의 이상의 문자로 이뤄진 집합을 의미하며, 몇개의 문자로 이뤄졌느냐에 따라 메모리 공간 크기 결정
var str1 = ''; // 0개의 문자로 이뤄진 문자열
var str2 = 'Hello' // 5개의 문자로 이뤄진 문자열
- 같은 이유에서 c에서는 char 만 있고 문자열 타입 없다. 문자열을 배열로 처리한다. 자바는 String 객체로 처리
- js 는 개발자 편의를 위해 원시 타입으로 제공
- js 의 문자열은 원시타입이며 변경 불가능 (생성된 이후 변경X)
- 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 문자에 접근 가능
var str = 'string';
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
변수 score, copy 값 80은 다른 메모리 공간에 저장된 별개의 값이다.
ECMASciprt 사양에는 변수를 통해 메모리를 어떻게 관리해야하는지 명확하게 정의되어 있지 않다.
값에 의한 전달이라고 ECMAScript 사양에서는 등장하지 않는다. 공유에 의한 전달이라고 표현하는 경우도 있다.
엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문이다. 이는 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.
var x = 10;
숫자 리터럴 10에 의해 생성된 숫자 값 10이 저장된 메모리 주소를 전달
var copy = score;
- 새로운 80을 생성(복사)해서 메모리 주소 전달, 할당 시점에 두 변수가 기억하는 메모리 주소가 다르다.
- score 80 의 메모리 주소 그대로 전달, 이 방식은 할당 시점에 기억하는 메모리 주소가 같고 값이 바뀔 때 다르다 ( 파이썬은 이 방식)
중요한 것은, 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.
객체
- 프로퍼티 개수가 정해져 있지 않다.
- 동적으로 추가 삭제할 수 있다.
- 프로퍼티 값에 제약이 없다.
⇒ 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다.
⇒ 객체는 복합적인 자료구조이므로, 구현 방식도 브라우저 제조사마다 다를 수 있다.
⇒ 원시 값과는 다른 방식으로 동작하도록 설계되어있다.
변경 가능한 값
- 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.
var person = {
name : 'Lee'
}
- 원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근한다. (변수는 O값을 갖는다.)
- 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다. (변수는 객체를 참조, 가리키고 있다. )
- person 변수는 객체 { name: ‘Lee’ } 를 참조하고 있다.
- 메모리를 효율적으로 사용하기 위해 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어있다.
- 여러 개의 식별자가 하나의 객체를 공유할 수 있다.
얕은 복사 깊은 복사
객체를 프로퍼티 값으로 갖는 객체의 얕은 복사는 한 단계까지만 복사하는 것을 말하고, 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.
const o = { x: {y:1} };
const c1 = { ...o };
console.log(c1 === o); // false
console.log(c1.x === o.x); // true
// lodash 의 cloneDeep을 사용한 깊은 복사
const _ = require('lodash');
const c2 = _.cloneDeep(o);
console.log(c1 === o); // false
console.log(c1.x === o.x); // false
- 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다.
- 원본과 복사본은 참조 값이 다른 별개의 객체다.
- 얕은 복사시에는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사하고 깊은 복사는 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만든다.
const v= 1;
const c1 = v; // 깊은 복사라고 부르기도 한다.
const o = {x:1};
const c2 = o; // 얕은 복사라고 부르기도 한다.
참조에 의한 전달
var person = {
name : 'Lee'
};
// 참조 값을 복사 (얕은 복사)
var copy = person;
- 두개의 식별자가 하나의 객체를 공유한다.
- 변경, 삭제, 추가 등 서로 영향을 주고 받는다.
- 결국 값에 의한 전달과 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달하는 면에서 동일하다.
- 다만 식별자가 기억하는 메모리 공간, 즉 변수에 저장되어 있는 값이 원시 값이냐 참조 값이냐 차이가 있을 뿐이다. 자바스크립트에서는 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다고 말할 수 있다.
- 이와 같은 동작 방식을 설명하는 정확한 용어가 존재하지 않음.
- 자바스크립트에는 포인터가 존재하지 않기때문에 참조에 의한 전달과 의미가 정확히 일치하지 않는다.
Leave a comment