클래스(Class)

클래스(Class)란?

클래스는 정보를 묶는 것

현실과 비슷한 개념(객체)을 나타내기 위한 도구를 클래스(Class)라고 부릅니다.

클래스는 미리 정의해놓으면 필요할 때마다 해당 클래스로 동일한 틀을 가진 객체를 만들 수 있습니다.

• 여기서 동일한 클래스를 이용해 생성한 객체를 인스턴스(Instance)라고 부릅니다.

 

클래스 연습해보기

class User { 
}

const user = new User();
user.name = "김정민";
user.age = 29;
user.tech = "Node.js";

console.log(user.name); // 김정민
console.log(user.age); // 29
console.log(user.tech); // Node.js

변수 user는 실제 빵, User 클래스는 빵틀로 이해하시면 됩니다.

 

생성자(Constructor)

 클래스 내부에서 constructor()로 정의한 메서드를 "생성자"라고 부릅니다.

미리 정의한 클래스를 기반으로 인스턴스를 생성할 때 Javascript 내부에서 호출되는 메서드입니다.

class User {
  constructor(name, age, tech) { // User 클래스의 생성자
    this.name = name;
    this.age = age;
    this.tech = tech;
  }
}

const user = new User("김정민", 29, "Node.js"); // user 인스턴스 생성

console.log(user.name); // 김정민
console.log(user.age); // 29
console.log(user.tech); // Node.js

this와 프로퍼티(Property)

this?
아까 말씀드린, 빵틀(User)과 빵(user)의 관계 기억나시나요?
우리가 바꾸고 싶은 건 빵틀의 값이 아니라 실제 빵의 값입니다. this라고 표시함으로써, 빵틀 전체의 값을 바꾸는 게 아니라 빵 하나의 값만 바꾸는 것입니다.

생성자의 바디에서 this 키워드를 사용합니다. 이 this는 클래스를 사용해 만들어 질 객체 자신을 의미하고 this뒤에 붙는 name, age, tech는 클래스를 이용해서 만들어질 객체의 속성(Propety)입니다.

생성자를 이용해 name, age, tech인자값을 입력받아 class 내부 변수에 저장합니다.

class User {
  constructor(name, age, tech) { // User 클래스의 생성자
    this.name = name;
    this.age = age;
    this.tech = tech;
  }
}

const user = new User("김정민", "29", "Node.js"); // user 인스턴스 생성
console.log(user.name); // 김정민
console.log(user.age); // 29
console.log(user.tech); // Node.js

메서드(Method)

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있는데요. 프로퍼티 값이 함수일 경우에는 일반 함수와 구분하기 위해 메서드(Method)라고 부릅니다.

즉, 메서드는 객체(Object)에 묶여 있는 함수를 의미합니다.

클래스에서도 데이터를 나타내는 속성뿐만아니라 함수와 같이 특정 코드를 실행할 수 있는 문법을 사용할 수 있는데, 여기서 Class라는 객체(Object)에 묶여있는 함수를 메서드(Method)라고 부릅니다.

class User {
  constructor(name, age, tech) { // User 클래스의 생성자
    this.name = name;
    this.age = age;
    this.tech = tech;
  }

  getName() { return this.name; } // getName 메서드
  getAge() { return this.age; }.  // getAge 메서드
  getTech() { return this.tech; } // getTech 메서드
}

const user = new User("김정민", "29", "Node.js"); // user 인스턴스 생성
console.log(user.getName()); // 김정민
console.log(user.getAge()); // 29
console.log(user.getTech()); // Node.js

상속이란?

일반적으로 클래스의 인스턴스는 선언한 클래스의 기능을 모두 상속합니다.

상속을 이용해 부모 클래스와 자식 클래스 나눌 수 있습니다. 부모 클래스의 경우 메서드, 내부 변수와 같은 정보를 자식 클래스에게 할당해줄 수 있습니다.

• User를 상속하는 Employee

아래의 예제는 우선 User 클래스를 정의하고 , Employee라는 이름의 새로운 클래스가 User를 상속합니다.

생성자 내부의 super()는 생성자 내에서만, 그리고 this 키워드를 사용하기 전에만 쓸 수 있습니다.

• Employee를 User의 서브 클래스로 정의합니다.
• User의 자식 클래스인 Employee에서 User.getTech() 메서드를 호출합니다.

class User { // User 부모 클래스
  constructor(name, age, tech) { // 부모 클래스 생성자
    this.name = name;
    this.age = age;
    this.tech = tech;
  }
  getTech(){ return this.tech; } // 부모 클래스 getTech 메서드
}

class Employee extends User{ // Employee 자식 클래스
  constructor(name, age, tech) { // 자식 클래스 생성자
    super(name, age, tech);
  }
}

const employee = new Employee("김정민", "28", "Node.js");
console.log(employee.name); // 김정민
console.log(employee.age); // 29
console.log(employee.getTech()); // 부모 클래스의 getTech 메서드 호출: Node.js

super 키워드

super 키워드는 함수처럼 호출할 수도 있고, this와 같이 식별자처럼 참조할 수 있는 키워드입니다.

super 키워드를 호출하면 부모 클래스의 생성자(Constructor)를 호출합니다.

super 키워드를 참조하면 부모 클래스의 메서드(Method)를 호출할 수 있습니다.