[study] 언제까지 넘겨 짚을래 ch10. 객체 리터럴

📌 스터디 교재 및 강의

1. [youtube] 모던 자바스크립트 Deep Dive 스터디
2. [e-book] 모던 자바스크립트 Deep Dive
3. [e-book] 코어 자바스크립트
4. [blog] 자바스크립트 개발자라면 알아야 할 33가지 개념

✏️ 객체란?

객체는 0개 이상의 프로퍼티로 구성된 집합을 말한다. 여기서 프로퍼티는 키와 값으로 구성된다. 밑의 예시에서 키는 name, age, printInfo이고 값은 “gaori”, 5, function()이다. 밑의 예시처럼 프로퍼티 값으로 함수가 사용될 수 있다. 이럴 경우 일반 함수와 구분하기 위해 메서드라고 부른다.

프로퍼티는 객체의 상태를 나타내는 값이며 메서드는 프로퍼티를 참조하고 조작할 수 있는 동작을 말한다. 또 프로퍼티 키는 빈 문자열을 포함하는 모든 문자열이나 심벌 값이고 프로퍼티 값은 자바스크립트에서 사용할 수 있는 모든 값을 말한다.

const animal = {
	// 키: 값
	name: "gaori",
	age: 4,
	printInfo: function(){
		console.log(`${this.name}: ${this.age}`)
	}
};

// 프로퍼티 접근
console.log(animal.name); // gaori
console.log(animal['name']); // gaori
console.log(animal);
// {name: 'gaori', age: 4, printInfo: ƒ}

// 프로퍼티 값 갱신, 동적 생성, 삭제
animal.age = 5;
animal.habitat = 'sea';
delete animal.printInfo;

console.log(animal); 
// {name: 'gaori', age: 5, habitat: 'sea'}

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

• 프로퍼티 축약 표현

  // ES5
  const a = 10, b = 20;
  const obj5 = {
  	a: a,
  	b: b
  };
  
  console.log(obj5) // { a: 10, b: 20}
  
  // ES6
  const c = 30, d = 40;
  const obj6 = { c, d };
  
  console.log(obj6); // { c: 30, d: 40}

• 계산된 프로퍼티 이름

  // ES5
  let i = 0;
  const obj5 = {};
  
  obj5['week0'+ ++i] = i;
  obj5['week0'+ ++i] = i;
  obj5['week0'+ ++i] = i;
  
  console.log(obj5); // {week01: 1, week02: 2, week03: 3}
  
  // ES6
  let i = 0;
  const obj6 = {
  	[`week0${++i}`]: i,
  	[`week0${++i}`]: i,
  	[`week0${++i}`]: i
  };
  
  console.log(obj6); // {week01: 1, week02: 2, week03: 3}

• 메서드 축약 표현

  // ES5
  const obj5 = {
  	name: 'gaori',
  	sayHello: function() {
  		console.log(`Hello, ${this.name}`)
  	}
  };
  obj5.sayHello(); // Hello, gaori
  
  // ES6
  const obj6 = {
  	name: 'gaori',
  	sayHello() {
  		console.log(`Hello, ${this.name}`)
  	}
  };
  obj6.sayHello(); // Hello, gaori