클래스와 객체

객체?

• 사전적 의미,, : 물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것

  예를 들어!
  노트북 전문 쇼핑몰이 있다. 각 해당 상품에는 이름, 가격, 제조사라는 데이터를 가지고 있다.
  노트북 상품은 많고 각 값은 다른데 이름, 가격, 제조사라는 속성은 다 동일하게 가지고 있을 때 그 데이터들을 묶어서 하나로 표현하는게 쉽지 않기 때문에 이 때 사용하는 데이터 타입이 바로 객체다!
  아래 예시를 살펴보면 노트북1은 이름, 가격, 제조사라는 각 속성을 가지고 있고 다른 노트북과는 다른 본인 고유의 것이기 때문에 객체로 나타낼 수 있는 것
  (오케이,,말로 설명하면 이해하기 왕왕 어려움..적는 나도 어려움..차근차근 보자..)

  const notebook1Name = 'Macbook'
  const notebook1Price = 2000000
  const notebook1Company = 'Apple'

클래스?

• 객체를 만들 때 설계도처럼 사용하는 것이 바로 클래스!
• 클래스는 템플릿이고 객체는 이를 구체화한 것이라고 생각하면 편함
• 함수와 같이 클래스를 미리 정의해놓으면 필요할 때마다 동일한 모양의 객체를 만들 수 있다.

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

constructor? (생성자)

• 중괄호 안에 생성자를 적게되는데 생성자는 말 그대로 객체가 생성될 때 자바스크립트 내부에서 호출되는 함수라고 생각하면 됨!

this?

• this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
• 생성자의 바디에서 함수 호출 시 전달할 매개변수 name, price, company를 객체의 속성 (this 뒤에 있는) name, price, company에 각각 할당하는 것

객체 만들기

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

클래스명을 함수처럼 호출하면서 매개변수값을 전달해주면 됨! 그러면 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값이 할당된다.

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

notebook1이라는 변수를 만들면서 생성했던 클래스인 notebook을 호출되면서 객체 notebook1이 생성, 클래스-생성자에서 정의했던 속성들에 매개변수값이 할당된다.

만약! 각 속성 하나하나의 데이터를 가져와야한다면

console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple

요렇게 해주면 각 데이터의 값을 가지고 올 수 있다.

메소드

• 클래스에는 데이터값을 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다.

//클래스 정의
class notebook {
    constructor (name, price, company) {
        this.name = name
        this.price = price
        this.company = company
    }

  //메소드(함수같이 생김)
    printInfo() {
        console.log(`name : ${this.name}, price : ${this.price}, company : ${this.company}`)
    }
}

//객체 생성
const notebook1 = new notebook('macbook', 2000000, 'apple')
//메소드 호출
notebook1.printInfo()  //name : macbook, price : 2000000, company : apple

객체 리터럴

• 객체 리터럴을 이용하여 클래스를 별도로 정의해주지 않고 빠르게 객체를 만들 수 있다.
• 속성과 메소드가 여러개일 경우 쉼표로 구별

const 변수명 = {

속성명: 데이터,

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

}

const computer = {
    name: 'macbook',
    price: 2000000,
    company: 'apple',
    printinfo: function() {
        console.log(`name : ${this.name}, price : ${this.price}, company : ${this.company}`)
    }
}

computer.printinfo()  //name : macbook, price : 2000000, company : apple

결과적으로는 클래스를 활용하여 객체를 만든 것과 값이 동일하게 나온다.
클래스를 정의해주는 이유는 재사용성 때문이고 상품이 여러개 있고 동일한 속성을 가질 경우 하나의 클래스를 정의하여 적용함으로써 보다 간결한 코드를 만들 수 있다.