클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

1. JavaScript의 Class

JavaScript에서 class 사용은 ES6에서부터 지원을 하기 시작했으며, 익스플로러에서는 해당 코드 사용이 불가능하나, 최신 브라우저를 이용할 경우 class를 지원한다.

class를 사용하는 가장 큰 이유는 재사용성으로, 작은 사이트의 경우 잘 만든 Function 하나로도 충분히 개발이 용이했다면 좀 더 복잡한 사이트를 만들게 될 경우 class의 장점을 더 잘 알 수 있다고 한다.

1-1. Class의 기본 문법

1-1-1. Class 생성

JavaScript 내에서 class를 생성하려면 간단하며, class를 선언만 해준다면 class 객체를 바로 만들 수 있다.

class Person {

}

let hhj = new Person();

console.log(hhj, 'class 객체 생성');
// Person {} 'class 객체 생성'

class로 만들어준 예시 Perwon이라는 이름의 객체가 생성된다.

1-1-2. Class 초기값 설정

Constructor(생성자)를 이용하면 class 객체의 초기 값을 설정해 줄 수 있다.

class 내부에서 Constructor는 한 개만 존재할 수 있으며, 2번 이상 사용 시 Syntax Error가 발생할 수 있다.

class Person {
  constructor(name, age, city) {
    console.log('construtor'); // construtor
    this.name = name;
    this.age = age;
    this.city = city;
  }
}

let hhj = new Person('hhj', '28', 'Gwangju');

console.log(hhj);
// Person {name: 'hhj', age: '28', city: 'Gwangju'}

위의 코드처럼 Constructor는 새로운 클래스를 생성할 때 가장 처음으로 실행되며 초기값을 설정해준다.

1-1-3. Class 메서드 사용

class에서 설정한 초기값을 접근해 특정 기능을 하는 메서드를 만드는 것도 가능하며, class안에 function 형식으로 만들어준 뒤 해당 메서드를 호출하기만 하면 된다.

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  nextYear() {
    return Number(this.age) + 1;
  }
}

let hhj = new Person('hhj', '28', 'Gwangju');

console.log(hhj.nextYear());
// 29

class는 JavaScript 상 객체의 형태이므로 생성된 class 객체에 class 밖에서 새로운 메서드를 넣는 것도 가능하다.

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  nextYear() {
    return Number(this.age) + 1;
  }
}

let hhj = new Person('hhj', '28', 'Gwangju');

hhj.eat = function () {
  return 'meat';
}

console.log(hhj.nextYear());
// 29

console.log(hhj.eat());
// meat

class 밖에서 추가한 eat이라는 메서드도 함수로써 작동하지만, 이와 같이 밖에서 추가한 class는 추후 새로운 new Person class로 새로운 객체를 만들 경우에 호출하여 사용할 수 없다.

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  nextYear() {
    return Number(this.age) + 1;
  }
}

let hhj = new Person('hhj', '28', 'Gwangju');

hhj.eat = function () {
  return 'meat';
}

console.log('hhj의 내년의 나이 ->', hhj.nextYear());
// hhj의 내년의 나이 -> 29

console.log('hhj의 먹은 음식 ->', hhj.eat());
// hhj의 먹은 음식 -> meat

let hhj2 = new Person('hhj2', '24', 'Chumdan');

console.log('hhj2의 내년의 나이 ->', hhj2.nextYear());
// hhj2의 내년의 나이 -> 25

console.log('hhj2의 먹은 음식 ->', hhj2.eat());
// console.log('hhj2의 먹은 음식 ->', hhj2.eat());
// TypeError: hhj2.eat is not a function

1-2. Class의 상속 (extends)

class에서 상속 개념을 이용할 수 있으며, CSS를 이용한 분들이라면 하나의 속성이 하위 속성에도 같이 적용되는 것처럼 class에서도 상속을 이용하면 기존의 class의 값을 모두 접근하여 사용할 수 있다.

상속은 extends를 써서 이용할 수 있다.

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  nextYear() {
    return Number(this.age) + 1;
  }
}

class introducePerson extends Person {
  introduce() {
    return `저는 ${this.name}이며, ${this.city}에서 살고 있고, 나이는 ${this.age}세입니다.`
  }
}

let hhj = new introducePerson('hhj', '28', 'Gwangju');

console.log(hhj.introduce());
// 저는 hhj이며, Gwangju에서 살고 있고, 나이는 28세입니다.

위의 코드와 같이 introducePerson 클래스에서 Person을 상속받았기 때문에 this.city와 this.name을 모두 사용할 수 있는 것을 확인할 수 있다.

1-3. Class의 super 사용

introducePerson 하위 클래스에서 기존 class의 값을 가져다 쓰는 건 좋지만, 추가적으로 introducePerson이라는 하위 클래스에서만 사용하고 싶은 값이 있을 수도 있다.

이때 이용하는 것은 super라는 키워드로, 이는 객체의 부모가 가지고 있는 메서드를 호출할 수 있다.

자식 쪽의 추가적으로 사용할 초기값이 필요할 경우 constructor에 super로 부모 초기값을 세팅한 뒤 자식 class에서만 사용할 초기값을 따로 지정하는 것도 가능하며 super 기능을 이용해서 자식 class에서 부모 메서드를 호출할 수도 있다.

class Person {
  constructor(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  nextYear() {
    return Number(this.age) + 1;
  }
}

class introducePerson extends Person {
  constructor(name, age, city, job) {
    super(name, age, city);
    this.job = job;
  }

  introduce() {
    return `
    저는 ${this.name}이며, ${this.city}에서 살고 있고, 나이는 ${this.age}세입니다.
    내년에는 ${super.nextYear()}세이며, 하는 일은 ${this.job}입니다.
    `
  }
}

let hhj = new introducePerson('hhj', '28', 'Gwangju', '프론트엔드 개발자');

console.log(hhj.introduce());
// 저는 hhj이며, Gwangju에서 살고 있고, 나이는 28세입니다.
// 내년에는 29세이며, 하는 일은 프론트엔드 개발자입니다.

class를 이용할 경우 규칙성을 갖는 객체를 일관성 있게 만드는 게 가능하며, 상속을 통해서 기능 확장이 용이하다는 것 알 수 있었다.

---

참고 사이트

김평범's OrdinaryCode - 자바스크립트에서 Class 사용하기
잉룡's Devlog - 생성자(Constructor) 만들기