[JavaScript] Class & Instance

Class

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 속성과 메소드를 정의하는 일종의 틀을 말한다.

class를 정의 하는 방법은 두 가지 인데, 함수로 정의 하는 방법(ES5)과 class 키워드로 정의 하는 방법(ES6)이 있다.
ES6에 class 문법이 도입 되면서 최근에는 주로 class 키워드를 이용하여 클래스를 정의하고 있다.

• ES5 / 함수로 클래스 정의

function Fruit(name, emoji) {
  this.name = name;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };
 return this; // 자바스크립트 엔진 내에서 자동으로 this가 리턴되도록 만들어주기 때문에 생략가능
}

• ES6 / class 키워드로 클래스 정의

class Fruit {
  // 생성자: new 키워드로 객체를 생성할때 호출되는 함수
  // 클래스 안에 `constructor`라는 이름으로 정의
  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }

  display = () => {
    console.log(`${this.name}: ${this.emoji}`); 
    // 멤버함수(메서드)는 생성자 밖에서 
  };
}

클래스는 일반함수와 구분하기 위해 보통 대문자로 시작하며 일반명사로 만든다.

instance

인스턴스는 클래스를 바탕으로 생성된 객체를 말하며, 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

인스턴스를 생성 할 때에는 new 키워드를 사용한다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다.

const apple = new Fruit('apple', '🍎');
//Fruit { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }

const orange = new Fruit('orange', '🍊');
//Fruit { name: 'orange', emoji: '🍊', display: [Function (anonymous)] }

각각 apple, orange는 Fruit 클래스의 인스턴스이며, 인스턴스와 일반 객체의 차이는 클래스를 통해 생성되었다는 것.

constructor method

constructor method(생성자 함수)는 인스턴스를 생성하고 초기화하기 위한 특수한 메소드이다. constructor는 클래스 안에 한 개만 존재할 수 있다.

  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }