객체 (object)

객체 - { } 안에 데이터을 배열 해놓은 자료형
객체 안에 데이터들을 property(프로퍼티) 라고 한다.
객체에서 property 값은 key:value 의 형태로 구성되어있다.
객체에는 순서가 정해져있지 않다.

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

객체 속성 접근하는 방법

Dot Notation

마침표 연산자(.)를 사용해서 객체에 접근

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

console.log(myDog.name)      // "happy"
console.log(myDog.friend)    // ["wecode", "james"]

Bracket Notation

대괄호([ ])를 사용해서 객체에 접근
[] 안에 key 값을 넣을때 ' ' 안에 넣어야됨

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

console.log(myDog['name'])      // "happy"
console.log(myDog['friend'])    // ["wecode", "james"]

Dot Notation과 Bracket Notation 차이점

Dot Notation의 특징

• key 값을 변수로 지정했을때 불러올 수 없다.
• 숫자로 시작하는 key 값 불러올 수 없다.
• 띄어씌기가 있는 key 값 불러올 수 없다.

Bracket Notation의 특징

• 위의 항목 모두 가능

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}
// 객체의 key 값은 기본적으로 string 형태이다. (" ")가 생략되어 있음. 넣어도 상관없다.
let example = 'color'  // 'color' 라는 key 값을 example 이라는 변수에 할당

console.log(myDog.example)    // undefined
// 위의 코드는 myDog 객체에 example 이라는 key 값을 찾아서 그 value 값을 반환하지만
// example 이라는 key 값은 존재하지 않으므로 value 값도 존재하지 않아서
// undefined 반환

console.log(myDog[example])   // "white"
// Bracket Notation은 key 값을 변수에 할당하고 그 변수로 value 값을 불러올수있다.

객체 안에 있는 객체,배열에 접근

// 객체 안에 있는 객체 접근
let myStorage = {
    "car": {"inside": {"glove box": "maps","passenger seat": "crumbs"},
            "outside": {"trunk": "jack"}
           }
}

//glove box의 value 값 출력
let gloveBoxValue = myStorage['car']['inside']['glove box']
console.log(gloveBoxValue)   // "maps" 출력
----------------------------------------------------------------
// 객체 안에 있는 배열 접근
let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}
// myDog의 friend의 배열에서 2번째 요소 출력
let friendSecondValue = myDog['friend'][1]
console.log(friendSecondValue)  // "james" 출력

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

객체의 값 추가

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

myDog.tails = 1;  // myDog['tails'] = 1 로 해도 같은 결과
console.log(myDog)
/* 출력 결과 - tails: 1 이라는 property 가 추가되었다.
[object Object] {
  bark: "woof",
  color: "white",
  friend: ["wecode", "james"],
  legs: 4,
  name: "happy",
  tails: 1
}
*/

객체의 값 수정

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

myDog.color = "black";  // myDog["color"] = "black"로 해도 같은 결과
console.log(myDog)
/* 출력 결과 - color: "black" 으로 수정되었다.
[object Object] {
  bark: "woof",
  color: "black",
  friend: ["wecode", "james"],
  legs: 4,
  name: "happy"
}
*/

객체의 값 삭제

delete 를 이용해서 객체의 값을 삭제 한다.

let myDog = {
  name: "happy",
  legs: 4,
  color: "white",
  bark: "woof",
  friend: ["wecode", "james"]
}

delete myDog.bark;  // delete myDog['bark']로 해도 같은 결과
console.log(myDog)
/* 출력결과 bark: "woof" 가 삭제되어서 출력
[object Object] {
  color: "white",
  friend: ["wecode", "james"],
  legs: 4,
  name: "happy"
}
*/