10장 객체 리터럴

---

출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.

자바스크립트의 객체

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다. 원시값을 제외한 거의 모든 것이 객체로 분류되며 원시값과는 달리 객체는 변경이 가능한 값이다. 객체는 0개 이상의 프로퍼티들의 집합이다. 프로퍼티는 key와 value로 이루어져 있다.

var obj = {
	name: 'JK Cho',	//프로퍼티
	location: 'Korea', //location은 key, Korea는 value
};

객체 생성

자바스크립트는 다른 객체지향 언어와는 달리 프로토타입 기반의 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create
• Class

객체 리터럴을 이용한 객체 생성 코드의 경우 중괄호는 코드블럭이 아닌 값으로 평가된다. 그러므로 세미콜론을 붙혀 사용해야 한다.

객체의 인스턴스(Instance)란 클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. 객체지향 프로그래밍에서는 객체는 클래스와 인스턴스를 포함한 개념이다.

프로퍼티

key는 문자열 또는 숫자의 형태로 지정가능하고 식별자 생성규칙을 따르지 않는다. 또한 심벌 타입의 변수로도 대입이 가능하다. value는 자바스크립트에서 사용가능한 모든 값을 대입할 수 있다. 단 식별자 생성규칙을 따르지 않는 key 값의 경우에 '' 또는 ""으로 감싸 사용해야한다. 프로퍼티의 값에 접근할 때 식별자 생성규칙을 따라 만들어진 key값을 갖는 프로퍼티는 ''객체.key'와 같은 형태로 사용할 수 있다. 그러나 식별자 생성규칙을 따르지 않은 경우 '객체["key"]'와 같은 형태로 사용해야 한다.

var obj = {
  firstName: 'JK'
	'last-name': 'Cho',
}

console.log(obj.firstName)
console.log(obj['last-name']);

객체의 프로퍼티를 정의하고 사용함에 있어 다음과 같은 특이한 특징이 있다.

1. 프로퍼티 key로 빈 문자열을 사용할 수 있다.

   var obj = {
   	'' : ''
   };
   
   console.log(obj['']) //''

2. 프로퍼티의 key를 문자열이나 심벌 이외의 값으로 지정하면 암묵적으로 문자열로 변환된다.

   var obj = {
   	0: 'a',
   	1: 'b',
   	2: 'c'
   };
   
   console.log(obj['1']) //'a'

3. 같은 프로퍼티 key를 사용할 경우 나중에 선언한 프로퍼티가 기존의 프로퍼티를 덮어쓴다.

   var obj = {
   	name: 'JK Choo',
   	name: 'JK Cho'
   };
   
   console.log(obj.name) //JK Cho

4. 예약어를 프로퍼티 key로 사용할 수 있다.

   var obj = {
   	var: 'var',
   	function: 'function'
   };
   
   console.log(obj.var); //'var'

메서드

자바스크립트 객체에서 프로퍼티의 값으로 사용하는 함수는 일반 함수와의 구분을 위해 메서드라는 이름으로 쓴다. 메서드는 메서드를 생성한 객체 내에 있는 다른 프로퍼티를 사용할 수 있다.

var rect = {
	width: 4,
	height: 5,
	getSize: function() {
		return this.width * this.height;
	}
};

console.log(rect.getSize()); //20

프로퍼티 접근

객체에 없는 프로퍼티 key로 접근시 다음과 같은 결과를 보여준다.

var obj = {
	name: 'JK Cho',
}

console.log(obj.age) //undefined

다음은 객체의 프로퍼티에 접근하는 방법들이다.

var obj = {	firstName: 'JK',	'last-name': 'Cho',	3: 4}obj.firstName; //'JK',obj['firstName']; //'JK'obj.last-name; //NaNobj.'last-name'; //SyntaxErrorobj[last-name]; //ReferenceErrorobj['last-name']; //Choobj.3; //SyntaxErrorobj.'3'; //SyntaxErrorobj[3]; //4obj['3'] //4

프로퍼티 동적 생성 및 삭제

객체 생성 이후 다음과 같이 객체의 프로퍼티를 동적으로 생성할 수 있다. 또한 delete 키워드를 사용하여 프로퍼티를 삭제할 수 있다.

var obj = {	name: 'marine',  speed: 3,  range: 5};obj.cost = 50;obj[damage] = 5;delete obj.speed;delete obj['range'];console.log(obj); //{name: 'marine', cost: 50, damage: 5}

객체 리터럴 확장기능

ES6 이후 객체 리터럴의 확장기능을 제공한다.

• 프로퍼티 축약 표현

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

• 계산된 프로퍼티 이름

  var unitName= 'marine';var num = 0;var obj = {	[`${unitName}_${++num}`]: num,	[`${unitName}_${++num}`]: num}console.log(obj); //{marine_1: 1, margin_2: 2}

• 메서드 축약 표현

  var obj = {	life: 5;	getAttacked() {		--this.life;		console.log(`life is ${this.life}`);	}};