[자바스크립트 개발자라면 알아야 할 33가지 개념] #2 자바스크립트의 원시 타입 (번역)

자바스크립트의 타입

• 원시 타입
  • Booleans true or false
  • null
  • undefined
  • number
  • string
  • symbol (ES6에서 처음 생긴 원시타입입니다.)
• Object
  • 함수
  • 배열

원시 타입

• 어떠한 메소드도 없습니다.
  => 원시타입은 변하지 않는 속성을 갖습니다. (변경할 수 있는 메소드가 없으니까)
• 값 그 자체로 저장되어 있습니다.
  • 원시 타입은 값(value)으로 저장
  • 객체들은 참조(reference)로 저장

함수

• 함수는 특별한 프로퍼티들을 가진 새로운 형태의 객체입니다.

  const foo = function (baz) {};
  foo.name; // "foo"
  foo.length; // 1

• 새로운 프로퍼티를 추가하는 것도 가능합니다.

  foo.bar = "baz";
  foo.bar // "baz"

• 함수의 이러한 특성은 함수를 1급 객체로 만듭니다.

  1급 객체의 조건

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

메소드

• 메소드는 함수와 같이 객체의 프로퍼티입니다.

  const foo = {};
  foo.bar = function () { console.log("baz"); };
  foo.bar();

생성자 함수 (new)

• 자바스크립트에서 생성자 함수란 리턴값으로 생성하는 함수를 객체 그 자체로서 반환하는 함수입니다.

  • Object에 새로운 프로퍼티들을 할당하기 위해 this를 함수의 몸통 안에서 사용할 수 있습니다. => 캡슐화 가능

    const Foo = function () {
      this.bar = "baz";
    };
  
    const qux = new Foo()
    qux; // { bar: "baz" }
    qux instanceof Foo; // true
    qux instanceof Object; // true

• 같은 코드를 공유하는 여러가지 객체들을 갖고 싶다면, 생성자 함수를 삽입하는 것은 매우 좋은 선택입니다.

래퍼 오브젝트 (Wrapper Object, 포장 오브젝트)

• String, Number, Boolean, Function와 같은 원시타입을 new 키워드로 생성하면 원시타입에 대한 래퍼 오브젝트가 생성됩니다.

  new String("dog") === "dog"; // false
  
  {
    0: "d",
    1: "o",
    2: "g",
    length: 3
  }

오토박싱

• 특정한 원시타입에서 프로퍼티나 메소드를 호출하려 할 때, 자바스크립트는 처음으로 이것을 임시 래퍼 오브젝트로 바꾼 뒤에 프로퍼티나 메소드에 접근합니다.

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

  • 문자열이 length라는 프로퍼티에 접근하기 위해 자바스크립트는 foo를 오토박싱하고 이것을 래퍼오브젝트에 넣습니다.
  • 그리고 래퍼 오브젝트의 length 프로퍼티에 접근하고 값을 이용한 뒤에는 지워버립니다.
  • 이 모든 과정은 foo라는 원시타입 변수에 전혀 영향을 미치지 않습니다. foo는 여전히 그저 원시 타입 문자열일 뿐입니다.