11. 원시 값과 객체의 비교
원시 타입
- 변경 불가능한 값
- 메모리에 실제 값이 저장
- 다른 변수에 할당하면 원시 값이 복사되어 전달 (Pass By Value)
객체 타입
- 변경 가능한 값
- 메모리에 참조 값이 저장
- 다른 변수에 할당하면 참조 값이 복사되어 전달 (Pass By Reference)
11.1 원시 값
한번 생성된 원시 값은 읽기 전용(read only) 값으로서 변경이 불가능하다.
이게 무슨 말인지 이해하기 위해선 변수 & 값을 구분해서 생각해야 한다.
변수
메모리 공간을 식별하기 위해 붙인 이름
값
변수에 저장된 데이터로 메모리에 저장된 값
위에서 "원시 값은 변경 불가능하다"라는 말은 원시 값 자체를 변경할 수 없다는 의미이다.
변수에 할당된 값 자체는 바꿀 수 있다.
재할당을 통해 변수에 할당된 원시 값을 다른 값으로 교체한다고 생각하면 된다.
상수와 변경 불가능한 값은 다르다
상수는 재할당이 불가능한 "변수"이다.
즉, 단 한번만 할당이 허용되므로 값의 교체가 금지된 변수일 뿐
// const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다.
const o = {};
// const 키워드를 사용해 선언한 변수에 할당한 원시값(상수)은 변경할 수 없다.
// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
o.a = 1;
console.log(o); // {a: 1}변수에 새로운 원시 값을 할당할 때 일어나는 일
- 재할당할 새로운 원시 값 메모리에 생성
- 변수가 새로운 원시 값을 가리키게 설정
=> 원시 값의 이러한 특성을 "불변성"이라고 한다.
11.1.2 문자열과 불변성
원시 값은 원시 타입별로 메모리 공간의 크기가 미리 정해져있다.
문자열 타입은 2Byte(1문자당)
숫자 타입은 8Byte
숫자 타입은 1도, 100000도 동일한 8Byte 필요한 반면, 문자열의 경우 1개 문자는 2Byte 10개 문자는 20Byte가 필요하다.
// 문자열은 0개 이상의 문자들로 이뤄진 집합이다.
var str1 = ''; // 0개의 문자로 이뤄진 문자열(빈 문자열)
var str2 = 'Hello'; // 5개의 문자로 이뤄진 문자열C에선 문자를 위한 데이터 타입 Char만 존재 (문자열 타입 존재 X)
Java에선 문자열을 위한 데이터 타입 String 객체 존재
자바스크립트에선 문자열을 위한 원시 타입이 존재. 따라서 이는 변경이 불가능하다.
var str = 'Hello';
str = 'world';str 식별자엔 'Hello'의 첫번째 메모리 셀 주소값을 가짐.
이때 'world'라는 새로운 문자열을 할당하게 되면, JS엔진은 'world' 원시 값을 위한 메모리 공간을 만들고 str 식별자는 이 메모리 셀의 첫번째 주소 값을 가지게 됨.
즉 'Hello' , 'world' 모두 메모리에 존재하게 된다.
var str = 'string';
// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
console.log(str[0]); // s
// 원시 값인 문자열이 객체처럼 동작한다.
console.log(str.length); // 6
console.log(str.toUpperCase()); // STRINGstr[0] = 'S'처럼 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않음.
문자열은 변경 불가능한 원시값이기 때문!!
var score = 80;
var copy = score;
console.log(score); // 80
console.log(copy); // 80JS엔진 동작 과정
- 원시 값 80을 복사하여 새로운 원시 값 새엇ㅇ
- 해당 값을 copy에 할당
- score & copy는 같은 80 값을 갖게되지만 이는 다른 원시값
이처럼 변수에 원시 값을 갖는 변수를 할당하면, 할당 받는 변수에게 원시 값이 복사되어 전달된다.
이를 값에 의한 전달 "Pass By Value" 라고 한다.
이때 복사되어 전달된 원시 값은 같은 값을 나타내기 하지만 별도의 메모리 공간에 저장된 별개의 값임을 명심해라.
따라서 score나 copy 값을 변경해도 서로에게 아무런 영향을 주지 못한다.
var score = 80;
// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
var copy = score;
console.log(score, copy); // 80 80
console.log(score === copy); // true
// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
score = 100;
console.log(score, copy); // 100 80
console.log(score === copy); // false 사실 "Pass By Value"는 자바스크립트를 위한 용어가 아니므로 오해가 있다.
엄밀히 표현하면 변수에 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문에 이는 자바스크립트에선 잘못된 표현이라고 할 수 있다.
11.2 객체
객체는 프로퍼티를 동적으로 추가하거나 삭제할 수 있다. 또한 프로퍼티 값에 제약이 없다.
따라서 객체는 원시 값과 같이 필요한 메모리 공간을 사전에 정할 수 없음.
자바스크립트과 타언어의 객체 관리 방식의 차이
C++ & Java와 같이 클래스 기반 객체지향 프로그래밍 언어는 미리 사전에 클래스의 규격을 정의함. 그리고 이 정의된 클래스를 기반으로 객체를 생성.
따라서 사전에 이미 프로퍼티와 메서드가 정해져 있다.
반면에 자바스크립트는 동적으로 프로퍼티와 메서드를 추가하기 때문에 사용하기는 매우 편리하지만 성능 면에서는 이론적으로 타언어에 비해 비용이 많이 든다는 단점이 존재한다.
크롬 V8 JS Engine에선 Hidden Class 방식을 통해 이 성능 문제를 개선함.
11.2.1 변경 가능한 값
원시 값을 할당한 변수를 참조하면 원시 값에 접근한다. 하지만 객체를 할당한 변수를 참조하면 참조 값에 접근한다.
원시 값은 변경 불가능한 값이므로 변경하려면 재할당 외에는 방법이 없다.
하지만 객체는 변경 가능한 값이다. 따라서 객체를 할당한 변수는 재할당 없이 객체를 직접 경경할 수 있다.
var person = {
name: 'Lee'
};
// 프로퍼티 값 갱신
person.name = 'Kim';
// 프로퍼티 동적 생성
person.address = 'Seoul';
console.log(person); // {name: "Kim", address: "Seoul"}실제 동작 과정 속에서 person 객체를 참조하면 객체를 가리키고 있는 참조 값을 참조하게 된다.
이 참조 값을 통해 객체에 접근하여 이 객체의 프로퍼티와 메서드를 직접 수정한다.
재할당을 하지 않고 직접 수정가능!!!
앞에서 언급했듯이 객체를 생산하고 관리하는 방식은 매우 비용이 많이 든다.
따라서 객체를 변경할 때마다 원시 값처럼 새롭게 생성하면 "불변성" & "신뢰성"은 확보되겠지만 이는 메모리의 효율적인 사용을 어렵게 한다.
따라서 메모리의 효율적인사용을 위해 객체는 변경이 가능하도록 설계되어있다.
이는 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 뜻이다.
얕은 복사 VS 깊은 복사
const o = { x: { y: 1 } };
// 얕은 복사
const c1 = { ...o }; // 35장 "스프레드 문법" 참고
console.log(c1 === o); // false
console.log(c1.x === o.x); // true
// lodash의 cloneDeep을 사용한 깊은 복사
// "npm install lodash"로 lodash를 설치한 후, Node.js 환경에서 실행
const _ = require('lodash');
// 깊은 복사
const c2 = _.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x); // false얕은 복사와 깊은 복사로 생성된 객체는 원본과 다른 객체이다!
얕은 복사는 복사한 객체 안에 있는 중첩된 객체인 경우는 참조 값만 복사한다.
반면 깊은 복사는 중첩된 객체도 모두 복사해 원시 값처럼 완전히 새로운 복사본을 만든다는 차이가 있다.
11.2.2 참조에 의한 전달
여러 개의 식별자가 하나의 객체를 공유하는 경우
var person = {
name: 'Lee'
};
// 참조값을 복사(얕은 복사)
var copy = person;copy에 다른 주소 값이 할당이 되긴 함. 그러나 이를 통해 나오는 참조 값은 똑같다!
이를 "참조에 의한 전달(Pass by Reference)" 이라고 한다.
저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는 것을 "두 개의 식별자가 하나의 객체를 공유" 한다고 한다.
따라서 한 쪽의 객체를 수정하면 다른 쪽도 영향을 받게 된다.\
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"}결국 "Pass By Value" 나 "Pass By Reference" 둘 다 식별자가 가리키는 메모리 값을 복사해서 전달한다는 면에서 동일하다.
그러나 전달하는 값이 원시 값이냐 참조 값이냐의 차이만 있을 뿐이다.
그래서 어떻게 보면 자바스크립트에선 "Pass By Reference" 존재하지 않고 "Pass By Value"만 존재하다고 말할 수 있다.
사실 자바스크립트의 이와 같은 동작 방식을 설명하는 정확한 용어가 존재하지 않는다.
Pass By Value나 Pass By Reference 둘 다 미묘하게 동작 방식이 다르므로 자바스크립트에선 "Pass By Sharing" 용어를 쓴다.
