[Javascript] #4 Object

1. 객체란 무엇이며 필요한 이유

(1) 객체란? 여러 종류의 데이터를 묶음으로 관리하는 데이터 타입.
(2) 필요한 이유? 객체에 저장 된 데이터를 이용해 복잡한 객체로 조합하여 이용할 수 있다.

2. 객체에서 property, key, value

let mySelf = {name: "Code Lee"};
// name : "Code Lee" => property(key/value pair)
// name => key or property name
// "Code Lee" => value or property value

3. 객체에 접근 하는 두 가지 방법

(1) Dot notation -> 표현법: variable.key

 let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};
console.log(car.make); // output: "Tesla"
console.log(car.model); // output: "Model 3"
console.log(car.year); // output: "2022"

(2) Bracket notation -> 표현법: variable['key']

 let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};
console.log(car['make']); // output: "Tesla"
console.log(car['model']); // output: "Model 3"
console.log(car['year']); // output: "2022"

(3) Dot notation, Bracket notation 의 차이

 let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};
let myKey = "make";
console.log(car.myKey); // output: Undefined
console.log(car[myKey]); // output: "Tesla"

=> 객체 안의 Key를 Variable로 설정한다. let myKey = "make";
Variable 이용해 Dot notation, Bracket notation 으로 객체에 접근하다.
Dot notation은 value 값을 불러올 수 없고, Bracket notation은 value 값을 불러 올 수 있다.

4. 객체의 값을 추가,수정, 삭제하는 방법

(1) 추가

let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};

car.style = "Sedan"; // 객체 안의 새로운 property name과 value 값을 넣는다.

console.log(car);
// output:
[object Object] {
  make: "Tesla",
  model: "Model 3",
  style: "Sedan",
  year: 2022
}

(2) 수정

let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};

car.model = "Model Y"; // 객체 안의 기존의 property name의 value 값을 수정한다.

console.log(car);
// output:
[object Object] {
  make: "Tesla",
  model: "Model Y",
  year: 2022
}

(3) 삭제

let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
};

delete car.year;  // delete + property name을 선언해 key와 value 값을 삭제한다.

console.log(car);
// output:
[object Object] {
  make: "Tesla",
  model: "Model 3"
}

5. 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

let myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ]
    }
  ];
// "rose", "birch" 접근하는 방법
console.log(myPlants[0].list[0]); 
// myPlants 배열의 첫 번째 Index -> myPlants[0]
// myPlants[0]의 property name 'list' -> myPlants[0].list
// myPlants[0].list 배열의 첫 번째 Index -> myPlants[0].list[0]
console.log(myPlants[1].list[2]);
// myPlants 배열의 두 번째 Index -> myPlants[1]
// myPlants[1]의 property name 'list' -> myPlants[1].list
// myPlants[1].list 배열의 세 번째 Index -> myPlants[1].list[2]

6. 배열의 타입이 객체인 이유

함수, 배열을 포함한 모든 데이터 형식은 유형의 객체이다.

let arr = [2,4,6,8]
let obj = {type: "serviceBot", valid: true }
// 배열과 객체의 타입을 묻는 질문
console.log(typeof arr) // output: object
console.log(typeof obj) // output: object
// 배열과 객체가 배열인지 묻는 질문
console.log(Array.isArray(arr)) // output: true
console.log(Array.isArray(obj)) // output: false