object (객체)

● Object (객체)

객체란?
ㄴ 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있습니다.

👉 객체는 중괄호{}로 감싸져 있고,
👉 콜론으로 구분된 이름/값 (키/값) 쌍들이
👉 쉼표로 분리된 목록의 형태 입니다.

객체를 만들자면 아래와 같습니다.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

객체에는 아래와 같은 규칙이 있습니다.

👉property 이름은 중복될 수 없다.
👉property 이름과 property값 사이에 : (콜론)으로 구분합니다.
👉property를 추가할 때는 , (쉼표)를 붙여준다.
👉property 값에는 어느 type이나 가능하다 (string, number, array, object, function 등)

객체의 property값에 접근하고 싶을 때는 아래와 같습니다.

👉 . (마침표) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, property이름은 오른쪽에 위치합니다.
👉 를 사용하여 , 접근하려는 객체명은 왼쪽에, property명은 “”(쌍따옴표)와 함께 대괄호 안에 작성합니다.

ex)
let plan1 = {   
  name: "Basic"
};

console.log(plan1.name);
console.log(plan1["name"]);
// 결과 Basic

아래 코드대로 연습 해보면서 적응해보자.

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property";
console.log(myObj[name+"1"]); // 결과 hello
console.log(myObj[name+"2"]); // 결과 [1,2,3,4,5]
console.log(myObj[name+"3"]); // 결과 { childproperty: 'haha' }
console.log(myObj[name+"3"]["child"+name]); // 결과 haha  (property3 > childproperty > haha)

console.log(myObj.property1); // 결과 hello
console.log(myObj.property2); // 결과 [1,2,3,4,5]
console.log(myObj.property3); // 결과 { childproperty: 'haha' }
console.log(myObj.property3.childproperty); // 결과 haha  (property3 > childproperty > haha)

위 코드를 보고 이해할 수 있는것.
👉 안에는 변수가 들어갈 수 있다.
👉 .(마침표)로는 변수를 이용해서 값을 불러올 수 없다.

객체를 변경 , 추가 할 수 있습니다.

[변경]
let name = "property1";

myObj[name] = ["hi", "hello"];
or
myObj.property1 = ["hi", "hello"];

console.log(myObj); 
/*결과 
{ property1: [ 'hi', 'hello' ],
  property2: [ 1, 2, 3, 4, 5 ],
  property3: { childproperty: 'haha' } }
*/

[추가]
myObj.property3.siblingproperty = [3, 6, 9];
console.log(myObj);

/*결과 

{ property1: [ 'hi', 'hello' ],
  property2: [ 1, 2, 3, 4, 5 ],
  property3: { childproperty: 'haha', siblingproperty: [ 3, 6, 9 ] } }
*/

[배열에 접근하기]
console.log(myObj.property1[0]); // myObj > property1 > 0번째 index > hi
// 결과 hi

조금더 배워보자 .

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

console.log(objData);

let bookName = objData.books.info[1];
// objDate > books > info의 ‘2번째’ index 를 불러옴.
console.log(bookName);

/*
{ name: 'HTML Guide', price: 19000, author: 'Kim, gae bal' }
*/

출처:Wecode