[11. 원시 값과 객체의 비교] 모던 자바스크립트 Deep Dive 정리

자몽·2021년 11월 11일

JavaScript

목록 보기

18/25

11. 원시 값과 객체의 비교

데이터 타입

데이터 타입은 크게 원시 타입과 객체 타입으로 나누어진다.

원시 타입:

종류(6개): 숫자,문자열,불리언, undefined, null, 심벌
특징:

변경 불가능한 값
원시 값을 변수에 할당한 경우, 변수에는 실제 값이 할당된다.
따라서 이러한 원시 값을 가지는 변수를 다른 변수에 할당한다면, 원본의 원시 값이 새로운 주소에 복사되어 전달된다.(값에 의한 전달)

요약:

원시 값 자체는 변경 불가능하기 떄문에, 변수에 할당하고 이를 복사해도 해당 값의 주소가 복사되지 않고, 새로운 주소에 원시 값이 할당되어 전달됨.

객체 타입:

종류(1개): 객체
특징:

변경 가능한 값
객체는 프로퍼티 개수가 정해져있지 않으며, '동적'으로 추가 및 삭제 가능하다.
객체는 프로퍼티 키를 index로 사용하는 해시 테이블이다.

요약:

객체는 해시 테이블이기 때문에, 참조 값을 통해 실제 객체에 접근할 수 있다.

원시 값

기본 개념 정리

위에서도 설명했지만, 원시 값은 변경 불가능하다.

살짝 햇갈릴수도 있는 부분은, 변수에 원시 값이 할당되면, 변수라는 의미가 퇴색되는 것이 아닌가? 라는 부분이다.

이는 개념을 잘못 접근해서 그런데, 변수가 변경 불가능하다는 것이 아닌, 값 자체가 변경 불가능하다는 뜻이다.

따라서, 변수는 재할당을 통해 다른 주소에 새로운 값을 할당해 불러올 수 있다.

문자열과 원시 값

문자열은 원시 타입에 속해있다.
그런데 여기서 문제는 문자열은 문자열의 길이에 따라 메모리 공간의 크기도 달라진다는 점이다.

JavaScript는 이를 해결하기 위해, 문자열이 저장된 메모리 공간의 첫 번째 메모리 셀 주소를 기준으로 문자열을 다룬다.

문자열도 다른 원시 타입과 마찬가지로, 문자열이 조금이라도 변경되면 새로운 메모리 공간에 변경된 문자열을 저장시킨다.

Q. 기존 문자열이 속해있던 공간은, 새로운 문자열로 변경되었을 때 어떻게 될까?

A. 더 이상 참조되지 않는 기존 값은 '가비지컬렉터'에 의해 메모리에서 삭제된다.

가비지 컬렉터: 자바스크립트에서는 더 이상 참조되지 않는 값들은 가비지 컬렉터의 의해 적절한 시점에 메모리에서 자동 해제된다.

이러한 가비지 컬렉터의 장, 단점은 다음과 같다.
.
장점: 개발자가 수동적으로 메모리를 삭제하지 않아도 된다.
단점: 적절한 시점은 자바스크립트 마음대로 정해지며, 수동적으로 메모리를 해제할 수 없다.(장점이지만 단점도 됨)

객체

기본 개념 정리

객체는 프로퍼티의 개수가 정해져있지 않다.
이 말은, 프로퍼티를 동적으로 추가, 삭제, 변경이 가능하다는 뜻이다.

또한, 객체는 변경 가능한 값이라는 특징을 가지고 있기 때문에,
기존의 원시값처럼 재할당을 하지 않고도 객체를 직접 변경 가능하다.

=> 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근할 수 있다.

하지만, 이러한 구조는 부작용도 가지고 있다. 참조 값을 통해 접근하다보니, 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 점이다.

const person = {
  name: 'oseung'
}

const person1 = person; // person 객체 복사
console.log(person1.name) // 'oseung'

person.name = 'jamong'; // person.name을 'jamong'으로 업데이트

// person.name이 변경되면, pserson1.name도 변경됨.
console.log(person1.name) // 'jamong'