#2 자바스크립트의 원시타입

https://www.notion.so/simsimjae/2-3999b2a7ca8b4083960986c771376db0

#2 자바스크립트의 원시타입

기초잡기

자바스크립트는 객체 또는 원시타입 두가지 자료형만 존재한다.

• string
• number
• undefined
• null
• bool
• symbol(ES6에서 도입)

위 6개를 제외한 나머지는 모두 객체이다.

원시타입

원시타입은 변하지 않는다. → 한번 값을 넣으면 수정할 수 없다.

원시타입들은 값 그자체로 저장되지만 객체타입은 참조형태로 변수에 저장된다.

14 === 14 // true , 값이 같기 때문
[] === [] // false
{} === [] // false , 참조값이 다르기 때문

함수는 1급 객체이다.

1. 인자로 넘겨질 수 있다.
2. 변수나 배열에 할당 가능하다.
3. 리턴값으로도 넘겨질 수 있다.

함수를 생성자로 쓰고 싶을때는 무조건 new 키워드를 붙여서 사용해야 한다.

그렇지 않으면, 그냥 일반 함수 호출로 실행되고 함수 내부에서 this가 현재 컨텍스트를 가리키기 때문에 글로벌 컨텍스트인 window객체의 프로퍼티가 초기화 되어 버린다.

new키워드를 붙여서 함수를 생성자로 호출하게 되면 this가 현재 컨텍스트인 새로 생성된 객체에 맵핑 되기 때문에 정상 동작한다.

Wrapper Object(래퍼 객체)

String()는 인자를 문자열로 바꿔주는 함수이다.

String(1337); // "1337"
String(null); // "null"
String(true); // "true"

이 함수에 new키워드를 붙여서 사용하게 되면 생성자로 동작하는데,
new String("dog");와 같이 실행 시키면

{
    0: "d",
    1: "o",
    2: "g",
    length : 3
}

이와 같이 문자열을 포장하는 객체를 만들어서 리턴해준다.

오토박싱(Auto-Boxing) - 1

const pet = new String("dog");
pet.constructor === String; // true
String("dog").constructor === String; // true

한줄씩 살펴보자.

const pet = new String("dog");

1. String함수를 생성자로 호출했고 "dog"을 인자로 전달했다.

2. String 래퍼 객체가 생성되었다.

3. 이 객체는 [[prototype]] 링크로 String() 함수의 프로토타입 객체를 가리킨다.

4. pet이라는 참조변수는 이 객체를 가리키고있다.

   pet.constructor === String; // true

5. pet에는 constructor 속성이 없다.

6. 프로토타입 체이닝이 일어나서 프로토타입의 constructor가 가리키는걸 확인해보니 String()함수이다.

7. 그렇기 때문에 true가 나온것이다.

여기까지는 지금까지 알고 있는 지식으로 아무런 문제가 없다.

String("dog").constructor === String; // true

1. String("dog")이 실행되면 "dog" 이라는 원시타입 문자열이 리턴된다.
2. "dog".constructor === String 문장이 실행되는데, 여기서 어떻게 원시타입이 constructor라는 속성을 갖는가?가 의문이다.
3. JS 인터프리터가 이 원시타입을 래퍼객체로 자동으로 감싸주기 때문에 이런일이 가능한것이다.
4. 래퍼객체로 변환된 "dog"는 위와 같은 과정이 일어나고 마찬가지로 true가 리턴된다.
5. 래퍼 객체를 모두 사용하고 난 뒤 이 래퍼객체를 지워버린다.

이 세번째 줄에서 원시타입을 래퍼객체로 자동으로 변환해주는 과정을 오토박싱이라고 한다.

오토박싱 - 2

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

여기서 두번째 줄을 살펴보자.

foo.length; // 3

1. foo는 원시타입이다. 그런데 length라는 프로퍼티에 접근하고 있는데도 오류가 안난다.
2. JS가 foo를 감싸는 래퍼객체를 만들고나서 length 프로퍼티를 사용한다.
3. 다 사용하고 나서 2번째 줄이 끝나게 되면 래퍼객체를 지운다.
4. 에러 없이 잘 동작한다.

오토박싱 - 3

const foo = 42;
foo.bar = "baz"; // Assignment done on temporary wrapper object
foo.bar; // undefined

래퍼객체에 프로퍼티를 할당했는데 이 프로퍼티는 두번째줄이 지나게 되면 쓸모 없는 프로퍼티가 되어버린다. 그래서 세번째줄에서 undefined가 출력된것이다.

undefined나 null는 따로 래퍼객체가 없기 떄문에 주의해야 한다.

String, Number, Boolean에 대해서는 오토박싱이 동작한다.