[JavaScript] 클래스와 인스턴스

클래스

JavaScript에서 클래스는 특별한 함수이다. 클래스는 객체를 생성하기 위한 템플릿으로 데이터와 이를 조작하는 코드를 하나로 추상화한다. 클래스는 ES5에서 도입되었고, ES6에 클래스를 작성하는 문법이 새롭게 추가되었다. 클래스는 class 선언식과 class 표현식을 통해 정의할 수 있다. 다음 예시는 ES6 문법으로 작성되었다. 클래스는 일반적인 다른 함수와 구분하기 위해 대문자로 시작하는 일반명사로 만든다. 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작한다.

ES6 class 작성 문법

class 키워드를 이용해 클래스를 생성한다. contructor 함수(생성자 함수)를 통해 인스턴스를 초기화한다. 메서드는 constructor 함수와 같은 스코프에서 생성한다.

// class 선언식
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// class 표현식 unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  calcArea() {
    return this.height * this.width;
  }
};
console.log(Rectangle.name); // 출력: "Rectangle"

// class 표현식 named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  calcArea() {
    return this.height * this.width;
  }
};
console.log(Rectangle.name); // 출력: "Rectangle2"

ES5 class 작성 문법

function 키워드를 통해 클래스를 생성한다. 클래스 이름의 첫 글자를 대문자 일반명사로 작성하여 다른 함수와 구분한다. 메서드는 .prototype을 통해 클래스에 추가한다.

// class 선언식
function Rectangle (height, width) {
  this.height = height;
  this.width = width;
}

Rectangle.prototype.calcArea = function() {
  return this.height * this.width;
};

// class 표현식
let Rectangle = function(height, width) {
  this.height = height;
  this.width = width;
};

Rectangle.prototype.calcArea = function() {
  return this.height * this.width;
};

ES6와 ES5 class 작성 문법 비교

ES6에는 class 키워드와 constructor 메서드가 추가되었다. constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 메서드이다. ES6에서는 메서드를 class 키워드의 스코프 내에서 생성하는 반면, ES5에서는 prototype을 이용해 스코프 밖에서 생성한다.

인스턴스

인스턴스는 클래스를 통해 생성된 객체를 가리킨다. 클래스는 붕어빵 틀, 인스턴스는 붕어빵에 비유할 수 있다. 클래스(붕어빵 틀)를 통해서 다양한 인스턴스들(팥 붕어빵, 크림 붕어빵, 피자 붕어빵 등)을 만들 수 있고, 인스턴스는 각각의 객체가 된다.

new 키워드

JavaScript에서 선언한 클래스를 new 키워드를 사용해서 인스턴스를 만들 수 있다.

참고문헌

• MDN - Classes
• MDN - new operator
• 코드스테이츠 - 유어클래스