클래스(Class)와 인스턴스(Instance)

클래스(Class)

---

• JavaScript 에서 클래스는 객체(object)가 아니라 객체를 만들기 위한 템플릿이다.
• ES6 에서 클래스를 정의할때 class 키워드를 사용한다.
• class 안에 생성자 함수가 포함되고, 이 생성자 함수는 리턴값을 만들지 않는다.
• class 의 이름은 일반 함수와 구분하기 위해 대문자로 시작하고, 일반명사의 형태로 만든다. (일반 함수는 소문자, 동사를 사용)

class ClassName {
  constructor() { ... } // 생성자 함수
}

인스턴스(instance)

---

• 클래스를 기반으로 한 객체 (instance object)
• 인스턴스는 **new 키워드**를 사용해서 만든다.
• 각각의 인스턴스는 클래스의 속성과 메서드를 갖게 된다.
  
  
  
  

ES5 vs. ES6 클래스 작성 문법 비교

---

ES5 문법으로 작성하면,

// ES5
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  Person.prototype.getName = function() {
    return this.name;
  };
  
  Person.prototype.getAge = function() {
    return this.age;
  };
  
  Person.prototype.getGender = function() {
    return this.gender;
  };

ES6 문법으로 작성하면,

class Person {
    constructor(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
    }
  
    getName() {
      return this.name;
    }
  
    getAge() {
      return this.age;
    }
  
    getGender() {
      return this.gender;
    }
  }

• class 키워드를 사용해서 클래스를 만든다.
• class명은 대문자로 시작하는게 관습이다.

References

MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
Javascript Class: Difference between ES5 and ES6 Classes
https://medium.com/@apalshah/javascript-class-difference-between-es5-and-es6-classes-a37b6c90c7f8