객체에 대해 알아보자

객체

객체(Object)란 여러 속성을 하나의 변수에 저장 할 수 있는 데이터 타입이다
객체는 key / value로 값을 저장하며 key를 통해 value에 접근한다
( 타 언어의 딕셔너리같다 )

---

객체를 생성해 보자

const obj = {
  name: "jcy",
  age: 28,
  interests: ["game", "music"], // array도 가능
  dog: { name: "dona", type: "Maltese" }, // object도 가능
  greetings: () => console.log(`hi i'm ${obj.name}`), // 함수도 가능
};

// 객체는 object.key의 형태로 해당 value에 접근한다
console.log(obj.name); // "jcy"
console.log(obj.age); // 28
console.log(obj.interests); // ["game, "music"]
console.log(obj.greetings()); // "hi i'm jcy"

객체는 keyward objName = { }의 형태로 생성하며,
위 코드에서 name, age 같은 것을 프로퍼티(속성)이라 하며 greetings 같은 함수는 메소드라고 한다

---

표기법

객체는 아래의 두 표기법을 통해 객체의 프로퍼티에 접근이 가능하다

• 점 표기법
  obj.name
obj.age
  등 과 같이 .으로 표기하는 방법
• 괄호 표기법
  obj['name']
obj['age']
  등 과 같이 ['key']로 표기하는 방법 ( 단, key를 string으로 전달해줘야함)

둘의 차이점은 무엇인가요? 🤔

점 표기법은 객체 프로퍼티를 설정 할 때

const name = "JCY"
const obj = {};
obj.name = name;
console.log(obj); // {name:"JCY"}

와 같이 프로퍼티 이름에 상수 이름만 사용이 가능하지만

괄호 표기법은

const name = "JCY"
const obj = {};
obj[name] = name;
console.log(obj); // {JCY:"JCY"}

이름에도 변수를 사용 할 수 있다

---

this

this 키워드는 현재 동작하고 있는 코드를 가지고 있는 객체를 가르킨다

const obj = {
  id: "mango",
  getId: function () {
    console.log(`id = ${this.id}`); // this = obj을 가르킴
  },
};
obj.getId(); // "id = mango"

주의사항❗️
화살표 함수의 this는 undefined을 반환한다

const obj = {
  id: "mango",
  getId: () => {
    console.log(`id = ${this.id}`);
  },
};
obj.getId(); // "id = undefined" // undefined가 나온다

---

Methods

객체의 몇 가지 정적 메서드를 알아보자

keys

Object.keys(object)
object의 key들을 가져온다

const obj = {
  name: "jcy",
  age: 28,
  id: "mango",
};

console.log(Object.keys(obj)); // ["name", "age", "id"]

values

Object.values(object)
object의 value들을 가져온다

const obj = {
  name: "jcy",
  age: 28,
  id: "mango",
};

console.log(Object.values(obj)); // ["jcy", 28, "mango"]

freeze

Object.freeze(object)
object를 얼려 더 이상 변경될 수 없게 한다

const obj = {
  name: "jcy",
  age: 28,
  id: "mango",
};

Object.freeze(obj); // 동결
obj.id = "banana"; // 변경
obj.password = 20210807; // 추가
delete obj.age; // 삭제
console.log(obj); // {name: "jcy", age: 28, id: "mango"}

seal

Object.seal(object)
object를 밀봉시켜 프로퍼티를 추가하거나 삭제하지 못하게 한다
freeze와 차이점은 seal은 프로퍼티 값의 변경이 가능하다는 것이다

const obj = {
  name: "jcy",
  age: 28,
  id: "mango",
};

Object.seal(obj);
obj.id = "banana"; // 변경 (seal에선 가능)
obj.password = 20210807; // 추가
delete obj.age; // 삭제
console.log(obj); // {name: "jcy", age: 28, id: "banana"}

끝! 🌼