모던 자바스크립트 Deep Dive 정리
객체란?
▶ 프로퍼티
▷ 객체의 상태를 나타내는 값(data)
▶ 메서드
▷ 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
▶ 인스턴스
▷ 클래스에 의해 생성되어 메모리에 저장된 실체
▷ 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다
프로퍼티
▶ 프로퍼티 키는 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다
▷ 하지만 식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 반드시 따옴표를 사용해야 한다
▷ 예시
const person = {
firstName: 'Harry', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
'last-name': 'Kane' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};
console.log(person); // {firstName: "Harry", last-name: "Kane"}
▷ 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다
▷ 예시
const foo = {
0: 1,
1: 2,
2: 3
};
console.log(foo); // {0: 1, 1: 2, 2: 3}
프로퍼티 접근
▶ 대괄표 표기법을 사용하는 경우, 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다
▷ 예시
const person = {
name: 'Lee'
};
// 대괄호 표기법 -> 문자열로 감싸진 프로퍼티 키만 가능
console.log(person[name]); // ReferenceError: name is not defined
// 에러가 안나게 고치려면 person['name'] 이렇게 고쳐야 함
// 만약 name 변수가 문자열 'name'을 미리 저장하고 있으면 가능
// 마침표 표기법 -> 자유롭게 가능
console.log(person.name); // Lee
▶ 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다
▶ 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다
▷ 예시
const person = {
'last-name': 'Lee',
1: 10
};
person.'last-name'; // -> SyntaxError: Unexpected string
person.last-name; // -> 브라우저 환경: NaN
// -> Node.js 환경: ReferenceError: name is not defined
person[last-name]; // -> ReferenceError: last is not defined
person['last-name']; // -> Lee
// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
person.1; // -> SyntaxError: Unexpected number
person.'1'; // -> SyntaxError: Unexpected string
person[1]; // -> 10 : person[1] -> person['1']
person['1']; // -> 10
ES6의 객체 리터럴 추가기능
▶ 프로퍼티 축약 표현
▷ 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일때 프로퍼티 키를 생략할 수 있다
▷ 예시
// ES6
let x = 1, y = 2;
// 프로퍼티 축약 표현
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}
▶ 계산된 프로퍼티 이름(키)
▷ 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 이름(키)을 동적으로 생성할 수 있다
// ES5
var prefix = 'prop';
var i = 0;
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에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다
// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
▶ 메서드 축약 표현
▷ ES6 에서는 메서드를 정의할 때 클래스처럼 function 키워드를 생략하고 정의할 수 있다
// ES6
const obj = {
name: 'Lee',
// 메서드 축약 표현
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee