우리 실생활에서 객체(Object)란 사람, 자동차, 강아지처럼 실제로 존재하는 사물을 말한다. 이것은 자기 자신의 속성을 가지고 있으며 다른것과 식별이 가능해야한다. 그렇다면 JavaScript에서 객체는 어떻게 쓰일지 한 번 알아보자.

객체

객체(Object)는 여러 속성들을 하나의 변수에 담아 저장할 수 있도록 도와주는 데이터 타입이다

객체를 이해하기 위해 서랍장을 한 번 떠올려보자.

서랍장 속 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하면 쉽게 객체를 이해할 수 있다. 우리가 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있게 된다. 프로퍼티에 대한 추가나 삭제도 마찬가지다.

참고로 자바스크립트는 객체 기반의 언어로, 자바스크립트를 이루고 있는 거의 모든것이 이러한 객체이다. 객체의 프로퍼티 값으로 함수가 올 수도 있는데, 이러한 프로퍼티는 메서드(method)라 부르는 점도 알아두자.

객체 만들기

객체를 만들때에는 중괄호{…}를 이용해서 만든다.
중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데 키엔 문자형, 값엔 모든 자료형이 허용된다. 빈 객체를 만드는 방법에는 크게 두가지가 있다.

객체 리터널 방식(Object Literal)

: 중괄호{…}를 이용해 객체를 선언하는 방식이다. 객체를 선언할 때 주로 사용되는 방식으로, 중괄호{…} 안에 키(key): 값(value)를 쉼표(,)로 구분하여 만든다.

객체 리터널 방식으로 user라는 이름을 가진 객체를 만들어보자.

let user = { 
   name: 'Seoyeon', 
   age: 20, 
  
   func: function(){ 
     console.log('Nice to meet you');
   };
};

객체 user가 생성되었다. 여기서 name과 age는 프로퍼티이며, func는 메서드이다.

생성자 함수 방식(Constructor)

우리가 개발을 하다보면 비슷한 객체 여러개를 만드는 상황이 올 때가 있는데 보통 이럴때 생성자 함수 방식을 사용한다. 생성자 함수 방식은 아래의 관례를 따른다.

• 함수 이름의 첫 문자는 대문자로 쓴다
• 기존 함수에 new연산자를 붙여 호출하면 해당 함수는 생성자 함수로 동작한다

생성자 함수의 방식에 대해 쉽게 이해하기 위해 한가지 예를 들어보겠다.
우리가 겨울철 즐겨먹는 붕어빵을 찍어내는 붕어빵 틀을 한 번 떠올려보자. 붕어빵 틀은 우리가 필요한 재료들을 넣고 똑같은 모양으로 찍어내는데, 생성자 함수 방식이 바로 이러한 방식이라고 생각하면 이해하기 쉽다.


생성자 함수 방식으로 Item이라는 이름을 가진 상품 객체를 만들어보자.

function Item(title, price){
  //this = {};
  
  this.title = title;
  this.price = price;
  this.showPrice = function(){
    console.log(`가격은 ${price}원 입니다.`);
  };
  
  //return this;
}

객체가 완성이 되었다. 이제 원하는 필요 값들을 넣어 콘솔창에 출력해보자.

const item1 = new Item("인형",3000);
const item2 = new Item("가방",4000);
const item3 = new Item("지갑",9000);

console.log(item1, item2, item3);

객체 안의 메서드에 접근하면 다음과 같이 나오게된다.

item.showPrice();

확실히 매번 내가 필요한 것들을 일일히 만드는 것 보다, 이렇게 객체를 만들고 내가 필요한 값들을 넣어 사용하는 방식이 편리할 것 같다. 다음번 글에서는 이렇게 만들어진 객체의 프로퍼티에 접근하는 방법에 대해 알아보겠다😊