[JS] 원시 값과 객체의 비교

CheolHyeon Park·2021년 8월 23일
1

JavaScript

목록 보기
4/23

크게 primitive type과 object type으로 나뉜다. 둘은 3가지 측면에서 다르다.

  • 원시값은 immutable value이다. 객체값은 mutable value이다.
  • 원시 값을 변수에 할당하면 변수에는 실제 값이 저장되고 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.
  • 원시 값을 갖는 변수를 다른 변수에 할당하면 값이 복사되고 이를 값에 의한 전달 이라고 한다. 반면에 객체를 다른 변수에 할당하면 참조 값이 복사되어 전달된다.

11.1 원시 값

11.1.1 변경 불가능한 값

원시 값은 변경 불가능한 값이다. ⇒ 변수가 변경 불가능한게 아니라 값이 변경 불가능하다는 것이다.

변수는 언제든 다른 변수 값을 재할당(교체)하여 변경할 수 있다.

상수는 재할당할 수 없는 변수이다.

// const는 값의 재할당을 불가능하게 한다.
const o = {};
// const에 할당한 원시 값은 변경이 불가능하다.
// 하지만 const에 할당된 객체는 변경할 수 있다.
o.a = 1;
console.log(o);  // {a: 1};

원시 값의 재할당 과정

  1. 메모리에 새로운 주소 할당
  2. 재할당 받은 값 저장
  3. 재할당 받은 값의 주소를 변수가 참조

11.1.2 문자열과 불변성

문자열은 한 문자당 2바이트의 크기를 규정(ECMAScript 기준)하고 있다.

문자열도 원시타입이기에 값이 변하지 않는다.

var str1 = '';  // 0개로 이루어진 문자열(빈 문자열)
var str2 = 'Hello'; // 5개 문자로 이루어진 문자열
var str = 'Hello';
str = 'world';

문자열 Hello의 메모리를 할당하고 변수는 해당 메모리 셀의 첫번째 주소를 가르키게 된다.

⇒ 추가로 world의 메모리를 할당하고, 변수는 해당 메모리 셀의 주소를 world의 첫번째 주소로 변경한다.

즉, 문자열도 immutable하다.

  • 문자열은 유사배열이다.
var str = 'string';

console.log(str[0]);
console.log(str.length);
console.log(str.toUpperCase());

유사 배열이란?
마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.
for문으로 순회도 가능하다.

var str = 'string';

str[0] = 'S';

console.log(str);  // string

⇒ 문자열은 원시 값이기 때문에 변경할 수 없다. 즉 읽기만 가능하다.

11.1.3 값에 의한 전달

var score = 80;
var copy = score;  // 값에 의한 전달 => 원시 값을 복사하여 전달

console.log(score);  // 80
console.log(copy);  // 80

score = 100;

console.log(score);  // 100
console.log(copy);  // 80

⇒ 값에 의한 전달 예제

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

score와 copy 변수의 값은 서로 다른 메모리 공간에 저장되어 있는 값이다.

score에 있는 값을 변경하여도 어떠한 영향도 주지 않는다.

값에 의한 전달은 메모리 주소를 전달하여 그 메모리 주소에 값에 접근하는 것이다.

11.2 객체

객체는 동적으로 추가되고 삭제될 수 있는 프로퍼티를 가진다.
그렇기에 메모리 소비도 크다.

자바스크립트 객체의 관리 방식

  • 자바스크립트는 프로퍼티 키를 인덱스로 하는 해쉬 테이블이라고 생각할 수 있다.
  • 일반적인 클래스 기반 객체지향 프로그래밍 언어보다 프토퍼티 접근 비용이 크다 ⇒ 동적으로 객체를 생성하고 메소드를 추가할 수 있기 때문에
  • 그래서 비용이 많이 드는 동적 비용보다, 히든 클래스 방식을 사용해 C++객체의 프로퍼티 접근에 준하는 성능을 보장한다.

V8의 히든 클래스 이야기 - LINE ENGINEERING

11.2.1 변경 가능한 값

객체는 변경 가능한 값이다.

객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체다. ???

var person = {
	name: 'Lee'
}

person이라는 메모리 주소에 실제 객체인 {name: 'Lee'} 를 저장하고 있는 주소의 값을 참조하고 있다.

객체 값은 직접 재할당 없이 변경 가능하다. 즉, 재할당 없이 동적으로 프로퍼티를 추가하고 메소드를 추가할 수 있다.

ex)

var person = {
	name: 'Lee'
}

person.name = 'Kim';

person.address = 'Seoul';

11.2.2 참조에 의한 전달

참조에 의한 전달은 해당 객체를 저장하고 있는 메모리 주소를 복사한다.

그러므로 같은 객체를 가르키게 되어, 사이드 이펙트가 발생한다.

자바스크립트는 값에 의한 전달만 존재한다.

  • 원시 값을 복사하여 전달
  • 참조 값을 복사하여 전달

⇒ 결국 값을 전달

출처: 모던 자바스크립트 Deep Dive - 이웅모

profile
나무아래에 앉아, 코딩하는 개발자가 되고 싶은 박철현 블로그입니다.

0개의 댓글