객체

const person = {
	name: 0, // 프로퍼티. name: 프로퍼티 키, 0 : 프로퍼티 값
  	getName: function () { // 메서드
    	console.log(this.name);
    }
}

0개 이상의 프로퍼티로 구성된 집합. 프로퍼티는 키와 값으로 구성된다

• 프로퍼티 키 : 객체의 상태를 나타내는 값 (data)
• 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior). 함수는 일급 객체 이므로 값으로 취급될 수 있다. 이 경우 일반 함수와 구분하기 위해 메서드라 부른다

  일급 객체 :
  1.변수나 자료구조(객체, 배열)에 저장할 수 있다.
  2.함수의 매개변수에 전달할 수 있다.
  3.함수의 반환값으로 사용할 수 있다.

프로퍼티

• 프로퍼티 동적 생성 : 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

const person = {
	name: 'Tom'
};

person.age = 20;

console.log(person); // {name : 'Tom', age: 20}

• 프로퍼티 삭제
  delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있다.

const person = {
	name: 'Tom',
	age: 20
};

delete person.age;

console.log(person); // {name : 'Tom'}

• 계산된 프로퍼티 이름(Computed Property Name)
  문자열 / 문자열로 타입 변환 할 수 있는 값으로 평가되는 표현식을 대괄호로 묶어 프로퍼티 키를 동적으로 생성할 수 있다.

const prefix = 'prop';
let i = 0;

// ES6 이전
var obj = {};
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1:1, prop-2:2, prop-3:3}

// ES6 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 생성 가능
const obj = {
	[`${prefix}-${++i}`]: i,
  	[`${prefix}-${++i}`]: i,
  	[`${prefix}-${++i}`]: i
}

console.log(obj); // {prop-1:1, prop-2:2, prop-3:3}

메서드

ES5 에서는 메서드를 정의하기 위해 프로퍼티 값으로 함수를 할당한다.
ES6 에서는 function 키워드를 생략한 축약 표현을 사용할 수 있다.

//ES5
var obj = {
	name: 'Tom',
    getName: function() {
    	console.log(this.name);
    }
};

obj.getName(); // Tom

//ES6
var obj = {
	name: 'Tom',
  	// 메서드 축약 표현
    getName(): {
    	console.log(this.name);
    }
};

obj.getName(); // Tom

ES6 에서 '메서드'는 메서드 축약 표현으로 정의된 함수만을 의미한다.

var obj = {
	name: 'Tom',
  	age: 20,
  	// 메서드
    getName(): {
    	console.log(this.name);
    },
    // 일반 함수
    getAge: function () {
    	console.log(this.name);
    }
};

ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor 이기 때문에 생성자 함수로서 호출할 수 없다.

new obj.getName(); // TypeError: obj.getName is not a constructor
new obj.getAge(); // bar {}

인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토 타입도 생성하지 않는다.

obj.getName.hasOwnProperty('prototype'); // false
obj.getAge.hasOwnProperty('prototype'); // true

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]] 를 갖는다.

super 참조는 super 를 참조하고 있는 메서드가 바인딩되어있는 객체를 찾을 수 있어야하는데, 이를 위해 메서드는 내부 슬롯 [[HomeObject]] 을 가지며 자신을 바인딩하고 있는 객체를 가리킨다.

즉 객체 리터럴의 메서드 축약표현으로 정의된 함수, 클래스와 같이 [[HomeObject]] 를 가지는 함수 만이 super 참조를 할 수 있다.

const base = {
	name: 'Tom',
  	getName() {
    	return this.name;
    }
};

const derived = {
	__proto__: base, // Object.prototype 접근자 프로퍼티. 간접적으로 [[Prototype]] 에 접근할 수 있도록 함
  	getName() {
    	return `Hi ${super.getName()}`;
    }
};

console.log(derived.getName()); // Hi Tom