메소드 (method) & 객체 리터럴(Object Literal)

1️⃣ 메소드 (method)

클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 [메소드]도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 [메소드]를 호출하면 된다.

// 클래스 선언
class Product {
     constructor(name, price) {
          this.name = name
          this.price = price
     }

   printInfo() {  // 함수와 같이 특정 코드를 실행할 수 있는 메소드
       console.log(`상품명: ${this.name}, 가격: ${this.price}원`) // 템플릿 리터럴을 활용해 가지고 있는 객체의 속성들을 찍어줌.
   }
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

 

2️⃣ 객체 리터럴(Object Literal)

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각하면 된다. 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

 

const 변수명 = {

   속성명: 데이터,

   메소드명: function () { 메소드 호출시 실행할 코드들 }

}

 

const computer = {
     name: 'Apple Macbook',
     price: 20000,
     printInfo: function () {
          console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
     }
}

computer.printInfo()

 

name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드다. 해당 객체의 printInfo 메소드를 바로 호출.

 

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까? 바로 재사용성 때문이다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.

 

 

👍 Q. 의류 쇼핑몰을 만들려고 할 경우, 옷의 종류는 많지만 기본적으로 색깔, 사이즈, 가격의 속성을 갖고 있다. 그리고 이 옷들의 세 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요할 거 같다. 클래스와 객체를 활용해 작성해보면.

class Cloth {
     constructor(color, size, price) {
           this.color = color
          this.size = size
          this.price = price
}

printInfo() {
     console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
}
}

const shirts = new Cloth('white', 'M', '50000')
const coat = new Cloth('navy', 'L', '200000'

shrits.printInfo()
coat.printInfo()