[JS] 클래스와 객체 지향 프로그래밍

가르송·2023년 3월 15일

클래스란?

자바스크립트는 프로토타입을 기반으로 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍이란 절차적으로 코드를 작성하지 않고 '클래스'라는 데이터 모델의 청사진을 사용해 코드를 작성하는 것을 말한다.

클래스의 구성

class Student {
  // constuctor: new 키워드로 객체를 생성할 때 호출되는 함수
  constructor (name, grade) {
    this.name = name;
    this.grade = grade;
  }
  
  // 함수는 대개 생성자 밖에서 정의한다
  display = () => {
    console.log(`${this.name}`);
  }
}

// kim은 Student 클래스의 인스턴스이다
const kim = new Student('kim', 'A');

console.log(kim.name); // kim

클래스 레벨의 메서드 정의하기

위의 Student 클래스를 통해 만들어진 인스턴스는 display라는 메서드를 가진다. 이 display 메서드는 만들어진 인스턴스에게 각각 부여되는 인스턴스 레벨의 메서드이다.

각각의 인스턴스가 가진 값을 출력하는 display와 다르게, 모든 객체가 동일하게 참조해야 하는 특성이나 행동이 있을 수 있다. 이렇게 개별 인스턴스의 데이터를 참조하지 않아도 되는 경우 static 키워드를 사용하여 클래스 레벨의 메서드나 프로퍼티를 만든다.

사용 예제

// 인스턴스 레벨에서 정의하는 것보다 재사용성이 높아졌다
static displayManager {
  console.log("이 자료는 황00 담임교사가 제작했습니다");
}

ES5에서의 클래스

ES5에서는 ES6와 다른 형태를 가지고 있다.

class Student {
  this.name = name;
  this.grade = grade;
  
  // prototype 표기
  Student.prototype.display = function () {
    console.log(`${this.name}`);
  }
}

클래스와 객체 지향 프로그래밍

OOP의 네 가지 기본 개념

캡슐화 : 데이터와 기능을 하나의 객체 안에 넣어 묶는 것
상속 : 부모 클래스의 특징을 자식 클래스가 물려받는 것
추상화 : 복잡한 자료, 구현 등으로부터 핵심적인 개념이나 기능을 간추려 내는 것. 다시 말하면 내부는 복잡한 데 반해 노출부는 단순하게 만든다는 개념.
다형성 : 같은 기능이라도 객체에 따라 다르게 작동하는 것

클래스로 캡슐화하기

캡슐화는 은닉(내부 데이터나 구현을 외부에서 수정할 수 없도록 숨겨두는 것)이라는 특성을 내포하고 있다.

클래스에서는 이를 구현하기 위해 #을 이용한다.
아래에서 #을 사용하여 프로퍼티나 메서드를 정의하는 경우, <클래스의 구성> 예제와 달리 외부에서 데이터를 조회하지 못하는 것을 확인할 수 있다.

class Student {
  #name;
  #grade;
  
  constructor (name, grade) {
    this.#name = name;
    this.#grade = grade;
  }
}

const kim = new Student('kim', 'A');

console.log(kim.name); // undefined