배열과 마찬가지로 자바스크립트 객체 역시 컨테이너지만, 크게 보면 다음 두 가지 측면에서 배열과 다릅니다.

• 배열은 값을 가지며 각 값에는 숫자형 인덱스가 있습니다. 객체는 프로퍼티를 가지며 각 프로퍼티에는 문자열이나 심볼 인덱스가 있습니다.
• 배열에는 순서가 있습니다. 즉, arr[0]은 항상 arr[1]보다 앞에 있습니다. 반면 객체에는 그런 순서가 보장되지 않습니다. obj.a가 obj.b보다 앞에 있다고 말할 수는 없습니다.

프로퍼티는 키(문자열 또는 심볼)과 값으로 구성됩니다. 객체의 진짜 특징은 키를 통해 프로퍼티에 접근할 수 있다는 점입니다.

프로퍼티 나열

객체도 분명 컨테이너이고 프로퍼티 나열을 지원합니다.
프로퍼티 나열에서 기억해야할 것은 순서가 보장되지 않는다는 점입니다.
객체 프로퍼티에는 순서가 없습니다.

for...in

const SYM = symbol()

const o = {a: 1, b: 2, c:3, [SYM]: 4}

for(let prop in o) {
  if (!o.hasOwnProperty(prop)) continue;
  console.log(`${prop}: ${o[prop]}`);
}

hasOwnProperty는 상속된 프로퍼티가 for..in에 나타날 위험을 제거하기 위해 사용합니다.
다른 타입의 객체, 특히 다른 사람이 만든 객체의 프로퍼티를 나열하다 보면 예상치 못한 상황이 생길 수 있으므로 hasOwnProperty를 쓰는 습관을 들여야합니다.

Object.keys

객체의 프로퍼티 키를 배열로 가져와야 할 때는 Object.keys가 편리합니다.

객체지향 프로그래밍

OOP의 기본 아이디어는 단순하고 직관적입니다. 객체는 데이터와 기능을 논리적으로 묶어놓은 겁니다.
클래스는 추상적이고 범용적인 것입니다.
인스턴스는 구체적인고 한정적인 것입니다.
기능은 메서드라고 부릅니다.
클래스에 속하지만 특정 인스턴스에 묶이지는 않는 기능을 클래스 메서드라고 합니다.
인스턴스를 처음 만들 떄는 생성자constructor가 실행됩니다. 생성자는 객체 인스턴스를 초기화합니다.

OOP는 클래스를 계층적으로 분류하는 수단도 제공합니다. 더 범용적인 클래스가 있을 때 슈퍼 클래스와 서브 클래서로 나누어 부를 수 있습니다.

클래스와 인스턴스 생성

class Car {
	constructor(){
    }
}

이 코드는 새 클래스 Car를 만듭니다. 아직 인스턴스는 만들어지지 않았지만, 언제든 만들 수 있습니다. 인스턴스를 만들 때는 new키워드를 사용합니다.

const car1 = new Car()
const car2 = new Car()

class Car{
  constructor(make, model){
    this.make = make
    this.model = model
    this.userGears = ['P', 'N', 'R', 'D']
    this.userGear = this.userGears[0]
  }
  shift(gear){
    if(this.userGears.indexOf(gear)<0) throw new Error(`Invalid gear: ${gear}`)
    this.userGear = gear
  }
}

여기서 this 키워드는 의도한 목적, 즉 메서드를 호출한 인스턴스를 가리키는 목적으로 쓰였습니다.
이 생성자를 실행하면 인스턴스를 만들면서 자동차의 제조사와 모델을 지정할 수 있고, 몇 가지 기본값도 있습니다.

Car 클래스에서 shift 메서드를 사용하면 잘못된 기어를 선택하는 실수를 방지할 수 있을 것처럼 보입니다. 하지만 완벽하게 보호되는 것은 아닙니다. 직접 설정한다면 막을 수 없습니다. 대부분의 객체지향 언어에서는 메서드와 프로퍼티에 어느 수준까지 접근할 수 있는지 세밀하게 설정할 수 있는 매커니즘을 제공해서 실수를 막을 수 있게 합니다. 하지만 자바스크립트에는 그런 매커니즘이 없고, 이는 자바스크립트가 자주 비판받는 문제입니다.

