Javascript Object

 자바스크립트를 다루고 코딩을 하다 보면, 객체를 다루는 게 얼마나 중요한가에 대해 알게 된다. 나 또한 처음엔 몰랐다. 요즘 들어 갈증이 생기고 예전에 겉핥기 식으로 했던 공부가 근본적인 실력 향상으로 이어지지 않다는 게 느낀다. 그래서 조금 더 자세히 공부해 보자. 우리가 다루는 자바스크립트의 대부분은 객체 타입이다. 당연히 객체를 잘 다뤄야지 자바스크립트를 잘 다룰 수 있을 것이다.

---

What is Object?

 나도 그랬지만, 가끔 Object에 대해 오해를 하고 있는 사람이 많은거 같다. object(객체)란, {key: value} 이런 식의 타입만을 의미하지 않는다.

원시 타입(primitive type)을 제외한 타입은 모두 Object 타입이며, Object를 상속 받고 있는 자식들이다. 따라서 6가지 원시 타입만 명확하게 알면 구분하기 편하다.

크롬 콘솔창에 간단히 테스트 해봐도 좋다.

---

ECMAScript 6 명세에서 설명하는 객체 카테고리

명세에는 객체 카테고리를 명확하게 정의하고 있으며 아래와 같은 용어를 사용한다.

• 일반 객체(ordinary objects) - 자바스크립트 객체의 모든 기본 내부 동작을 가진다.
• 이형 객체(exotic objects) - 기본과 다른 내부 동작을 가진다.
• 표준 객체(standard objects) - Array, Date 등이 있으며, 일반 객체 또는 이형 객체 일수 있다.
• 내장 객체(built-in objects) - 자바스크립트 실행 환경에 존재하며, 모든 표준 객체는 내장 객체이다.

https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf

혹시 잠이 안온다면 원문을 읽어보는걸 강력하게 추천한다. 개발자에게 수면제란 필요 없는 거 같다.

 혹시 객체에 대해 언급할 일이 있다면 위에 있는 개념을 통해 언급하겠다. 그리고 아래 글부터는 객체에 대한 문법들이다. 알고 있던 모르던 일단 한 번 더 정리해 보겠다.

---

객체 리터털 문법

좀 더 적은 코드로 객체를 생성할 수 있는 객체 리터털 문법은 분명 매력적이다. ECMAScript 6에서는 이러한 객체 리터럴 문법을 강력하고 간결하게 만들었다.

프로퍼티 초기자(Property initializer) 축약

원래 자바스크립트에서는 아래와 같이 객체 리터럴을 이름과 값의 묶음으로 생성했다.

function Person(name, age) {
  return {
    name: name,
    age: age
  };
}

 

 프로퍼티 초기자 축약 문법을 이용해서, 객체 프로퍼티 이름이 지역 변수 이름과 같으면 콜론(:)을 사용하지 않고 이름만 적어서 중복을 제거할 수 있다. 

function Person(name, age) {
  return {
    name,
    age
  };
}

  실제 할당은 자바스크립트 엔진이 대신 해준다. 객체에 이름만 있다면 주변 스코프에 같은 이름을 가진 변수를 찾고 찾았다면 할당하는 방식이다. 

 

축약된 메서드(Concise methods)

이번에는 메서드 할당을 위한 문법이 개선된 사례이다. 먼저 예전 코드를 보자.

const person = {
  name: "jacob",
  age: 28,
  greeting: function() {
    console.log(`Hi, ${name}!`);
  }
};

축약된  메서드를 사용하면 function 키워드와 콜론(:)을 생략할 수 있다.

const person = {
  name: "jacob",
  age: 28,
  greeting() {
    console.log(`Hi, ${name}!`);
  }
};

 

대괄호 표기법

 처음에 이 문법을 만났을 때 굉장히 헷갈렸던 기억이 있다. 분명 내가 봤던 쉬운 기본서에는 설명이 자세히 없던 거 같은데... 아무튼 이 문법은 객체 리터럴 안에 대괄호는 프로퍼티 이름을 계산한다는 것을 나타내며, 대괄호의 내용은 문자열로 평가된다.

const suffix = " name";

const person = {
  ["first" + suffix]: "Jacob",
  ["last" + suffix]: "Jung"
};

console.log(person["first name"]); // Jacob
console.log(person["last name"]); // Jung

 

Object.is(value1, value2)

두 인자를 받아서, 두 인자가 일치한다면 true, 아니면 false를 반환한다. 이 메서드는 자바스크립트 특성상 ===의 역할을 보충하기 위해 나왔다. 평소에는 ===를 사용하다가 아래와 같이 특별한 경우에 Object.is()를 사용하면 된다.

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

 

Object.assign(target, ...sources)

target 객체로 source 객체들이 순차적으로 할당된다. 만약 같은 프로퍼티가 존재한다면 나중에 값으로 덮어써진다.

(객체라면 얕은 복사(shallow copy)이고 그 객체의 참조값만 복사된다)

const empty = {};

const person1 = {
  name: "jac",
  age: 100
};

const person2 = {
  name: "jacob",
  age: 28
};

Object.assign(empty, person1, person2);
console.log(empty); // {name: "jacob", age: 28}

 

Object.entries(object)

object를 [key, value] 쌍의 배열을 반환한다.

const person = {
  name: "jac",
  age: 28
};

Object.entries(person); // [["name", "jac"], ["age", 28]]

만약 [key, value] 쌍의 배열을 객체로 바꾸고 싶다면 Object.fromEntries(target)을 사용하면 된다.