클래스와 객체

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

객체란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 의미한다.

 

객체를 만들 때 마치 설계도처럼 사용하는 것이 클래스다. 그래서 흔히들 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 한다.

함수를 정의하고 해당 함수를 필요할 때 계속 사용할 수 있었던 거처럼 마찬가지로 클래스를 미리 정의해 놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.

 

1. class 키워드와 클래스명

class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나온다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름을 사용하면 좋다.

 

2. 생성자 (constructor)

중괄호 안에는 생성자라는 것을 적어준다. 생성자도 함수와 비슷한 부분이 많은데 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 된다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 이다. 

 

3. this와 속성(property)

생성자의 바디를 보면 this 라는 키워드가 등장한다. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것이다.

 

const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

 

함수의 경우는 미리 선언한 함수를 호출 할 때 ex) 함수명(매개변수들 ...)로 호출을 하지만 클래스를 호출할 때에는 

new 클래스명(매개변수들...) 과 같이 호출한다.

 

위의 코드는 객체를 생성한 것이다. 클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 함수처럼 호출하면서 매개변수 값을 전달해주면 된다. 그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 각 객체의 속성들에 매개변수 값들이 할당된다.

만들어진 객체는 변수에 할당해주고 기본 타입의 데이터들을 변수에 할당하면 변수를 사용해 해당 데이터에 접근할 수 있다. 

객체의 속성 하나하나에 접근해 데이터를 가져와야 할 때는 아래와 같이 this.속성명을 사용한다. 

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name) // MacBook
console.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple

 

 

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

클래스 명을 Product로 선언한 후 매개변수에 name, price를 설정한 후 printInfo라는 메소드를 설정했다. 

notebook 이라는 변수에 Product 클래스를 호출하여 매개변수를 넣은 후 

notebook.printInfo( ) 명령어로 Product의 printInfo 메소드를 실행하게 되면 위와 같이 출력이 된다. 

주의해야 될 점은 꼭 메소드 뒤에 ( ) 를 넣어주어야 정상적으로 작동한다. 

 

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

computer.printInfo()

 

객체 리터럴(Object Literal)

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이다. 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주어야 한다. 

 

const 변수명 = {

속성명: 데이터,

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

}

 

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 그렇다면 왜 굳이 복잡하게 클래스를 정의할까? 바로 재사용성 때문이다.

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