Object(객체)

Object(객체)
이번에는 Object 타입을 배울 차례입니다.
아래의 표를 구현한다고 하면

자바스크립트 언어로 이 데이터를 구현하려면 , 아래와 같이 데이터를 저장해야 한다.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

이 중에서 하나의 plan을 선택하면 아래와 같이 alert를 띄워주면

alert(plan2Name + "플랜 가격은 한 달에 " + plan2Price + "달러입니다.")

이런 식으로 하면 데이터가 늘어나서 코드가 길어져서 관리하기 어렵다.
이런 유형의 데이터는 Object(객체)로 표현할 수 있다. 위의 데이터를 Object에 맞게 다시 표현 해 보면

이 표를 보면
plan1, plan2, plan3라는 Object가 있다.
각 object는 name, price, space, transfer, pages라는 5개의 property가 있다.
name 이라는 property의 데이터값은 String 형이고, 나머지 4개의 property는 Number이다.
이렇게 object를 사용한 데이터는 아래와 같이 alert메시지를 바꿀 수 있습니다.

alert(plan2.name + "플랜 가격은 한 달에 " + plan2.price + "달러입니다.")

이제 객체 선언과 사용법을 배워보겠습니다.

1. 객체는 {} 중괄호로 감싸져 있고,
2. 콜론으로 구분관 이름/값 쌍들이
3. 쉼표로 분리된 목록의 형태이다.

쉽게 말해 객체는 이름과 값으로 구성된 property들의 집합이다.

위에서 property이름 1,2,로 나눴는데 property이름은 중복 안되서 숫자를 달리함.

plan1의 Object를 만들어 보면

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

아래의 규칙을 지켜서 객체를 만들 수 있다.
1. property이름은 중복 안됨
2. property이름과 property값 사이에 :(콜론)으로 구분한다.
3. property를 추가할 대는 ,(쉼표)를 붙여준다.
4. property 값에는 어느 type이나 가능하다(string, number, array, object, function...)

해당 객체의 property값을 접근하고 싶을 때는 아래와 같다.

1. 마침표(.)연산자를 사용하며, 접근하려는 객체명은 왼쪽에 property 명은 오른쪽에 위치한다.
2. 대괄호([ ])를 사용하여, 접근하려는 객체명은 왼쪽에, property명은 쌍따옴표("")와 함께 대괄호 안에 작성.

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name);
console.log(plan1["name"]);

마침표(.)로 접근하는 것이 편할 것 같지만
대괄호 안에는 변수가 들어 갈 수 있다.
ex) plan1 객체의 name이라는 property에 접근하고 싶을 때.

let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]);

아래의 코드에서 어떻게 객체의 프로퍼티에 접근했는지 확인해주세요.

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

let name = "property";
console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);
1ole.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);

직접 코드를 작성해서 테스트해보고, 이해되지 않는 것이 있으면 질문해주세요!

위의 myObj 객체를 정의한 후에 property 값을 수정할 수 있습니다.

let name = "property1";

myObj[name] = ["hi", "hello"];


myObj객체의 property1의 값은 원래 텍스트였는데 (hello)배열로 바꿔보았습니다.
myObj가 어떻게 바꼈는지 꼭 확인해보세요.
nsole.log(myObj);
혹은 새로운 property를 추가할 수도 있습니다.

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