객체(object)란?

객체는 자바스크립트 데이터 타입 중의 하나로, 여러 속성을 하나의 변수에 저장할 수 있게 해준다. 배열과는 다르게 순서가 중요하지 않기 때문에 정보를 얻기 위해 Index number을 기억하지 않아도 된다.

객체의 필요성

• 관련있는 정보의 연결
• Index number없이 key값으로 정보에 쉽게 접근
• 코드 유지보수의 용이성

{key: value}

자바스크립트의 객체는 key 값과 key에 해당하는 데이터인 value 값이 쌍으로 이루어진 property로 구성된다. 객체는 {} 안에 key와 value를 쌍으로 묶어 만들고, key값이 여러개일 때는 ,로 구분한다.

객체 만들기

//객체 리터럴 : 변수처럼 객체 생성
let myself = {
  name : '안다빈',
  bloodType: 'A형',
  mbti: 'ENFJ',
};
console.log(myself);
//{ name : '안다빈', bloodType: 'A형', mbti: 'ENFJ'}

//생성자 함수
let myself = new Object()

myself.name = '안다빈';
myself.bloodType =  'A형';
myself.mbti = 'ENFJ';

console.log(myself);
//{ name : '안다빈', bloodType: 'A형', mbti: 'ENFJ'}

참고

객체 속성 접근

객체 속성 접근 방법은 dot notation과 bracket notation 두 가지가 있다.

dot notation

• key가 alphanumeric, _, $로 구성
• 숫자로 시작할 수 없다.
• variables를 포함할 수 없다.

bracket notation

• string이거나, string을 참조하는 variable
• variables, spaces 사용 가능하다.
• 숫자로 시작해도 가능하다.

let obj = {
    "hat": "ballcap",
    "shirt": "jersey",
    "shoes": "cleats"
  };

//dotNotation 
//마침표 연산자(.)를 사용하여 객체의 property 값에 접근
console.log(obj.hat) //"ballcap"
console.log(obj.shirt)  //"jersey"
//Bracket Notation
console.log(obj['hat']) //"ballcap"
console.log(obj['shirt'])  //"jersey"

//변수를 사용한 객체 속성 접근
let testObj = {
  12: "Namath",
  16: "Montana",
  19: "Unitas"
};

let playerNumber = 16;   
let player = testObj[playerNumber]
console.log(player); //"Montana"
//testObj.playerNumber은 undefined

객체 수정

let myDog = {
    "name": "Coder",
    "legs": 4,
    "tails": 1,
    "friends": ["freeCodeCamp Campers"]
  };

myDog.friends = ['dabin', 'ball']
console.log(myDog['friends']); //["dabin", "ball"]

myDog['name'] = '달링이'
console.log(myDog.name);//"달링이"

객체 속성 추가

let myDog = {
    "name": "Happy Coder",
    "legs": 4,
    "tails": 1,
    "friends": ["Wecode Bootcamp"]
  };
  
myDog['bark'] = 'woof'  // 또는 myDog.bark = 'woof'
console.log(myDog);
/*
{
  bark: "woof",
  friends: ["Wecode Bootcamp"],
  legs: 4,
  name: "Happy Coder",
  tails: 1
}
*/

객체 속성 삭제

let ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"],
 "bark": "bow-wow"
};
 
delete ourDog.bark; //또는 delete ourDog['bark']
console.log(ourDog);
/*
{
  friends: ["everything!"],
  legs: 4,
  name: "Camper",
  tails: 1
}
*/

중첩 객체 접근

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

중첩 객체에 배열이 포함되어 있을 때 접근법은 index number을 활용하는 것이다.

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

배열의 타입

console.log(typeof [1, 2, 3]) //"object"

어떤 생성자 함수이든 prototype(원형)은 반드시 객체기 때문에 Object.prototype이 언제나 프로토타입 체인 최상단에 존재한다. 배열의 프로토타입은 Array.prototype이고, 생략 가능한 __proto__를 따라 Object.prototype을 참조할 수 있다. 따라서 배열의 타입도 객체다.
https://velog.io/@dabin0219/코어-자바스크립트-06프로토타입-07클래스