[JavaScript_study] 객체란?

* 객체 (Object)란?

  > 서로 연관있는 속성과 행동을 묶어 준다.
  > 속성 : 데이터(프로퍼티//Property)
  > 행동 : 함수(메서드//method)
  > 객체란 순수 데이터 객체도 있고 상태와 행동 객체도 있다.
  > 밀접하게 관련 있는 상태와 행동을 객체로 묶어야 한다.

 

// 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 = '🍎';
console.log(apple.emoji);
console.log(apple['emoji']);

// 속성 삭제
delete apple.emoji;
console.log(apple);

 

* 객체에 동적으로 속성에 접근하고 싶을때 대괄호 표기법 사용!

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);

function deleteKey(obj, key) {
  delete obj[key];
}

* 객체 작성 축약

  > key와 value값이 동일하면 key값만 작성해주어도 된다. (축약)

const x = 0;
const y = 0;
const coordinate = { x, y }; //{ x: x, y: y };
console.log(coordinate);

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

console.log(makeObj(x,y)) // {name: 0, age: 0}

 

* 행동 : 함수(메서드//method)

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

apple.display();

 

* 생성자 함수 (constructor function)

  > 재사용 가능한 코드를 묶음으로 사용하는 것 외에 객체를 생성 하기 위한 방법으로도 사용된다.

// 비슷한 패턴의 객체형태를 띄고 있을때 하나하나 객체를 만들지 않고 생성자 함수를 이용하여
// 효율적으로 객체를 만들어 낼수 있다.
// const apple = {
//   name: 'apple',
//   display: function () {
//     console.log(`${this.name}: 🍎`);
//   },
// };

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



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

console.log(apple);
console.log(orange);
console.log(apple.name);
console.log(apple.emoji);
apple.display();