1. Objet(객체)란 무엇인가?

객체는 자바스크립트 데이터 타입 중 하나로, key값과 value값 을 가지고 있다.

1) 객체를 만드는 방법 : {key : value}

let mvpNominees = {
name(key) : 'Ohtani Shohei'(value),
team(key) : 'Los Angeles Angels'(value),
age(key) : 27(value)
}
console.log(mvpNominees) // 
[object Object] {
  age: 27,
  name: "Ohtani Shohei",
  team: "Los Angeles Angels"
}

let mvpNominess = {}
mvpNominess['name'] = 'Ohtani Shohei';
mvpNominess['team'] = 'Los ANgeles Angels';
mvpNominess['age'] = 27;
console.log(mvpNominess)

let mvpNominess = new Object()
mvpNominess['name'] = 'Ohtani Shohei';
mvpNominess['team'] = 'Los ANgeles Angels';
mvpNominess['age'] = 27;
console.log(mvpNominess)

👉 key point

(1) 결과값을 보면 작성한 순서와는 무관하게 출력이 되었으며, 객체는 배열과 다르게 순서가 중요하지 않다!

(2) 객체는 { key : value }(중괄호)를 이용해서 입력을 해야한다.( ↔ 배열 = [index0, index1, index2 ])

(3) key값이 여러개일 때는 쉼표(,)로 구분하여 준다.

2) 객체는 왜 필요할까??

객체로 표현하면 순서가 없기 때문에 원하는 key값만 알고 있다면 index number를 기억할 필요가 없다. ( ↔ 배열 )

3) 객체속성 접근 방법(Dot Notation & Bracket Notation)

(1) Dot Notaion

let mvpNominees = {
name : 'Ohtani Shohei',
team : 'Los Angeles Angels',
age : 27
}

- 오타니 쇼헤이 선수의 이름을 찾아보겠습니다.

let name = mvpNominess.name 
console.log(name) /// 'Ohtani Shohei'

- 이번에 나이를 찾아볼까요?

let age = mvpNominess.age
console.log(age) /// 27

👉 위 예시들처럼 선언된 변수에 . 하나를 찍어 키값을 이어서 붙여주면 ~~~ 완성! 참 쉽죠잉? 😉

👉 아주 아주 쉽고 간편하지만 변수에는 사용할 수 없고, 공백이 있다면 식별할 수 없다는 단점이 있습니다 꼭 확인합시다~!

(2) Bracket Notaion

let mvpNominees = {
name : 'Ohtani Shohei',
team : 'Los Angeles Angels',
age : 27
}

- 오타니 쇼헤이 선수의 소속팀을 찾아보겠습니다. 🤔🤔

let team = mvpNominess['team'] 
console.log(team) ///'Los Angeles Angels'

👉 선언된 변수에 [ ]를 씌워 키 값을 붙여주면 ~~~ 완성! 이것 또한 참 쉽죠잉? 😉

👉 위 Dot Notation과 반대로 이 친구는 변수에도 사용할 수 있고, 공백에도 무사히 값을 찾아주는 유용한 친구 입니다!

4) 객체를 다듬어 주는 방법

(1) 객체 수정

- 이름을 오타니 쇼헤이 선수가 아닌 류현진 선수로 수정해보도록 하겠습니다. 🤔

function mvp(){
let mvpNominees = {
name : 'Ohtani Shohei',
team : 'Los Angeles Angels',
age : 27
}
mvpNominees['name'] = '류현진'
return mvpNominees.name
}
console.log(mvp()) // "류현진"

👉 선언된 변수에 [ ]를 씌워 변경할 키값과 벨류값을 입력해주면 ~~~ 완성!😉

(2) 객체 속성 추가

- 오타니 쇼헤이 선수의 전직장을 추가해보도록 하겠습니다.😄😄

function mvp(){
let mvpNominees = {
name : 'Ohtani Shohei',
team : 'Los Angeles Angels',
age : 27
}
mvpNominees['career'] = 'Hokkaido Nippon-Ham Fighters'
return mvpNominees
}
console.log(mvp()) //
[object Object] {
  age: 27,
  career: "Hokkaido Nippon-Ham Fighters",
  name: "Ohtani Shohei",
  team: "Los Angeles Angels"
}

👉 이 역시도 선언된 변수에 [ ]를 씌워 새롭게 추가할 키값과 벨류값을 입력해주면 ~~~ 완성!!👍

(3) 객체 속성 삭제

- 오타니 쇼헤이 선수의 전직장을 삭제해보도록 하겠습니다.

function mvp(){
let mvpNominees = {
name : 'Ohtani Shohei',
team : 'Los Angeles Angels',
age : 27,
career : "Hokkaido Nippon-Ham Fighters"
}
delete mvpNominees.career
return mvpNominees
}
console.log(mvp())///
[object Object] {
  age: 27,
  name: "Ohtani Shohei",
  team: "Los Angeles Angels"

👉 추가/수정과 다르게 . 을 이용해서 delete 변수.키값 을 입력해서 삭제할 수 있다!

5) 객체 속 객체에게 접근하는 방법

- 예시코드

function accessObject() {
  let myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};
 let gloveBoxContents = myStorage["car"]["inside"]["glove box"]
  return gloveBoxContents;
}
console.log(accessObject()) /// "maps"

👉 이는 지금 myStorage 변수에서 "car","inside","glove box" 안에 있는 "maps"를 꺼낸 것으로 변수 gloveBoxContents를 보면 ['key값']을 이용하여 둘러 쌓여있는 객체들에게 접근한 모습을 볼 수 있다!🧐🧐

6) 객체 속 배열에게 접근하는 방법

- 예시코드

function accessArray() {
let myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];
let foundValue = myPlants[1]["list"][1]
return foundValue;
}
console.log(accessArray())

👉 먼저, 이 친구에게 접근할 때 나는 먼저 배열의 index를 먼저 생각해야 했으며, myPlants의 배열에 객체가 들어가있어 "flowers"가 들어있는 객체는 배열의 0번 index "trees"는 배열의 1번 index라고 생각하였다.

👉 그 후 1번 index의 list라는 객체 속에 들어가야겠다고 생각하여 ["list"]를 입력하였고, 마지막으로 list라는 배열 안에 "pine"을 찾기 위해 1번 index를 입력하였다.

7) 간단 소회

이번주는 객체를 공부하고 1~3주차까지 풀어봤던 레플릿 문제들을 모두 다시 풀어보았다.🧐
복습을 하니 내가 부족한 부분도 다시 알 수 있었고, 구름 속에서 있었던 흐릿했던 개념들이 조금이나마 구름을 걷고 나와주었다.(코햇반 조원 선생님들의 서포트 덕분!!🙏🙏)
매일 꾸준하게 공부할 수 있도록 지금의 루틴을 잘 유지하는 것도 나의 과제인듯 하다.
개강전까지 최대한 정확하게 내용을 이해하고 갈 수 있도록 복습을 철저히 하자.👊
나와 코햇반 조원들이 모두 화이팅💪하길 기원🙏하며 오늘은 여기까지!