자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type

📌  원시 타입? 객체 타입?

 

자바스크립트가 제공하는 7가지 데이터 타입들을 크게

원시 타입primitive type과 객체 타입object/reference type으로 구분할 수 있다.

 

 

📌  원시 타입과 객체 타입 특징

 

💡 원시 타입 primitive type 특징

 

 01  원시 값은 "변경 불가능"한 값이다.  -->  immutable value  -->  데이터의 신뢰성을 보장한다.

 02  원시 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 실제 값이 저장된다.

 

 

원시 값이 변하지 않는 건 사실이지만, 변수에 저장된 원시 값은 재할당을 통해 새로운 값을 줄 수 있다.

그러나 이 경우도 원래 변수에 할당된 원시 값을 새로운 값으로 교체하는 것이 아니라,

변수가 참조하던 메모리 공간의 주소를 변경해 새롭게 할당된 값을 저장하는 방식으로 동작한다.

-->  이러한 특성을 '불변성'immutability라 한다.

-->  원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법은 없다.

 

const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다.

const o = {};

// const 키워드를 사용해 선언한 변수에 할당한 원시 값은 변경할 수 없다.
// 하지만 !! const 키워드를 사용해 선언한 변수에 참조 값(ex.객체)은 변경할 수 있다.

o.a = 1;
console.log(o);  // {a: 1}

 

 

📍  자바스크립트의 문자열 특징

 

문자열은 0개 이상의 '문자'로 이뤄진 집합을 말한다.

1개의 문자는 2바이트 메모리 공간에 저장되기 때문에,

몇 개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정된다.

이 같은 이유로 C에는 하나의 문자를 위한 데이터 타입 ( char ) 만 있을 뿐 문자열 타입은 존재하지 않는다.

C에서는 문자열은 문자의 배열로 처리하고, 자바에서는 문자열을 String 객체로 처리한다.

 

자바스크립트는 개발자의 편의를 위해 문자열 타입을 원시 타입으로 제공한다.

자바스크립트의 문자열은 유사 배열 객체이면서 이터러블이다.

 

// 유사 배열 객체 
// --> 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
// --> length 프로퍼티를 갖는다.

var str = 'string'

// 문자열은 유사 배열이므로, 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.

console.log(str[0]);  // s

// 문자열은 원시 값인데, 객체처럼 동작한다.

console.log(str.length);  // 6
console.log(str.toUpperCase());  // STRING

 

 

 

💡 객체 타입 object/reference type 특징

 

 01  객체(참조) 타입의 값은 "변경 가능"한 값이다.  -->  mutable value

 02  객체(참조) 타입의 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 참조 값이 저장된다.

 

 

객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있다.

즉, 재할당없이 프로퍼티를 동적으로 추가할 수도 있고, 프로퍼티 값을 갱신할 수도 있으며, 프로퍼티 자체를 삭제할 수도 있다.

 

// 할당이 이뤄지는 시점에 객체 리터럴이 해석되고, 그 결과 객체가 생성된다.

var person = {
  name: 'Lee'
};

// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.

console.log(person);  // {name: "Lee"}

 

객체를 변경할 때마다 원시 값처럼 이전 값을 복사해서 새롭게 생성한다면, 명확하고 신뢰성이 확보되겠지만

객체는 크기가 매우 클 수도있고, 원시 값처럼 크기가 일정하지도 않으며, 프로퍼티 값이 객체일 수도 있어서

복사해서 생성하는 비용이 많이 든다. 다시 말해, 메모리의 효율적 소비가 어렵고 성능이 나빠진다.

 

따라서 메모리를 효율적으로 사용하기 위해,

객체를 복사하고 생성하는 비용을 절약하여 성능을 향상시키기 위해,

객체는 변경 가능한 값으로 설계되어 있다.

메모리의 사용의 효율성과 성능을 위해 구조적인 단점을 감안한 설계라고 할 수 있다.

 

객체는 이러한 구조적 단점에 따른 부작용이 (당연히) 있다.

원시 값과 다르게, 여러 개의 식별자가 하나의 객체를 공유(참조 값 공유)할 수 있다는 것이다.

 

const person = {
  name: 'Lee'
};

// 참조 값(주소 값)을 복사
const copy = person;
console.log(copy === person)  // true

 

원본 person과 사본 copy는 저장된 메모리 주소는 다르지만, 동일한 참조 값을 갖는다.

다시 말해 원본 person과 사본 copy 모두 동일한 객체를 가리킨다.  -->  2개의 식별자가 하나의 객체를 공유한다.

따라서 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.

 

 

📍  얕은 복사 vs 깊은 복사

 

// 객체를 프로퍼티 값으로 갖는 객체의 경우
const o = {x:{y:1}};

// 얕은 복사 : 한 단계까지만 복사 (중첩된 객체는 참조 값을 복사)
const c1 = {...o};
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

 

 

📌  (필수) 참고 자료

 

2022.02.15 - [Front-end/JS] - 자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식)

자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식)