객체.md

객체

Create Date: 2022/12/30
Update Date: 2022/12/30

노션에서 확인하기

객체는 자바스크립트의 가장 기본적인 데이터 타입이며 저희는 이미 살펴본 적이 있습니다.
객체는 자바스크립트에서 굉장히 중요한 부분이므로 객체가 어떻게 동작하는지 자세히 이해해봅시다!

객체란?

객체는 복합된 값입니다. 객체는 여러 가지 값(기본 값이나 다른 객체)을 모아서 이름을 통해 값을 저장하고 가져올 수 있게 합니다.

const obj = {
  hello: 'world',
  name: 'secret',
};

obj.map;

객체는 단순히 문자열과 값만 연결한 것이 아닙니다. 자바스크립트 객체는 자신만의 프로퍼티를 가지는 것 외에도 프로토타입이라고 불리는 다른 객체에서 프로퍼티를 상속하기도 합니다.

이 프로토타입 상속이 자바스크립트의 중요한 기능입니다.

객체 생성

객체 리터럴

위에 예시를 들었던 코드가 바로 객체 리터럴을 사용하여 객체를 생성한 코드입니다. 다시 한 번 가져올까요?

const obj = {
  hello: 'world',
  name: 'secret',
  test: 'test',
};

콜론으로 구분한 이름: 값 형식으로 되어져 있는 것을 확인할 수 있습니다.

객체 리터럴의 마지막 프로퍼티 뒤에 콤마를 쓸 수 있습니다. 이렇게 마지막에 콤마를 남겨둔다면 객체의 프로퍼티를 추가할 때 문법 에러를 초래할 가능성이 줄어들기에 이런 스타일을 권장하는 사람도 있습니다.

new

const o = new Object();
const a = new Array();

new 연산자는 새 객체를 생성하고 초기화합니다. new 키워드 뒤에는 반드시 함수 호출이 있어야 합니다. 이런 형태로 사용하는 함수를 생성자라고 부르고 새로 생성된 객체를 초기화하는 목적으로 사용합니다.

Object.create()

해당 부분을 읽기 전에 프로토타입을 먼저 읽고 오시는 것을 추천합니다!!

첫 번째 인자를 프로토타입 삼아 새 객체를 생성하는 방법입니다. 임의의 프로토타입을 사용하여 새 객체를 만들 수 있는 것은 강력한 기능입니다.

const o = Object.create({ x: 1, y: 2 }); // => Object.prototype
const a = Object.create(Array.prototype); // => Array.prototype / Object.prototype

const d = Object.create(Date.prototype); // ??

• d에는 어떤 프로토타입이 있을까요? Date.prototype / Object.prototype

TMI

단축 프로퍼티

ES6 이후에는 같은 변수명 일 시 콜론을 생략한 훨씬 간결한 문법을 사용할 수 있습니다.

let x = 1,
  y = 2;
const o = {
  x: x,
  y: y,
};

//위의 코드는 아래와 같이 수정이 가능합니다.
const o = {
  x,
  y,
};

분해 연산자

ES2018 이후에는 객체 리터럴 안에서 분해 연산자 …를 사용해 기존 객체의 프로퍼티를 새 객체에 복사할 수 있습니다.

const position = { x: 0, y: 0 };
const dimensions = { width: 100, height: 75 };

const rect = {...position, ...dimensions };

for(n) {
	const rect = {...position, ...dimensions }; // 2 * 2 * n
}

저희에겐 그저 점 3개일 수 있겠지만 자바스크립트 인터프리터가 상당히 많은 일을 하게 될 수도 있습니다.

객체에 프로퍼티가 n개 있다면 이 프로퍼티를 다른 객체로 분해하는 작업은 $O(n)$ 작업일 겁니다.

…를 루프나 재귀 함수에 넣어 데이터를 큰 객체 하나에 누산한다면 어떻게 될까요? $n$이 커질수록 비효율적인 $O(p^2)$ 알고리즘을 쓰게 됩니다.

참고 자료

• 자바스크립트 완벽가이드
• https://evan-moon.github.io/2019/10/23/js-prototype
• https://ko.javascript.info/native-prototypes
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create