객체 (Object)

객체 리터럴 (Object literal)

// Object literal { key : value}
// new Object()
// Object.create();
// key - 문자, 숫자, 문자열, 심볼
// value - 원시값, 객체(함수)
let apple = {
  name: 'apple',
  'hello-bye': '✋',
  0: 1,
  ['hello-bye1']: '✋',
};

// 속성 데이터에 접근하기 위해서는 
apple.name; // 마침표 표기법 dot notation
console.log(apple['hello-bye1']); // 대괄호 표기법 bracket notation
apple['name'];

// 속성 추가
apple.emoji = '🍎';

// 속성 삭제
delete apple.emoji;

객체 동적 접근

const obj = {
 name: '엘리',
 age: 20,
};
// 코딩하는 시점에 정적으로 접근이 확정됨
obj.name;
obj.age;

// 동적으로 속성에 접근하고 싶을 때 대괄호 표기법 사용
function getValue(obj, key) {
 return obj[key];
}
console.log(getValue(obj, 'name')); // 엘리

function addKey(obj, key, value) {
 obj[key] = value; 
}
addkey(obj, 'job', 'engineer');
console.log(obj); // job 추가

function deleteKey(obj, key) {
 delete obj[key];
}
deleteKey(obj, 'job');
console.log(obj); // job 제거

객체 축약

const x = 0;
const y = 0;
const coordinate = { x: x, y: y }; // { x, y };로 축약가능
console.log(coordinate); // {x: 0, y: 0} 

function makeObj(name, age) {
  return {
    name,
    age,
  };
}

객체 안의 함수

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

생성자 함수

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

const orange = {
  name: 'orange',
  display: function () {
    console.log(`${this.name} : 🍊`);
  },
};
// 객체를 생성할 때 비슷한 양식을 만들 경우 특정한 템플릿에 맞게 
// 객체를 쉽게 만들어주는 생성자 함수를 이용하면 비교적 간편하게 사용할 수 있다.

// 생성자 함수
function 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 Furit('orange', '🍊');