[JavaScipt 기본] 객체(object)

자바스크립트에서 객체는 "하나의 관련된 값들을 묶어놓은 것" 이라고 보면 됨

`이름`, `나이`, `직업`처럼 어떤 대상을 표현할 때 쓰는 것이 객체

---

1. 객체 생성하기

// (1) 생성자로 만드는 법
let obj1 = new Object();

// (2) 리터럴로 만드는 법 -> 이거 제일 많이 씀
let obj2 = {};

 

---

2. 객체 프로퍼티(속성)

let person = {
  name: "도서",     // key: value
  age: 27,
  hobby: "독서",
  job: "개발자",
  extra: {},
  10: 20,           // 숫자도 key가 될 수 있음 (내부적으로는 "10" 문자열로 저장됨)
  "like cat": true, // 공백 있는 key → 반드시 따옴표로!
};

포인트

• `ket`는 기본적으로 문자열로 저장됨
• 변수명으로 쓸 수 없는 형태(공백, 기호 포함)면 반드시 따옴표로 감싸야 함
• 숫자 key도 가능하지만 `person[10]`처럼 써야함

---

3. 프로퍼티 다루기

 

3.1 프로퍼티 읽기 (점 표기법 vs 대괄호 표기법)

let name = person.name;   // 점 표기법
console.log(name);        // "도서"

let age = person["age"];  // 대괄호 표기법
console.log(age);         // 27

let property = "hobby";
let hobby = person[property]; // 변수로 접근할 때는 무조건 대괄호
console.log(hobby);       // "독서"

• 점 표기법 : `person.name` -> key가 정상적인 식별자인 경우
• 대괄효 표기법 : `person["like cat"]`, `person[key변수]` ->
  
  • 공백 있는 key
  • 숫자 key
  • 변수로 key를 다룰 때
• 없는 프로퍼티에 접근하면 `undefined` 출력

---

3.2 프로퍼티 추가

person.location = "화성시";          // 점 표기법
person["favoriteFood"] = "라면";     // 대괄호 표기법

---

3.3 프로퍼티 수정

person.job = "학생";
person["favoriteFood"] = "떡볶이";

---

3.4 프로퍼티 삭제

delete person.job;
delete person["favoriteFood"];

---

3.5 프로퍼티 존재 여부 확인 (`in` 연산자)

let result1 = "name" in person; // true
let result2 = "cat" in person;  // false

---

4. 상수 객체(`const`)도 속성 변경 가능

const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

animal.age = 2;         // 추가 가능
animal.name = "초롱이"; // 수정 가능
delete animal.color;    // 삭제 가능

// animal = "123"; 완전히 다른 값을 다시 넣는 건 불가능

• 왜 가능함?
  • `const`는 "변수가 다른 값을 가리키는 것"만 막음
  • 객체 안에 들어있는 프로퍼티는 막지 않음
  • 완전 불변으로 만들고 싶으면 -> `Object.freeze(obj)`사용

const user = Object.freeze({
  name: "도서",
});
// user.name = "변경"; // 무시됨 (strict 모드면 에러)

---

5. 메서드

• 값이 함수인 프로퍼티를 "메서드"라고 부름

const person1 = {
  name: "이도서",
  sayHi: function () {
    console.log("안녕!");
  },
};

person1.sayHi();
person1["sayHi"]();

• 메서드 축약 문법

const person2 = {
  name: "김개발",
  sayHi() {
    console.log("hi");
  },
};