자바스크립트 객체

2018-02-14

1. 프로퍼티 나열

  • 프로퍼티는 키(문자열 또는 심볼)과 값으로 구성된다
  • 객체 프로퍼티에는 배열처럼 순서가 보장되지 않는다


1-1. for…in

  • for…in 루프에는 키가 심볼인 프로퍼티는 포함되지 않음
  • for…in은 인덱스 순서가 중요한 배열을 반복하는데 사용하면 안됨. 배열은 for나 forEach를 사용
for(variable in object){
  ...
}


1-2. Object.keys

  • 객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환
  • hasOwnProperty() 체크할 필요 없음
  • Object.keys 예제


2. 객체지향 프로그래밍

2-1. 클래스와 인스턴스 생성

  • ES6에서 클래스를 만드는 새 문법을 도입함
  • 함수를 함수표현식과 함수선언식으로 정의할 수 있듯이, class 문법도 class 표현식과 class 선언 두 가지 방법을 제공함
  • 단 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다.
  • class 선언 예제
  • class 표현 예제

2-2. 프로토타입(인스턴스 메서드)

  • 클래스의 인스턴스에서 사용할 수 있는 메서드
  • 프로토타입 메서드는 Dog.prototype.speak와 같이 표기할 때가 많다(Array.prototype.forEach)
  • new 키워드로 만든 새 객체는 생성자의 prototype 프로퍼티에 접근할 수 있으며, 객체 인스턴스는 생성자의 prototype 프로퍼티를 proto 프로퍼티에 저장한다.
  • 프로토타입 예제

2-3. 정적 메서드(클래스 메서드)

  • 정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.
  • 정적 메서드에는 this 대신 클래스 이름을 사용하는 것이 바람직하다.
  • 클래스에는 관련이 있지만 인스턴스와는 관련이 없는 경우 사용
  • 동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 this를 사용할 수 있다.
  • 정적 메소드 예제

2-4. 상속

  • 클래스의 인스턴스는 클래스의 기능을 모두 상속함
  • 객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색함(프로토타입 체인)
  • 서브클래스에서는 super()를 반드시 호출해야함. 호출하지 않으면 에러 발생
  • 상속 예제

2-5. hasOwnProperty()

3. 믹스인

  • 자바스크립트가 다중 상속이 필요한 문제에 대한 해답으로 내놓은 개념이 믹스인(mixin)이다.
  • 프로퍼티만 상속받고 클래스 상속은 받고 싶지 않을때 믹스인 패턴을 이용하면 된다.
function mixin(receiver, supplier){
  for(var property in supplier){
  	if(supplier.hasOwnProperty(property)){
  	  receiver[property] = supplier[property]
  	}
  }
  return receiver;
}
  • receiver는 supplier로부터 프로토타입을 복사받는다.