writed by dikum98

🤔 객체가 무엇인가요?

자바스크립트의 객체는 키(key)와 값(value)로 구성된 프로퍼티(Property)들의 집합이다.

자바스크립트에서 원시값을 제외한 모든 값은 객체로, 객체를 복사하면 값 자체가 아닌 주소가 복사된다.

자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

이처럼 객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

일급 객체?

⇒ 값으로 평가될 수 있느냐? yes

1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. (함수 표현식) (12장 함수 참조)
2. 변수나 자료구조(객체, 배열 등)에 할당할 수 있다. (함수 표현식) **(12장 함수 참조)**
3. 함수의 매개변수에 전달할 수 있다. (callback)
4. 함수의 반환값으로 사용할 수 있다. (closure)

메서드?

ES6 이전 : 객체에 바인딩된 함수 (일반적인 정의)

ES6 : 메서드 축약 표현으로 정의된 함수 (언어 사양에 따른 엄격한 정의)

let dog = {
  name: "Rex",
  breed: "Golden Retriever",

	// ES6 method (엄격한 정의)
  speak() {
    console.log("Woof!");
  }

	// method (일반적인 정의)
	eat: function () {
		console.log("yum");
	}
};

객체를 생성하는 방법은 무엇이 있나요?

• 객체 리터럴
  • 코드 블록은 자체 종결성(self closing)을 갖기 때문에 세미콜론를 붙이지 않는다.
  • 객체 리터럴의 중괄호는 코드 블록이 아닌, 값으로 평가되는 표현식 이므로 세미콜론을 붙인다.
• 생성자 함수(17장)
• Object.create 메서드 (19장?)
• 클래스(ES6) (25장)

객체에 존재하지 않는 프로퍼티에 접근하면 어떻게 되나요?

에러가 발생하지 않고 undefined를 반환한다.

프로퍼티는 key와 value가 쌍으로 존재한다. key만 있는 경우는 없다.

프로퍼티를 삭제하려면 어떻게 해야 하나요?

delete 연산자를 사용해서 객체의 프로퍼티를 삭제할 수 있다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

배열은 기본적으로 객체의 한 형태이며, 배열의 요소들은 인덱스를 키로 하는 객체의 속성으로 취급된다. 따라서 배열의 요소도 delete 연산자를 사용하여 삭제할 수 있다.

ES6에서 객체 리터럴의 기능이 추가된 게 있나요?

1. 프로퍼티 축약 표현

프로퍼티 값으로 특정 변수에 할당된 값을 사용하는 경우, 해당 변수 이름과 프로퍼티 키가 동일할 때 프로퍼티 키를 생략할 수 있다.

let x = 1;
let y = 2;
const obj = { x, y };

2. 계산된 프로퍼티 이름(computed property name)

자바스크립트의 계산된 프로퍼티 이름(computed property name)은 객체 리터럴 속성 이름을 동적으로 생성할 수 있는 ES6의 기능이다. 이 기능은 대괄호([]) 안에 표현식을 넣어 속성 이름을 계산하는 방식으로 사용한다.

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성한다.

동적으로 생성?

객체의 속성명이 실행 시점에서 결정되어야 할 때, 또는 변수에 따라 동적으로 변해야 할 때

// #1
const name = 'kim';
const obj = {
	[name.charAt(0).toUpperCase() + name.slice(1)]: 'Hello'
};

console.log(obj); // {Kim: 'Hello'}

// #2
let propName = "name";
let user = {
  [propName]: "John Doe"
};
console.log(user.name); // John Doe

3. 메서드 축약 표현

객체의 프로퍼티로 function 키워드를 생략한 축약 표현을 사용할 수 있다.

const obj = {
	name: 'kim',
	hi() {
		console.log('hi ' + this.name);
	};
};