JavaScript 클래스&객체

1. 객체(Object) 타입

• 관련 있는 데이터들을 묶어 한번에 나타낼 수 있는 데이터 타입

2. 클래스(Class) 선언

• 객체를 만들기 위해 공통된 속성들을 묶어 놓은 것
• 쉽게 말해 클래스는 붕어빵 틀, 객체는 붕어빵 틀로 찍어낸 붕어빵과 같다. 

3. 클래스&객체 예시

• 클래스 선언

• Notebook이라는 클래스를 선언
• constructor 는 생성자이고 함수와 비슷하게 매개변수를 설정할 수 있다. 
• 중괄호 블록 내부의 this는 객체 자신을 가리키는 키워드이고, name,price,company 는 이 객체의 속성을 의미한다.
• 노트북이라는 클래스에 이름,가격,제조사는 노트북이 가지고 있는 속성이라고 이해하면 된다.

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

• 객체 생성

• 클래스를 선언했으면 객체를 만들어야 한다. 붕어빵 틀에서 붕어빵을 찍어내듯 생성하면 된다. 

let notebook1 = new Notebook('MacbookPro',2570000,'apple')

• notebook1 이라는 변수에 new 클래스명을 입력하고 () 안에 매개변수를 입력한다. 위 클래스에서 매개변수 name,price,company 3개를 할당했기 때문에 3개의 매개변수를 입력해야 한다.

console.log(notebook1)

>> Notebook {name: 'MacbookPro', price: 2570000, company: 'apple'}

• 객체를 콘솔창에서 보면 매개변수의 값들이 출력되는걸 볼 수 있다. 

console.log(notebook1.name ,notebook1.price, notebook1.company)

>> MacbookPro 2570000 apple

• 객체의 속성 하나하나에 접근하기 위해선 객체명.속성 을 이용해 데이터 하나하나에 접근한다.

 

4. 메소드 

• 함수와 같이 특정 코드를 실행할 수 있는 메소드를 정의할 수 있다. 
• 사용 방법은 위와 동일하게 객체를 생성하고 메소드를 호출하면 된다.

class Product{
    constructor(name,price) {
        this.name = name
        this.price = price
    }
    productInfo(){
        console.log(`이 상품의 이름은 ${this.name}이고, 가격은 ${this.price} 입니다.`)
    }
}

let macbook = new Product('MacbookPro',2570000)


macbook.productInfo()

>> 이 상품의 이름은 MacbookPro이고, 가격은 2570000 입니다.

• constructor 생성자 블록 뒤에 productInfo()라는 메소드를 작성했다. 
• 이 메소드는 console.log() 명령을 수행하는 메소드이다. 
• macbook 객체를 생성하고 매개변수로 'MacbookPro',2570000을 할당했다. 
• macbook.productInfo()로 클래스 내부 메소드를 호출한다. 
• 매개변수의 값이 메소드로 잘 전달돼서 실행된걸 볼 수 있다.

 

5. 객체 리터럴(Object Literal)

• 객체 리터럴을 사용해 객체를 바로 생성할 수 있다. 
• 객체 리터럴의 기본 형태

let 변수명 = {
	속성명 : 데이터,
    메소드명 : function(){
    메소드 호출 시 실행할 코드
    }
}

let computer = {
    name : 'iMac',
    price : 2000000,
    computerInfo : function(){
        console.log(`이 상품의 이름은 ${this.name}이고, 가격은 ${this.price} 입니다.`)
    }
}
computer.computerInfo()

>> 이 상품의 이름은 iMac이고, 가격은 2000000 입니다.

• 클래스를 만들어 객체를 생성한 것과 동일하게 리터럴 메소드를 사용해 객체를 생서해서 실행시킬 수도 있다.