Car 클래스를 다음과 같이 수정하면 실수로 기어 프로퍼티를 고치지 않도록 어느 정도 막을 수 있습니다.

class Car{
  constructor(make, model){
    this.make = make
    this.model = model
    this._userGears = ['P', 'N', 'R', 'D']
    this._userGear = this._userGears[0]
  }
  
  get userGear() { return this._userGear }
  set userGear(value){
    if(this._userGears.indexOf(value)<0) throw new Error(`Invalid gear: ${value}`)
    this._userGear = value
  }
  
  shift(gear){ this.userGear = gear }
}

위 코드에서는 외부에서 접근하면 안 되는 프로퍼티 이름 앞에 밑줄을 붙이는 '가짜 접근 제한'을 사용했습니다.

프로퍼티를 꼭 보호해야 한다면 스코프를 이용해 보호하는 WeakMap인스턴스를 사용할 수 있습니다.

const Car = (function() {
  const carProps = new WeakMap()
  
  class Car {
    constructor(make,model){
      this.make = make
      this.model = model
      this._userGear = ['P', 'N', 'R', 'D']
      
      carProps.set(this, {userGear: this._userGears[0]})
      get userGear() { return carProps.get(this).userGear }
      set userGear(value) {
        if(this._userGears.indexOf(value) < 0) throw new Error(`Invalid gear: ${value}`)
        carProps.get(this).userGear = value
      }
      
      shift(gear) { this.userGear = gear }
    }
   return Car
  })()

여기서는 즉시 호출되는 함수 표현식을 써서 WeakMap을 클로저로 감싸고 바깥에서 접근할 수 없게 했습니다. WeakMap은 클래스 외부에서 접근하면 안 되는 프로퍼티를 안전하게 저장합니다.

프로퍼티 이름에 심볼을 쓰는 방법도 있습니다. 이렇게 해도 어느 정도는 보호할 수 있지만, 글래스에 들어 있는 심볼 프로퍼티 역시 접근이 불가능한 것은 아니므로 이 방법에도 한계가 있습니다.

클래스는 함수다

class는 사실 함수일 뿐입니다.

function Car(make, model){
  this.make = make
  this.model = model
  this._userGears = ['P', 'N', 'R', 'D']
  this._userGear = this.userGears[0]
}

이렇게 작성해줬을 때 결과는 완전히 동일합니다.

프로토타입

클래스의 인스턴스에서 사용할 수 있는 메서드라고 하면 그겁 프로토타입 메서드를 말하는 겁니다.

모든 함수에는 prototype이라는 특별한 프로퍼티가 있습니다. 일반적으로 함수에서는 프로토타입을 사용할 일이 없지만, 객체 생성자로 동작하는 함수에서는 프로토타입이 중요합니다.

함수의 prototype 프로퍼티가 중요해지는 시점은 new 키워드로 새 인스턴스를 만들었을 때 입니다. new 키워드로 만든 새 객체는 생성자의 prototype 프로퍼티에 접근할 수 있습니다. 객체 인스턴스는 생성자의 prototype 프로퍼티를 _ _proto__ 프로퍼티에 저장합니다.

_ _proto__프로퍼티는 자바스크립트의 내부 동작 방식에 영향을 미칩니다. 밑줄 두 개로 둘러싼 프로퍼티는 모두 그렇습니다. 이런 프로퍼티를 수정하는 것은 위험합니다. 이들을 적절하고 현명하게 사용할 수 있는 경우가 전혀 없는건 아니지만, 자바스크립트를 충분히 이해하기 전에는 이들 프로퍼티 조작은 지양하는 것을 권장드립니다.

프로토타입에서 중요한 것은 동적 디스패치라는 매커니즘입니다. 여기서 디스패치는 메서드 호출과 같은 의미입니다. 객체의 프로퍼티나 메서드에 접근하려 할 때 그런 프로퍼티나 메서드가 존재하지 않으면 자바스크립트는 객체의 프로토타입에서 해당 프로퍼티나 메서드를 찾스니다. 클래스의 인스턴스는 모두 같은 프로토타입을 공유하므로 프로토타입에 프로퍼티나 메서드가 있다면 해당 클래스의 인스턴스는 모두 그 프로퍼티나 메서드에 접근할 수 있습니다.

인스턴스에서 메서드나 프로퍼티를 정의하면 프로토타입에 있는 것을 가리는 효과가 있습니다. 자바스크립트는 먼저 인스턴스를 체크하고 거기에 없으면 프로토타입을 체크하기 때문입니다.

프로토타입 체인과 동적 디스패치를 항상 숙지하고 있을 필요는 없지만 가끔 문제가 발생할 때 세부사항을 알고 있으면 도움이 됩니다.

정적 메서드

정적 메서드는 특정 인스턴스에 적용되지 않습니다. 정적 메서드에서 this는 인스턴스가 아니라 클래스 자체에 묶입니다. 하지만 일반적으로 정적 메서드에서는 this 대신 클래스 이름을 사용하는 것이 좋습니다.

정적 메서드는 클래스와 관련이 있지만 인스턴스와는 관련이 없는 작업에 사용됩니다. 전체를 대상으로 하는 추상적인 개념을 사용할 때 정적 메서드를 사용하는 것입니다.
정적 메서드는 여러 인스턴스를 대상으로 하는 작업에도 종종 쓰입니다.

class Car{
  static getNextVin(){
    return Car.nextVin++
  }
  
  constructor(make,model) {
    this.make = make
    this.model = model
    this.vin = Car.getNextVin()
  }
  
  static areSimilar(car1, car2){
    return car1.make===car2.make && car1.model===car2.model
  }
  
  static areSame(car1, car2){
    return car1.vin===car2.vin
  }
}

상속

클래스의 인스턴스는 클래스의 기능을 모두 상속합니다. 상속은 한 단계로 끝나지 않습니다.
객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 트로토타입을 검색합니다. 프로토타입 체인은 이런식으로 만들어집니다.
조건에 맞는 프로토타입을 찾을 때까지 프로토타입 체인을 계속 거슬러 올라가는데, 조건에 맞는 프로토타입을 찾지 못하면 에러를 일으킵니다.

클래스의 계층 구조를 만들 때 프로토타입 체인을 염두에 두면 효율적인 구조를 만들 수 있습니다. 즉, 프로토타입 체인에서 가장 적절한 위치에 메서드를 정의하는 겁니다.

class Vehicle {
  constructor() {
    this.passengers = []
    console.log("Vehicle created")
  }
  addPassenger(p) {
    this.passengers.push(p)
  }
}

class Car extends Vehicle {
  constructor() {
    super()
    console.log("Car created")
  }
  deployAirbags() {
    console.log("BWOOSH!")
  }
}

extends 키워드는 Car를 vehicle의 서브클래스로 만듭니다.
super()는 슈퍼클래스의 생성자를 호출하는 특별한 함수입니다. 서브클래스에서는 이 함수를 반드시 호출해야 합니다. 호출하지 않으면 에러가 일어납니다.

상속은 단방향입니다. Car 클래스의 인스턴스는 vehicle에 클래스의 모든 메서드에 접근할 수 있지만, 반대는 불가능합니다.

다형성

다형성은 객체지향 언어에서 여러 슈퍼클래스의 멤버인 인스턴스를 가리키는 말입니다.
자바스크립트는 느슨한 타입을 사용하고 어디서든 객체를 쓸 수 있으므로 어떤 면에서는 자바스크립트 객체는 모두 다형성을 갖고 있다고 할 수 잇습니다.

자바스크립트에는 객체가 클래스의 인스턴스인지 확인하는 instanceof 연산자가 있습니다.

문자열 표현

모든 객체는 Object를 상속하므로 Object의 메서드는 기본적으로 모든 객체에서 사용할 수 있습니다. 객체의 기본적인 문자열 표현을 제공하는 toString도 그런 메서드 중 하나입니다.
toString의 기본 동작은 "[object Object]"를 반환하는 것인데, 이건 거의 쓸모가 없습니다.

class Car{
  toString(){
    return `${this.make} ${this.model}: ${this.vin}`
  }
}

이제 Car의 인스턴스에서 toString을 호출하면 객체 식별에 필요한 정보를 얻을 수 있습니다.

다중 상속, 믹스인, 인터페이스

다중 상속은 클래스가 슈퍼클래스 두 개를 가지는 기능이며, 슈퍼클래스의 슈퍼클래스가 존재하는 일반적인 상속과는 다릅니다. 다중 상속에는 충돌의 위험이 있습니다.

하지만 현실적으로 생각해 보면 다중 상속을 적용해야하는 문제가 많습니다. 다중 상속을 지원하지 않는 언어 중에는 인터페이스 개념을 도입해서 이런 상황에 대처하는 경우가 많습니다.

자바스크립트는 프로토타입 체인에서 여러 부모를 검색하지는 않으므로 단일 상속 언어라고 해야 하지만, 어떤 면에서는 다중 상속이나 인터페이스보다 더 나은 방법을 제공합니다.

자바스크립트가 다중 상속이 필요한 문제에 해답으로 내놓은 개념이 mixin입니다. 믹스인이란 기능을 필요한 만큼 섞어 놓은 것입니다. 자바스크립트는 느슨한 타입을 사용하고 대단히 관대한 언어이므로 그 어떤 기능이라도 언제든, 어떤 객체에든 추가할 수 있습니다.

class InsurancePolicy{}
function makeInsurable(o){
  o.addInsurancePolicy = function(p) {this.insurancePolicy = p}
  o.getInsurancePolicy = function() { return this.insurancePolicy }
  o.isInsured = function() { return !!this.insurancePolicy }
}

const car1 = new Car()
makeInsurable(car1)
car1.addInsurancePolicy(new InsurancePolicy())

보험에 가입하는 것은 자동차 인스턴스 하나하나입니다. 하지만 위와 같이 작성한다면 모든 자동차에서 makeInsurable을 호출해야합니다. Car 생성자에 추가할 수도 있지만, 그렇게 하면 이 기능을 모든 Car 클래스에 복사하는 것과 같습니다.

makeInsurable(Car.prototype)
const car1 = new Car()
car1.addInsurancePolicy(new InsurancePolicy())

이렇게 프로토타입에 추가해주면 보험 관련 메서드들이 Car 클래스에 정의된 것처럼 동작합니다.

물론 믹스인이 모든 문제를 해결해 주지는 않습니다. 보험 클래스에서 shift 메서드를 만들게 된다면 동작이 이상해집니다.

심볼을 사용하면 이런 일부를 줄일 수 있습니다. 클래스에 키를 모두 심볼로 사용하게되면 믹스인은 다음과 같은 형태가 됩니다.

class InsurancePolicy {}
const ADD_POLICY = Symbol()
const GET_POLICY = Symbol()
const IS_INSURED = Symbol()
const _POLICY = Symbol()
functio makeInsurable(o){
  o[ADD_POLICY] = function(p) {this[_POLICY] = p}
  o[GET_POLICY] = function() { return this[_POLICY] }
  o[IS_INSURED] = function() { return !!this[_POLICY] }
}

심볼은 항상 고유하므로 믹스인이 Car 클래스와 충돌할 가능성은 없습니다. 쓰기가 조금 번거로울 순 있지만 훨씬 안전합니다. 메서드 이름에는 일반적인 문자열을 쓰고 데이터 프로퍼티에는 심볼을 쓰는 것이 좋습니다.