[JS] Object(1)

const 객체명 = {
  property이름1: property1값,
  property이름2: property2값
}

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

다시 말하면 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있습니다.
위에서 property 이름을 1, 2로 나누었는데, 프로퍼티 이름은 중복이 되면 안 되기 때문에 숫자를 달리 하였습니다.

plan1이라는 객체를 만들었습니다.

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

아래의 규칙을 지켜 객체를 만들 수 있습니다.

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

해당 객체의 property값에 접근하고 싶다면 아래와 같이 접근할 수 있습니다.

• 마침표(.) 연산자를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치합니다.
• 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 작성합니다.

const plan1 = {   
  name: "Basic"
};

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

마침표(.)로 접근하는 것이 편해 보이는데 그렇다면 대괄호 표현은 언제 쓰는 것이 좋을까요?

대괄호 안에는 변수가 들어갈 수 있습니다.

예를 들어 plan1 객체의 name 이라는 프로퍼티에 접근하고 싶을 때, 다음처럼 접근할 수도 있습니다.

const plan1 = {   
  name: "Basic"
};

const propertyName = "name";

console.log(plan1[propertyName]);

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

const myObj = {
  property1: "hello, everyone",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "hi, everybody"
  }
};

const name = "property";

console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);

console.log(myObj.property1);
console.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);

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

const name = "property1";

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

console.log(myObj);

기존에 myObj객체의 property1 값은 텍스트였는데, 배열의 형태로 바꿔보았습니다.
myObj 가 어떻게 바뀌었는지 꼭 console.log로 직접 확인해주세요!
기존에 존재하던 property를 수정하는 것뿐만 아니라, 새로운 property를 추가할 수도 있습니다.

myObj.property3.siblingproperty = [3, 6, 9];

console.log(myObj);

추가한 property 값인 배열의 3이라는 요소에 접근하고 싶으면, 아래와 같이 접근할 수 있습니다.

console.log(myObj.property3.siblingproperty[0]);

조금 더 복잡한 구조의 객체를 함께 보겠습니다.

const 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"
    }]
  }
};

objData 라는 객체안에 name , address , books 라는 property가 있습니다.
books 에 또 객체가 할당 되었습니다.

위의 데이터에서 "HTML Guide" 에 접근하고 싶다면 아래와 같이 할 수 있습니다.

const bookName = objData.books.info[1].name;

console.log(bookName);

만일 books 라는 property명 대신에 's'를 빼고 book 이라고 작성한다면 어떤 결과가 나올까요?

🚨 바로 자바스크립트 컴파일 에러가 발생하게 됩니다.

const bookName = objData.book.info[1].name;

console.log(bookName);

objData.book 은 objData 객체의 book 이라는 property명에 접근해야 하는데, 해당 property명은 books의 오타로서 위에 정의되어있지 않은 값이므로, objectData.book은 undefined 가 됩니다.

이후 undefined의 info라는 property명에 접근하려 하기 때문에 자바스크립트 컴파일 에러가 발생하는 것입니다.

Object(2)

---

출처 : wecode