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

원시 데이터 타입과 객체

[JavaScript] 데이터 타입에서 기본적으로 원시 데이터 타입(기본형)은 불변값, 객체(참조형)은 가변값이라고 했다.

보충하자면 원시 데이터 타입에는 자신을 변경할 수 있는 메소드를 포함해 어떠한 메소드도 붙어있지 않은데, 이러한 특성 때문에 불변성을 갖는다.

// 원시 데이터 타입
20 === 20; // true
'abc' === 'abc'; // true
 
// 객체
{} === {}; // false
(function() {}) === (function() {}) // false

위 예제로 알 수 있듯이, 원시 데이터 타입은 값으로 객체는 참조로 저장된다.

1급 객체

자바스크립트 함수는 아래와 같은 조건을 만족하기 때문에 1급 객체이다. 이 조건들은 자바스크립트의 객체가 가진 특성과도 같다.

다른 함수의 인자값으로 넘겨질 수 있다.
변수나 데이터에 할당 가능하다.
객체의 리턴 값으로 리턴 가능하다.

생성자 함수

리턴 값으로 생성하는 함수를 객체 그 자체로 반환하는 함수를 말하며 어떤 함수든 생성자 함수가 될 수 있다. 즉, 새로운 객체를 만들기 위해 사용된 함수를 생성자 함수라 한다.

const Test = function () {};
 
// new 키워드 사용: 생성자 함수
const test1 = new Test(); // 객체 리턴
 
// 키워드 사용 X: 일반적인 함수
Test(); // undefined

래퍼 오브젝트

원시 데이터 타입(String, Boolean, Number)을 new 키워드로 생성하면 원시 데이터 타입에 대한 래퍼 오브젝트^{wrapper object}가 생성된다.

// 1. new 키워드 X
// String(): 원시 문자열을 생성하는 전역 함수, 인자로 들어온 값을 문자열로 변환
String(undefined); // "undefined"
String(123); // "123"
String("123") === "123"; // true
 
// 2. new 키워드 O
// 생성자 함수로 쓰인 String()은 래퍼 오브젝트(Wrapper Object)라는 새로운 객체 생성
const msg = new String("hello");
msg === "hello"; // false (msg: object, "hello": string)
 
// 새로운 객체는 "hello"를 아래와 같이 나타냄
{
  0: "h",
  1: "e",
  2: "l",
  3: "l",
  4: "o",
  length: 5
}

오토박싱

위에서 원시 데이터 타입은 메소드를 가질 수 없다고 했다. 그러나 원시 문자열 타입에서 .constructor를 이용해 생성자 프로퍼티를 확인할 수 있다. 여기서 오토박싱이 일어난다. 아래 예제로 알아보자.

const fruit = 'banana';
 
fruit.length; // 6
fruit === 'banana'; // true

fruit의 length 프로퍼티에 접근하려 한다.
자바스크립트 엔진은 fruit을 임시 래퍼 오브젝트로 바꾼 후(오토박싱) 래퍼 오브젝트에 넣는다.
래퍼 오브젝트의 length 프로퍼티에 접근하여 값을 이용한 후 래퍼 오브젝트를 지운다.

이때, fruit 원시 데이터 타입 변수에는 전혀 영향이 가지 않는다.

따라서 아래 예제와 같이 원시 데이터 타입에 프로퍼티를 할당하려고 할 때 에러가 나지 않는다.

const fruit = 'banana';
 
// 잠시 원시 타입을 이용한 래퍼 오브젝트를 만든 후 할당
fruit.amount = 1500;
fruit.amount; // undefined

정리

원시 데이터 타입
- 불변값
- 메소드 X
- 값으로 저장
객체
- 가변값
- 메소드 O
- 참조로 저장
1급 객체 조건 (객체가 가진 특성)
- 다른 함수의 인자값으로 넘겨질 수 있다.
- 변수나 데이터에 할당 가능하다.
- 객체의 리턴 값으로 리턴 가능하다.
생성자 함수
- 함수를 새로운 객체를 만들기 위해 사용
- new 키워드 사용
래퍼 오브젝트
- String, Boolean, Number는 원시 데이터 타입이면서 객체 (래퍼 오브젝트를 가짐)
- new 키워드 사용
오토박싱
- 특정한 원시타입을 임시 래퍼 오브젝트로 바꾼 뒤 프로퍼티나 메소드에 접근하려 함 (원본 영향 X)
- 오토박싱 때문에 특정 원시 데이터 타입들(String, Boolean, Number)은 객체처럼 동작