자바스크립트 class 문법

이일우·2023년 3월 15일

공부하기

목록 보기

14/42

자바스크립트에서 클래스는 ES6(ECMAScript 2015)부터 도입되었다.
이전에는 프로토타입 기반의 객체 생성 방식을 사용했지만, 클래스 문법이 도입된 이후 객체 지향 프로그래밍을 더 직관적으로 작성할 수 있다.

ES5 프로토타입 기반 객체 생성

// 생성자 함수
function Car(make, model) {
  this.make = make;
  this.model = model;
}

// 프로토타입에 메서드 추가
Car.prototype.displayInfo = function() {
  console.log(this.make + ' ' + this.model);
};

// 인스턴스 생성
var myCar = new Car('Toyota', 'Corolla');

// 메서드 호출
myCar.displayInfo(); // "Toyota Corolla" 출력

CLASS

클래스는 자바스크립트에서 객체를 생성하기 위한 템플릿이다. 클래스에는 데이터와 메서드가 포함되어 있다.

// 클래스 기본 사용 문법
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`${this.make} ${this.model}`);
  }
}

Instance

인스턴스는 클래스로부터 생성된 객체를 의미한다. 인스턴스를 생성하기 위해서는 new 키워드를 사용한다.

const myCar = new Car("Toyota", "Corolla");

Constructor

생성자(생성자 함수)는 클래스의 인스턴스를 생성하고 초기화하는 역할을 한다. 클래스 내에서 constructor라는 이름의 메서드로 정의된다. 인스턴스가 생성될 때 한 번 호출되며, 인스턴스의 초기 상태를 설정하는데 사용된다.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

Method

메서드는 클래스 내에 정의된 함수이다. 메서드를 사용하여 클래스의 인스턴스가 수행할 수 있는 동작을 정의한다.

class Car {
  // ...
  displayInfo() {
    console.log(`${this.make} ${this.model}`);
  }
}

const myCar = new Car("Toyota", "Corolla");
myCar.displayInfo(); // "Toyota Corolla"