> For the complete documentation index, see [llms.txt](https://triplexlab.gitbook.io/vanilla-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://triplexlab.gitbook.io/vanilla-js/basics/09-prototype-class/es6-class.md).

# Class & Constructor & Method

## Class

```javascript
class Food {

}

export default Food;
```

클래스는 객체의 설계도다. 클래스의 내용을 바탕으로 인스턴스를 찍어낸다. 자바스크립트에서 클래스 선언은 아주 간단하다. 참고로 클래스 선언은 [hoisting](https://developer.mozilla.org/ko/docs/Glossary/Hoisting)되지 않는다는 점을 유의해야 한다. (맨 마지막 라인 `export default Animal`은 Animal.js 파일에서 Animal 클래스를 외부로 export하기 위한 코드다. 클래스 외에도 함수나 변수 등을 export할 때도 이를 사용할 수 있다.)

클래스 문법이 추가됐지만, 엄밀히 말하자면 진짜 클래스가 아니라 함수다. 그리고 자바스크립트에서 함수는 일급객체다. 즉, 자바스크립트에 새로운 객체지향 모델이 도입된 것은 아니고, 문법적으로만 클래스를 지원하게 된 것이다. 해당 콘텍스트에서 hoisting되지 않는다는 점만 빼면 위 코드는 `function Animal() { }`과 같다.

```javascript
// index.js
import Food from './Food ';

let anim = new Food();
```

다른 파일에서 Animal 클래스에 접근하려면 우선 Animal 클래스를 import해야 한다. (앞서 `export default Animal` 라인을 작성한 이유다.) `anim` 변수를 만들고 `new` 키워드를 통해 Animal을 생성할 수 있다. 여기서 `anim`은 Animal 클래스를 가리키는 레퍼런스 변수(Reference variable)이며, 인스턴스(Instance)라고 부른다. 그리고 이것이 바로 클래스라는 설계도를 이용해 인스턴스라는 개체를 생성하는 과정이다.

## Constructor(생성자)

```javascript
// Animal.js
class Food {
    constructor(name) {
    
    }
}

export default Food ;
```

클래스는 하나의 constructor를 가질 수 있다. constructor는 `new Animal();` 명령을 통해 실행되어 인스턴스를 초기화하는 역할을 한다. 또한 constructor에는 `name`처럼 매개변수를 둘 수도 있다. 만약 constructor를 명시하지 않는다면 비어있는 default constructor가 만들어진다. 굳이 빈 constructor를 만들 필요는 없다.

## Instance variable(인터페이스 변수)

```javascript
// Food .js
class Food {
    constructor(name) {
        this.name = name;
    }
}

export default Food;
```

클래스의 멤버 프로퍼티는 constructor 안에 선언한다. 다른 언어에서는 이를 인스턴스 변수(Instance variable)라고 부르지만, 앞서 언급했듯 클래스는 사실 함수고, 자바스크립트에서 함수는 객체이기 때문에 `this.name`은 변수가 아닌 프로퍼티(Property)다.

```javascript
// index.js
import Food from './Food ';

let anim = new Food ('Jake');
```

인스턴스를 생성할 때 매개변수를 넘겨줄 수 있다. \
`Food` 인스턴스의 프로퍼티 `name`의 값은 'Jake’다.

## Method

```javascript
// Animal.js
class Food {
    constructor(name) {
        this.name = name;
    }
    
    getName() {
        return this.name;
    }
}

export default Food;
```

메소드는 함수와 비슷하며, 메소드는 객체의 동작을 정의한다. `getName()` 메소드는 Animal 클래스의 프로퍼티인 `this.name`을 반환한다.

```javascript
// index.js
import Animal from './Animal';

let anim = new Animal('Jake');

console.log(anim.getName()); // 'Jake'
```

호출 역시 직관적이다.

**EX1) 예시** 

```javascript
class Food {
  constructor(name) {
    this.name = name;
    this.brands = [];
  }
  addBrand(brand) {
    this.brands.push(brand);
  }
  print() {
    console.log(`${this.name}을 파는 음식점들:`);
    console.log(this.brands.join(", "));
  }
}

const pizza = new Food('피자');
pizza.addBrand('피자헛');
pizza.addBrand('도미노 피자');


const chicken = new Food('치킨');
chicken.addBrand('굽네치');
chicken.addBrand('BBQ');

pizza.print();
chicken.print();
```

```javascript
// 결과)

피자을 파는 음식점들: 
피자헛, 도미노 피자 
치킨을 파는 음식점들: 
굽네치, BBQ 
```