Class 란?

JavaScript의 Class는 객체(Object)와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있다.

Class 를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

쉽게 생각해서 클래스 = 붕어빵 기계, 그리고 객체 = 붕어빵으로 보면 된다.

1. Class를 사용하는 이유는?

JavaScript prototype기반의 객체지향 프로그래밍 언어이다. 그렇다면 JS에 왜 class가 추가된 것이고 왜 사용하는 것일까

ES6부터 추가된 class는가직관적으로 쉽게 코드를 읽을 수 있게 만들어 줄 뿐만 아니라, 작성하기도 쉽고 또 class 기반 언어에 익숙한 개발자가 더 빠르게 적응할 수 있다.


// prototype
function Me(name) {
  this.name = name
}

Me.prototype.wow = function() {
  console.log("WOW!");
};

let person = new Me("Jason");
person.wow(); // WOW!

//  class

class Me {
  constructor(name) {
    this.name = name;
  }

  wow() {
    console.log("WOW"!)
  }
}

let person = new Me("Jason");
person.wow();

2.Class 살펴보기

class Korean {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.country = 'korea';
  }

  addAge(age) {
    return this.age + age;
  }
}
  • 클래스 내부에 정의된 함수를 method 라고 부른다.
  • 클래스를 통해 생성된 객체를 인스턴스라고 부른다.
  • 크래스도 함수처럼 호출하기 전까지 코드가 실행되지 않는다. 단지 Korean 이라는 클래스를 정의만 했을 뿐이다. new키워드와 소괄호()를 사용하여 호출할 수 있다.
  • 클래스 이름은 korean과 같이 항상 대문자로 시작한다.
  • constructor는 class에서 필요한 기초 정보를 세팅하는 곳이다. 객체를 new로 생성할 때 가장먼저 자동으로 호출된다.
  • constructor() 메소드에서 name과 age, 2개의 매개변수로 korean 인스턴스의 name, age 프로퍼티에 값을 할당했다.
  • this는 본인 객체를 의미한다. 클래스 내에서 메소드끼리 소통하기 위해서는 this가 필요하다.
let kim = new korean("sungjoongYun", 24);

{
  name: "sungjoongYun",
  age: 24,
  country: 'korea',
  addAge: function(age){
    return this.age + age;
  }  
}

korean 클래스를 이용해 kim 객체를 만들면 위와 같은 instance가 생성된다.

class Cat {
    constructor(name, age) {
        this.name = name;
        this.age = age;

    }
    eat() {
        return `${this.name} is eating!`
    }
    meow() {
        return 'MEOWWWW'
    }
}

class Dog {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        return `${this.name} is eating!`
    }
    bark() {
        return 'WOOF'
    }
}

이 두 개의 클래스를 보면 살짝 다르지만 여전히 복제된 기능들이 많은데, JavaScript에서 가능한 옵션 중 하나가 바로 이 복제된 코드를 이 Cat이나 Dog에서 두 클래스가 모두 확장시킬 수 있는 따로 만든 별개의 클래스로 이동시키는 것이다.

일종의 부모와 자식 관계라고 생각하면 된다.

class Pet {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        return `${this.name} is eating!`
    }
}


class Cat extends Pet {
    meow() {
        return 'MEOWWWW'
    }
}

class Dog extends Pet {
    bark() {
        return 'WOOF'
    }
}

이처럼 extend 키워드를 사용하면 자식 클래스인 Dog에서 부모 클래스인 Pet의 값을 사용할 수 있다.

let boksil = new Dog("Boksil",5);

boksil.eat() // Boksil is eating!