자바스크립트 Object (객체)

개발자 오오 2023. 5. 20. 18:45

안녕하세요. 저는 요즘 부트캠프 2차 팀프로젝트가 시작되어서 바쁜 하루를 보내고있습니다. 하지만!

자바스크립트 공부를 소홀히 할 수는 없기 때문에 자바스크립트 객체에 대해서 다시 찾아보고 공부하였습니다. 기초적이지만 중요한 내용을 정리해보겠습니다.

상기 이미지 파일에 정리된 데이터를 자바스크립트 변수에 담아 구현하려면, 아래와 같이 데이터를 저장할 수 있을 것 입니다.

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

이 중에서 하나의 plan을 선택하여 아래와 같이 alert 를 띄워주겠습니다.

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

만약 자세한 설명을 덧붙인다면,

alert("용량은 " + plan2Space + "GB이고, ...");

의 모습과 같이 해당 플랜에 대한 변수 나열이 필요합니다.

이 역시 데이터가 늘어나게되면 그에 비례하여 코드도 길어지고 관리하기도 힘들어지게 됩니다.

이런 유형의 데이터는 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 + "달러입니다.")

plan2.name 은 "Professional"이고, plan2.price 는 5.99입니다.

그렇다면 객체를 어떻게 선언하고, 사용할 수 있는지 좀 더 자세히 알아보겠습니다.

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);
console.log(plan1["name"]);

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

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

예를 들어 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명에 접근하려 하기 때문에 자바스크립트 컴파일 에러가 발생하는 것입니다.

저작자표시 비영리 변경금지 (새창열림)