[JS] 객체의 모든 것

객체

• 0개 이상의 프로퍼티로 구성된 집합
• 프로퍼티: 객체의 상태를 나타내는 값
  - key, value로 구성
• 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작
  - 프로퍼티 값이 함수인 경우
• 원시 값과 달리 변경 가능한 값(mutable)

객체 생성 방법

1. 객체 리터럴

• 중괄호({ ... }) 내에 0개 이상의 프로퍼티 정의

var person = {
	name: 'Lee',
    sayHello: function() {
    	console.log(`Hello my name is ${this.name}.`);
	}
};	// 세미콜론 필수 !

ES6에서 추가된 객체 리터럴의 확장 기능

1. 프로퍼티 축약 표현

• 프로퍼티 값으로 변수를 사용하는 경우,
  변수 이름과 프로퍼티 키가 동일할 때 생략 가능 -> 변수 이름으로 키 자동 생성

let x = 1, y = 2;
const obj = {x, y};
console.log(obj); // {x: 1, y:2}

2. 계산된 프로퍼티 이름

• 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 키 동적 생성 가능
  ES5의 경우, 객체 리터럴 외부에서 대괄호 표기법을 사용해야 했었음

const prefix = 'prop'
let i = 0;
const obj = {[`${prefix}-${++i}`]: i, 
    ...
};

3. 메서드 축약 표현

• 메서드를 정의할 때 function 키워드 생략 가능

const obj = {
	name: 'Lee',
	// ES5
        sayHi: function() { ... }
    	// ES6
    	sayHi() { ... }
};

2. Object 생성자 함수

3. 생성자 함수

• PascalCase 컨벤션 사용
• 반드시 new연산자를 붙여서 실행
• 빌트인 생성자 함수: Object, String, Number, Date, Array, ...
• 프로퍼티 구조가 동일한 여러 객체 생성 가능
  -> 객체 리터럴을 이용한 객체 생성 방식의 단점 해결
• 인스턴스(instance): 생성자 함수에 의해 생성된 객체

인스턴스 생성 과정

function Circle(radius) {
	//1. 인스턴스 생성과 this 바인딩
    	// 암묵적으로 빈 객체가 생성되고 this에 바인딩 된다.
    	// 2. 인스턴스 초기화
    	// this에 바인딩되어 있는 인스턴스를 초기화 한다.
    	this.radius = radius
    	// 3. 인스턴스 반환
    	// 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
}

new.target (메타 프로퍼티)
- 함수 내부에서 new 연산자와 생성자 함수로서 호출했는지 확인 가능

function Circle(radius) {
	// 이 함수가 new 연산자와 함께 호출되지 않았다면,
    	// new.target은 undefined 이다.
	if(!new.target) {
    	// new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스 반환
    	return new Circle(radius);
	}
    this.radius = radius;
}
// new 연산자 없이 생성자 함수를 호출하여도 
// new.target을 통해 생성자 함수로서 호출됨
const circle = Circle(5);

4. Object.create 메서드

5. 클래스

프로퍼티

• 나열할 때, 쉼표(,)로 구분
• 존재하지 않는 프로퍼티에 값을 할당하면, 프로퍼티가 동적으로 생성되어 값 할당됨
• delete 연산자: 객체의 프로퍼티 삭제

1. 키 Key

• 빈 문자열을 포함하는 모든 문자열 or 심벌 값
• 식별자 네이밍 규칙을 따르지 않는 이름은 반드시 따옴표 사용
  (ex. 'last-name': 'Lee')
• 동적으로 생성 가능 -> 키로 사용할 표현식을 대괄호([ ... ])로 묶어야 함

2. 값 Value

• JS에서 사용할 수 있는 모든 값

접근 방법

1. 마침표 표기법
2. 대괄호 표기법
   • 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키가 반드시 따옴표로 감싼 문자열이여야 함
   • 프로퍼티 키가 숫자로 이뤄진 문자열인 경우, 따옴표 생략 가능
   • 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름인 경우, 반드시 대괄호 표기법을 사용해서 접근

var person = {
	name: 'Lee'
};

console.log(person['name']);	// "Lee"
console.log(person[name]);	// ReferenceError

this

• 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수
• this 바인딩은 함수 호출 방식에 따라 동적으로 결정(in 런타임)
  - 일반 함수 호출: 전역 객체(window, global)
  - 메서드 호출: 메서드를 호출한 객체
  - 생성자 함수 호출: 생성자 함수가 생성할 인스턴스