#10. 객체 리터럴

1. 객체란?

자바스크립트를 구성하는 거의 "모든 것" 이 객체다.
원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등)은 모두 객체다．

• 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.
• 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.
• 객체는 0개 이상의 프로퍼티와 메서드로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.
  • 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
    • 함수도 프로퍼티 값으로 사용할 수 있다. ( 일반 함수와 구분하기 위해 메서드라 부른다 )

· 프로퍼티： 객체의 상태를 나타내는 값 (data)
· 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동직(behavior)

 
※ 객체와 함수

• 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다.

---

 

2. 객체 리터럴에 의한 객체 생성

객체 생성 방법 

• 객체 리터럴 : 중괄호 ({ … }) 내에 0개 이상의 프로퍼티를 정의
  • 객체 리터럴은 값으로 평가되는 표현식이므로 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다.

var person = { 
	name: 'Lee', 
	sayHello: function () { 
		console.log( ' Hello! My name is ${this.name}. ' );
	} 
}; 

console.log(typeof person); // object 
console.log(person); // {name: "Lee", sayHello: f}

• 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성한다.

---

3. 프로퍼티

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

• 프로퍼티를 나열할 때는 쉼표（,）로 구분한다.
  • 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 괜찮다.
• 프로퍼티 키와 값으로 사용할 수 있는 값

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
-> 식별자 네이밍 규칙을 준수하는 키 값은 따옴표를 생략 할 수 있고,
식별자 네이밍 규칙을 준수하지 않는 이름에는 반드시 따옴표를 사용해야 한다.
식별자 네이밍 규칙을 준수하는 키 사용 권장
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

• 프로퍼티 키 동적 생성
  • 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 한다.

var obj = {}: 
var key = 'hello'; 
// ES5: 프로퍼티 키 동적 생성 
obj[key] = 'world' ; 
// ES6: 계산된 프로퍼티 이름
// var obj = { [key]: 'world'};
console.log(obj); // { hello: "world"}

• 빈 문자열을 프로퍼티 키로 사용해도 되지만, 권장하지 않는다.
• 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
• var, function 같은 예약어를 프로퍼티 키로 사용해도 되지만, 에러가 날 수 있어 권장하지 않는다.
• 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

---

 

4. 메서드

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

var circle = { 
radius: 5, // <- 프로퍼티
// 원의 지름
getDiameter: function () { // <- 메서드 
	return 2 * this.radius; // this는 circles를 가리킨다. 
	} 
}; 
console.log(circle.getDiameter()); // 10

---

 

5. 프로퍼티 접근

프로퍼티에 접근하는 2가지 방법

마침표 프로퍼티 접근자(.)를 사용하는 마침표 표기법

대괄호 프로퍼티 접근연산자 ([ . . . ])를 사용하는 대괄호 표기법

var person = { 
name: 'Lee' 
// 마침표 표기법에 의한 프로퍼티 접근 
console.log(person.name); // Lee 
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee​

• 좌측에는 객체로 평가되는 표현식을 기술
• 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근연산자의 내부에는 프로퍼티 키를 지정
• 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.
  • 그렇지 않으면 자바스크립트 엔진이 식별자로 해석한다.
  • 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
• 객체에 존재하지 않은 프로퍼티에 접근하면 참조 에러가 발생하지 않고 undefined를 반환한다. 
• 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이면 반드시 대괄호 표기법을 사용해야 한다.

var 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

 
※ person.last-name의 실행 결과는 Node. js 환경에서 "ReferenceError: name is not defined " 이고 브라우저 환경에서는 NaN이다 . 그 이유는？
 
person.last-name을 실행할 때 자바스크립트 엔진은 먼저 person.last를 평가한다.
person 객체에는 프로퍼티 키가 last인 프로퍼티가 없기 때문에 person.last는 undefined로 평가된다.
따라서 person.last-name은 undefined-name과 같다.

여기서 name은 식별자로 해석되는데,
 
Node.js 환경에서는 어디에도 name이라는 식별자 (변수, 함수 등의 이름) 선언이 없으므로 "ReferenceError: name is not defined "라는 에러가 발생한다.
브라우저 환경에서는 name이라는 전역 변수(전역 객쳬 window의 프로퍼티)가 암묵적으로 존재한다. 전역 변수 name은 창(window)의 이름을 가리키며, 기본값은 빈 문자열이다. 따라서 person.last-name은 undefined - ' '과 같으므로 NaN이 된다.

---

 

6. 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person = { 
name: 'Lee' 
};
// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다． 
person.name = 'Kim' ; 
console.log(person); // {name: "Kim"J

---

 

7. 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

var person = { 
name: 'Lee' 
};
// person 객체에는 age 프로퍼티가 존재하지 않는다． 
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다． 
person.age = 20; 
console.log(person); // {name: "Lee", age: 20}

---

 

8. 프로퍼티 삭제

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

• delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.

var person = { 
name: 'Lee' 
};
// 프로퍼티 동적 생성 
person.age = 20; 

// person 객체에 age 프로퍼티가 존재한다． 
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다． 
delete person.age; 

//person 객체에 address 프로퍼티가 존재하지 않는다． 
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다． 
delete person.address;
console.log(person); // {name: "Lee"}

---

 

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

프로퍼티 축약 표현

• 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.
• 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
  • 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

var x = 1, y = 2; 

var obj = { 
x: x, 
y: y 
};

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

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} 

// E56 
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}

 

메서드 축약 표현

//ES5
var obj = { 
	name: 'Lee', 
	sayHi: function() { 
		console.log('Hi!' + this.name); 
	} 
}; 
obj.sayHi(); // Hi! Lee

// E56 function 키워드를 생략한 축약 표현을 사용할 수 있다.
const obj = { 
	name: 'Lee', 
	// 메서드 축약 표현 
	sayHi() { 
		console.log('Hi!' + this.name); 
	} 
}; 
obj.sayHi(); // Hi! Lee