[JS-책 편김에 끝까지] 객체

객체 object

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 즉, 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

객체는 서로 연관있는 속성(데이터data, 프로퍼티property)과 행동(함수function, 메소드method)을 묶어주기 위해 사용된다.

// 순수 데이터 객체
let apple = {
	name: 'apple',
  color: 'red',
}

// 상태와 행동 객체
let apple = {
	name: 'apple', // 속성 property
  display: function () { // 행동 method
  	...
      console.log();
  }
}

객체 리터럴 object literal

객체를 만드는 방법으로는 { key: value } 을 써서 만들 수 있다. 또 다른 방법으로는

• new Object();
• Object.create();

등이 있다.

객체에는 key와 value를 정해줄 수 있는데, key에는 문자, 숫자, 문자열, 심볼 등을 넣을 수 있고, value에는 원시값, 객체(함수)를 넣을 수 있다.

let apple = {
	name: 'apple',
  owner: 'zzangzzong'
  'hello-bye': '👋🏻',
  0: 1,
  ['hello-bye1']: '👋🏻'
};

//속성, 데이터에 접근
console.log(apple.name); // apple
console.log(apple.['hello-bye']); // 👋🏻

// 속성 추가
apple.emoji = '🍎';
console.log(apple.emoji); // 🍎
console.log(apple['emoji']); // 🍎

// 속성 삭제
delete apple.emoji;
console.log(apple); // { '0': 1, name: 'apple', 'hello-bye': '👋🏻', 'hello-bye1': '👋🏻' }

// 객체 안의 속성은 이렇게 여러 데이터가 담길 수 있지만 너무 지저분해보인다. 
// 특수한 경우가 아니라면 대부분 문자열로 만들고, key이름도 camelCase로 작성하는 것이 좋다.

• 객체 동적으로 접근하기

  const obj = {
  	name: 'zzangzzong',
    gender: 'man'
  }
  
  // 코딩하는 시점에, 정적으로 접근이 확정됨
  obj.name;
  obj.gender;
  
  function getValue(obj, key) {
  	return obj[key];
  }
  console.log(getValue(obj, 'name')); // zzangzzong
  
  // key, value 추가
  function addKey(obj, key, value) {
  	obj[key] = value;
  }
  addKey(obj, 'job', 'front-end');
  console.log(obj); // { name: 'zzangzzong', gender: 'man', job: 'front-end' }
  
  // key, value 삭제
  function deleteKey(obj, key) {
  	delete object[key];
  }
  deleteKey(obj, "job", "engineer");
  console.log(obj); // { name: 'zzangzzong', gender: 'man' }

객체 안의 함수

const apple = {
	name: 'apple',
  display: function() {
  	console.log(`${this.name}: 🍎`);
  }
}

apple.display(); // apple: 🍎

생성자 함수

functon Fruit(name, emoji) {
	this.name = name;
  this.emoji = emoji;
  this.display = () => {
  	console.log(`${this.name}: ${this.emoji}`);
  };
  return this; // 생략가능
}
const apple = new Fruit('apple', '🍎');
const orange = new Fruit('orange', '🍊');
console.log(apple); // { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }
console.log(orange); // { name: 'orange', emoji: '🍊', display: [Function (anonymous)] }
apple.display(); // apple: 🍎