10장 객체리터럴

10.1 객체란?

자바스크립트는 구성하는 모든것이 객체다.

var counter = {
	num: 0,   // 프로퍼티
	increase: function() { // 메서드
		this.num++;    
	}
}

이처럼 객체는 프로퍼티와 메서드로 구성된 집합체이다.

 

10.2 객체 리터럴에 의한 객체생성

객체 리터럴로, 중괄호 { } 안에 프로퍼티를 정의한다.

 

10.3 프로퍼티

객체는 프로퍼티 집합이며, 키와 값으로 구성된다.

var obj = {};
obj['hello'] = 'world'; // 동적으로 생성하는 방법

console.log(obj); // {hello: "world"}

10.4 메서드

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

프로퍼티 값이 함수일경우 일반함수랑 구분하기위해 메서드라부른다.

필자는 함수도 메서드라고 생각했는데, 조금덛붙이자면 객체안에있는 함수를 메서드라 부르는게 맞다고생각이들었다.

 

10.5 프로퍼티접근

var person = {
	name: 'Lee'
};

console.log(person.name); //Lee
console.log(person['name']); //Lee
console.log(person.age) // undefined

대괄호 프로퍼티 접근법은 반드시 따옴포를 감싼 문자열이여야한다.

객체에 존재하지않는 프로퍼티에 접근하면 undefined를 반환한다.

필자는 저게 항상 햇갈렸다. 프로퍼티접근을할땐, [’ ‘] 이런형식이란것 새기고가야겠다.

 

10.6~7 프로퍼티 값 갱신, 동적생성

var person = {
	name: "yeji"
}

person.name ="gildong";

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

person.age = 20;

console.log(person) // {name: "gildong", age:20}

 

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.

존재하지않는 프로퍼티를 삭제하면 아무런 에러없이 무시된다.

var person = {
	name: 'Lee'
};

person.age = 20;
delete person.age; // 삭제
delete person.address; // 무시

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

 

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

10.9.1 프로퍼티 축약포현

객체프로퍼티를 축약해서 키를 생략 할수있다.

let x = 1, y=2;

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

10.9.2 계산된 프로퍼티 이름

프로퍼티 키를 동적으로 생성할수있다.

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}

10.9.3 메서드 축약 표현

ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.

const obj = {
	name: 'Lee',
	sayHi() {
		console.log('HI!' +this.name);
	}
}

ES6의 메서드축약표현으로 정의한메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.