객체

자바스크립트의 기본 데이터 타입은 객체
객체는 일종의 복합체로 여러 값(원시 타입 혹은 객체)들을 묶어 이름으로 저장, 값을 가져올 수 있다
객체는 이름과 값으로 구성된 프로퍼티들의 정렬되지 않은 집합이다
프로퍼티 이름은 문자열이기 때문에 문자열을 값에 대응시키는 구조라고 할 수 있다
하지만 객체는 단순 문자열과 값의 대응 관계만은 아니다
자바스크립트의 객체는 객체가 가진 고유 프로퍼티를 유지하는 것 외에 prototype이라고 하는 다른 객체의 프로퍼티를 상속 받는다
객체의 메소드들은 일반적으로 상속받은 프로퍼티이고, 이를 '프로토타입 상속'이라고 부른다
프로토타입 상속은 자바스크립트의 핵심적 특징이다

자바스크립트의 객체는 프로퍼티를 동적으로 추가, 제거가 가능
하지만 정적 객체를 흉내낼 수 있고, 정적 타입 언어에서의 '구조체'처럼 사용할 수 있다
또한 문자열-값 매핑에서 값 부분을 무시하면 문자열 집합을 표현하는 데도 사용할 수 있다

자바스크립트에서는 문자열, 숫자, boolean, null, undefined를 제외하면 모두 객체다
문자열, 숫자, 불리언 값은 객체가 아니지만 변경 불가능한 객체처럼 동작한다 (Wrapper 객체 때문..?)

객체의 프로퍼티는 이름과 값으로 구성
이름은 빈 문자열을 포함한 어떠한 문자열도 가능, 중복된 이름은 불가능
객체의 각 프로퍼티는 프로퍼티 속성 이라고 하는 연관된 값을 갖는다

프로퍼티 속성

• 쓰기 속성: 프로퍼티 값의 수정 가능 여부를 결정하는 값
• 열거 속성: 프로퍼티의 이름을 for/in 루프에서 읽을 수 있는지 여부 결정
• 설정 속성: 프로퍼티의 삭제 가능 여부와 프로퍼티 속성의 변경 가능 여부 결정
  ES5 부터는 직접 만든 속성만을 변경할 수 있다 -> 다음에 자세히

모든 객체는 세가지 속성을 갖는다

object 속성

• prototype은 상속받은 프로퍼티들을 가진 객체를 참조한다
• class는 객체의 자료형(type)을 특정짓는 문자열이다
• extensible 속성은 객체에 새 프로퍼티를 추가할 수 있는지 결정

자바스크립트 객체 3가지, 프로퍼티 2가지

객체

• 네이티브 객체: ECMAScript 명세에 정의된 객체 또는 그 객체의 클래스
  - Array, Function, Date, 정규 표현식 등
• 호스트 객체: 브라우저와 같이 자바스크립트 인터프리터가 내장된 호스트 환경에 정의된 객체
  - HTMLElement 객체는 웹페이지 구조가 클라이언트 측 자바스크립트로 표현된 호스트 객체
  -> 호스트 객체는 네이티브 객체일 수도 있다
• 사용자 정의 객체: 자바스크립트 코드의 실행으로 생성된 객체

호스트 객체

실행 환경에서 제공하는 객체(OS, Web browser에 따라 제공 객체 달라짐)

네이티브객체가 아닌 객체는 모두 호스트 객체임.

window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체.

• 호스트 객체 종류
  전역 객체: 모든 객체의 유일한 최상위 객체 (브라우저의 window, 서버의 global 객체)

BOM(Browser Object Model) : 브라우저 탭 또는 브라우저 창의 모델을 생성. BOM의 최상위 객체는 window 객체(현재 브라우저 창 또는 탭을 표현)
→ window의 하위 객체 : location, history, document, navigator, screen

프로퍼티

• 고유 프로퍼티: 객체에 직접 정의된 프로퍼티
• 상속받은 프로퍼티: 객체의 프로토타입 객체가 정의한 프로퍼티

객체의 생성

• 객체 리터럴 {} 을 사용
• new 키워드 사용
• Object.create() 사용

객체 리터럴

가장 쉬운 방법
내부의 마지막 쉼표는 무시한다
객체 리터럴은 평가될 때마다 새로운 객체를 생성하고 초기화하는 표현식
각 프로퍼티의 값 또한 평가될 때마다 새롭게 계산됨

new 사용

new 연산자는 객체를 생성, 초기화 한다
new 연산자 다음 반드시 함수 호출문
-> 이 때 호출되는 함수를 생성자 (constructor) 라고 한다
생성자는 새로 생성된 객체를 초기화 하는 역할
코어 자바스크립트는 기본 타입에 대한 생성자를 내장하고 있다

const o = new Object()

미리 작성된 생성자 뿐 아니라 임의의 생성자 함수 정의 가능

프로토 타입

Object.create()를 이해하려면 프로토 타입에 대해 먼저 알아야 함
자바스크립트의 모든 객체는 또 다른 객체와 연관되어 있다 (극히 드물게 null)
이 두 번째 객체는 prototype, 객체는 prototype으로부터 프로퍼티를 상속받는다
객체 리터럴로 생성된 모든 객체는 프로토 타입 객체가 같고
자바스크립트 코드에서 이 프로토타입 객체는 Object.prototype으로 참조할 수 있다

new 키워드를 통해 생성자를 호출하면 생성자 함수의 프로토 타입이
생성된 객체의 프로토 타입이 된다
new Object()로 생성된 객체는 {}로 생성된 객체와 마찬가지로
Object.prototype을 상속받는다
new Array()로 생성된 객체는 Array.prototype,
new Date()로 생성된 객체는 Date.prototype을 객체의 프로토타입으로 사용한다
Object.prototype은 프로토타입이 없는 아주 드문 객체로
아무런 프로퍼티도 상속받지 않는다
모든 내장 생성자는 Object.prototype을 상속하는 객체를 상속받는다
따라서 new Date()로 생성된 객체는 Date.prototype과 Object.prototype을 상속받는다
이처럼 프로토타입 객체들이 연결된 것을 '프로토 타입 체인' 이라고 부른다

Object.create()

ES5 부터 지원
메소드의 첫 인자가 프로토 타입 객체
새 객체의 프로토 타입을 두 번째 인자로 받을 수 있다
Object.create()는 정적 함수로 개별 객체를 통해 호출되는 메소드가 아니다
함수를 사용하기 위해 프로토타입 객체를 넘기기만 하면 된다

const o1 = Object.create({ x: 1, y: 2 })
// o1 은 x, y 프로퍼티를 상속 받는다

프로토 타입 객체를 갖지 않는 새 객체를 만들기 위해서는 null을 전달하면 되는데, 이 경우 어떠한 객체도 상속받지 않기 때문에 toString() 같은 기본적인 메소드, + 연산자 또한 사용할 수 없다

const o2 = Object.create(null) // o2는 프로퍼티와 메소드 없음

객체 리터럴 {}이나 new Object()와 같은 일반적 빈 객체를 반들고 싶다면 Object.prototype을 전달한다

const o3 = Object.create(Object.prototype)

특정 객체를 상속받는 '상속자' 객체를 만들 수 있다는 점이 유용하다