자바스크립트(10) 클래스와 객체 -2

자바스크립트 강의 

 

개발일지

학습 진행 내용

 

메소드 (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원

 

객체 리터럴(Object Literal)

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다.

객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각하면 됨.

2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고, 가독성을 위해서 줄바꿈도 해주는 게 좋다.

 

const 변수명 = {

속성명: 데이터,

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

}

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

computer.printInfo()

해당 코드는

• computer -> 변수명
• printInfo -> 메소드명
• name, price -> 속성

 

👉 즉, name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서

computer라는 변수에 할당하는 코드다.

 

해당 객체의 printInfo 메소드를 바로 호출까지 해보았다.

(결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다;)

 

그렇다면 왜 굳이 복잡하게 클래스를 정의했을까.

 

👉 바로 재사용성 때문이다.

(한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.)

 

 

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

 

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()