모던자바스크립트 DeepDive : 10장 객체리터럴

함수와 메서드의 차이
메서드가 함수의 영문이름이라 생각했었지만, 객체(클래스) 내에 존재하는 함수를 메서드라 한다. 즉, 모든 메서드는 함수이지만, 모든 함수가 메서드는 아니다.

메서드란?

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
즉 메서드는 객체에 묶여 있는 함수를 의미한다.

var circle = {
radius: 5, // 프로퍼티
	getDiameter: fuction() { // 메서드
		return 2 * this.radiusl // this는 circle을 가리킨다.
	}
};
console.log(circle.getDiameter()); // 10

객체 키 생성 시 주의할 점

var person = {
	'last-name': "Lee',
	1: 10
};

프로퍼티 키에서 연산자 사용

위와 같이 객체를 선언했을 때 person.’last-name’와 person.last-name을 각각 실행하면 “ReferenceError: name is not defined”, NaN 이라는 에러값이 나온다.

이러한 이유는 키의 “-”를 연산자로 인식했기 때문인데, person의 last는 선언되지 않았으므로 undefined로 인식되고, name은 윈도우의 이름을 가르키는 전역 변수이므로 NaN이 발생하는 것이다. 위 같은 상황에서 last-name을 호출하기 위해서는 person[’last-name’]; 과 같이 실행해야 한다.

숫자로 이뤄진 프로퍼티 키

프로퍼티 키가 숫자로만 이뤄진 문자열인 경우 문자열로 인식하므로 따옴표를 생략할 수 있다.
person.1 person.’1’은 실행되지 않지만 person[1], person[’1’]은 10을 호출한다.

프로퍼티 삭제

var person = {
	name: 'Lee'
}
person.age = 20; // 프로퍼티 동적 생성
delete person.age; // age 프로퍼티 삭제
delete person.address // 존재하지 않는 프로퍼티 삭제

console.log(person); // {name: "Lee"}

delete 연산자로 존재하지 않는 프로퍼티를 삭제해도 에러를 반환하지 않는다.

ES6 객체 리터럴 확장기능

프로퍼티 축약 표현

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

변수이름과 프로퍼티키가 동일한 이름일 때에는 프로퍼티를 생략할 수 있다.

계산된 프로퍼티 이름

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부터는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.