Class & Constructor & Method

Class

class Food {

}

export default Food;

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

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

// 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(생성자)

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

export default Food ;

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

Instance variable(인터페이스 변수)

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

export default Food;

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

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

let anim = new Food ('Jake');

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

Method

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

export default Food;

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

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

let anim = new Animal('Jake');

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

호출 역시 직관적이다.

EX1) 예시

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

// 결과)

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