기본 객체

Object

Object() 생성자를 통해 만들 수 있으며, const obj = {}와 같이 '객체 리터럴'을 통해 생성할 수도 있다.

리터럴과 덕 타이핑

객체 리터럴에서는 키: 값의 쌍으로 구성된 프로퍼티가 들어간다. Key는 변수명을 선언할 때와 동일한 규칙을 따르며, 예외를 적용하고 싶은 경우 "1st User"와 같이 따옴표로 감싸 문자열을 Key로 넘겨주면 된다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30,        // 키: "age", 값: 30 //마지막 프로퍼티 끝에 trailing comma가 들어올 수 있다.
};

자바스크립트의 객체에 적절한 프로퍼티와 메서드를 추가하여 원하는 자료형을 구성할 수 있다. 이를 덕 타이핑이라고 한다. const obj = {length: 5}는 유효한 length 프로퍼티를 갖기에 유사 배열 객체라 할 수 있다. 이러한 덕 타이핑은 알고리즘 문제 풀이(순회, 연결 리스트 등)나 타입 스크립트에서도 유용하게 쓰일 수 있다.

기본 사용법

프로퍼티에 접근

user.name 와 같은 방식으로 접근할 수 있다. 단, 키가 유요한 변수 식별자가 아닌 경우 user["1st User"], user[name]과 같이 대괄호 표기법(square bracket notation)으로 접근할 수 있다.

프로퍼티의 삭제

delete user.age;와 같이 delete 키워드를 통해 삭제할 수 있다.

프로퍼티의 수정

user.name = "Pete";

객체의 복사와 병합

참조에 의한 복사

객체는 원시 자료형과 다르게 참조에 의해 복사된다.

const a = {}
const b = a
console.log( a === b ) // true

전개 구문과 구조 분해 할당

전개 구문(spread)를 순회 가능한 객체의 0개 이상의 인수를 호출할 수 있다.

구조분해 할당을 통해 객체 내부의 개별 변수 복사할 수 있다. 구조분해할당은 변수를 선언하거나 인자를 넘길 때에도 사용이 가능하다.

이 둘을 이용하여 Deep Copy를 하게 된다. 단 이때의 Depth가 1임에 유의하자. Depth가 2 이상인 경우 Object.assign()과 동일하게 얕은 복사가 된다.

const a = { name: "jonh" }
const b = a
console.log( a === b ) // false

const a = { name: "jonh" }
const { name } = a
console.log(name) // jonh

const list = [ 1, 2, 3, 4, 5]
const [b, c, ...rest] = list
console.log(b) // 1
console.log(c) // 2
console.log(rest) // 3, 4, 5

재귀적으로 딥카피를 하기 위해서는 값의 타입을 판별하고, 재귀적으로 호출하거나, 혹은 JSON.stringify()를 이용한다.
성능상으로는 lodash 라이브러리의 _.cloneDeep() 함수를 사용하는 것이 빠르다.

인스턴스 메서드

Object.prototype.constructor : new Array 와 같은 방식으로 자신의 프로토타입을 상속하는 새로운 인스턴스를 만들 수 있다. 만들어진 인스턴스는 constructor프로퍼티에 자신의 생성자 정보를 저장하며 arr.constructor === Array와 같은 방식으로 조회 및 비교하게 된다.
Object.prototype.__proto__ : 추천하지 않음 자신의 프로토타입에 접근할 수 있다. Object.getPrototypeOf()나 Object.setPrototypeOf()와 같은 getter, setter를 사용하는 것을 추천한다.

정적 메서드

Object.assign(목표 객체, ...반영할 객체) : 목표 객체에 반영할 객체의 내용을 붙여넣어 반환한다. 기존 목표 객체를 수정한다.
Object.create(proto[, propertiesObject]) : 특정 프로토타입을 상속받아 객체를 만든다. const obj = new Object, const obj = {}, const obj = Object.create(Object.prototype) 이 셋은 똑같이 작동한다. 두번째 인자로 열거 가능한 객체를 넣어 새로운 객체에 프로퍼티 혹은 메서드로 삽입할 수 있다.
Object.defineProperties(obj, props) : 기존 객체에 열거 가능한 객체로 프로퍼티를 정의한다.
Object.entries(obj) : 객체를 순회하며 [키, 값]을 반환한다. 이때 반환되는 순서는 정의된 순서와 무관함에 유의한다.
Object.fromEntries(iterable) : [[키, 값], [키, 값]]과 같이 순회 가능한 객체에서 Object를 만든다.
Object.keys(obj) : 객체 프로퍼티들의 모든 키를 반환한다.
Object.values(obj) : 객체 프로퍼티들의 모든 값을 반환한다.

객체 지향 프로그래밍

자바스크립트는 Prototype를 자식 객체에 통째로 상속하는 방식의 강력한 객체지향 프로그래밍을 지원한다. 또한 각각의 프로퍼티 역시 객체이며, '설명자'를 갖는다. getter, setter 함수를 객체에 삽입하여 객체에 접근 혹은 수정할 때에 실행할 함수를 설정할 수 있다.

객체 지향 프로그래밍에 사용하는 메서드

Object.defineProperty(obj, prop, descriptor) : 기존 객체에 열거 가능한 객체로 프로퍼티를 정의한다. 이때 두번째 식별자는 프로퍼티의 명이며, 세번째 식별자는 descriptor로 value는 물론 플래그도 넣어줄 수 있다. 플래그가 설정된 프로퍼티들은 Object.getOwnPropertyDescriptor(user, 'name');를 통해 별도로 불러올 수 있다. (플래그는 writable, enumerable, configurable 등 프로퍼티별 용도 및 속성을 정의한다.)
Object.freeze(obj) : 객체를 동결한다. 값을 변경할 수 없으며, 수정과 관련된 플래그들이 false가 된다.
Object.getOwnPropertyDescriptor(객체, 속성명) : 프로퍼티의 설명자를 조회한다.
Object.getOwnPropertyDescriptors(obj) : 객체가 가지고 있는 모든 프로퍼티들에 대해 모든 설명자들을 반환한다.