오늘의 주제는 자바스크립트의 클래스입니다!

다른 객체지향 언어에서는 보통 클래스를 통해 객체를 생성하고 상속을 구현합니다.

하지만 자바스크립트는 프로토타입 기반 객체지향 언어로 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현합니다.

프로토타입 참고..

자바스크립트를 처음 접할때 프로토타입과 생성자 함수로 충분이 상속을 구현할 수 있는데 왜 클래스가 도입되었는지가 궁금했습니다.. 그래서 지금부터 한번 알아보도록 하겠습니다!

생성자 함수와 클래스 💡

일단 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성합니다.

하지만 두가지가 동일하게 동작하지는 않습니다. 차이점은 다음과 같습니다.

1️⃣ 첫째, 클래스는 new 연산자 없이 호출할 수 없다. (생성자 함수는 new 없이 호출할 시 일반함수로서 호출됩니다.)

2️⃣ 둘째, 클래스는 extends, super 를 통해 상속 구현이 가능합니다.

3️⃣ 셋째, 호이스팅이 발생하지 않는것처럼 동작합니다.

4️⃣ 넷째, 클래스 내의 모든 코드에서는 암묵적으로 strict mode가 지정되어 실행됩니다.

5️⃣ 다섯째, 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트의 값이 false 입니다.

이 점을 기억하고 클래스의 정의부터 차근차근 보도록 하겠습니다.

클래스 정의 ⚖️

클래스는 class 키워드로 정의합니다.

// 익명 클래스 표현식
const Person = class{};

// 기명 클래스 표현식
const Person = class MyClass{};

자바스크립트에서는 클래스를 익명으로 표현할 수 있습니다.

클래스를 표현식으로 정의할 수 있다는것? 이것은 클래스가 일급 객체라는 것을 의미합니다. 더 자세히보면 클래스는 함수‼️ 입니다!! (일단 기억해두자!)

인스턴스 생성시 new 키워드를 통해 생성합니다.

클래스 내부에는 constructor(생성자),프로토타입 메서드,정적 메서드 총 세가지 메서드를 정의할 수 있습니다.

constructor 1️⃣

constructor 메서드는 인스턴스를 생성하고 초기화하기 위한 메서드입니다.

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

아까 클래스도 함수라고 했었죠?

따라서 클래스도 함수와 동일하게 함수 객체 고유의 프로퍼티를 모두 가집니다. 이전 프로토타입 글에서 보았듯이 함수는 프로토타입과 연결되어있습니다.

따라서 클래스도 프로토타입과 연결되게 됩니다‼️

constructor는 클래스 내 최대 한개만 존재할 수 있고, 생략가능합니다.

생략시 암묵적으로 빈 constructor를 생성합니다.

프로토타입 메서드 2️⃣

이번엔 생성자 함수와 클래스에서 프로토타입 메서드를 생성하는 방법을 비교하여 보겠습니다.

먼저 생성자 함수는

function Person(name) {
	this.name = name;
}

Person.prototype.sayHi = function() {
	console.log(`Hi! My name is ${this.name}`);
};

다음과 같이 생성합니다.

그럼 클래스에서는??

class Person {
	constructor(name) {
    	this.name = name;
    }
  
  	sayHi() {
    	console.log(`Hi! My name is ${this.name}`);
    }
}

다음과 같이 생성합니다.

따로 프로토타입 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 됩니다.

정적 메서드 3️⃣

마지막으로 정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말합니다.

정적 메서드를 생성하기 위해서는 static 키워드를 사용합니다.

class Person {
	constructor(name) {
    	this.name = name;
    }
  
  	static sayHi() {
    	console.log(`Hi! My name is ${this.name}`);
    }
}

그럼 프로토타입 메서드는 언제쓰고,,, 정적 메서드는 언제쓰죠..⁉️

프로토타입 메서드와 정적 메서드의 차이 ✔️

프로토타입 메서드는 인스턴스로 호출하고, 정적 메서드는 클래스로 호출합니다. 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있지만, 정적 메서드는 참조할 수 없습니다.

따라서 상황에 따라, 클래스 내 프로퍼티를 참조해야할 때는 프로토타입 메서드를 사용하고 참조하지 않아도 될때에는 정적 메서드를 사용합니다.

상속 💸

클래스로 상속을 구현하는 방법은 extends 키워드를 사용하는것입니다.

// 부모 클래스
class Base {}

// 자식 클래스
class Derived extends Base {}

상속을 받은 크래스를 자식클래스, 서브클래스라고하고, 서브클래스에게 상속된 클래스를 수퍼클래스, 부모클래스라고 합니다.

수퍼클래스는 서브클래스에게 인스턴스의 프로토타입 체인뿐만아니라, 클래스 간의 프로토타입 체인도 상속이 가능합니다.

*프로토타입 체인: 접근하려는 객체의 프로퍼티나 메서드가 없을 시 상위 프로토타입 객체의 프로퍼티나 메서드를 차례로 검색하는것

이로 인해 프로토타입 메서드와 정적 메서드 모두 상속이 가능함을 알 수 있습니다.

정리하며..✨

클래스에 대해 알아보며 클래스가 필요했던 이유로는

기존 클래스 기반 객체지향 언어와의 차이로 인해 어렵게 느껴진다.
클래스를 사용하면 가독성이 더 좋아진다.
extends 키워드를 통한 상속을 더 쉽게 다룰 수 있다.

등이 있습니다.

공부하며 쓴 글이라 오류가 있을 수 있습니다! 읽어주셔서 감사합니다😊

참고 📜

▶황재호. 『예제로 배우는 자바스크립트』. 인포앤북, 2023.

▶이웅모. 『모던 자바스크립트 Deep dive』. 위키북스, 2020.