[자바스크립트] class는 함수이다?

이번 글에서는 자바스크립트의 클래스를 처음 접하다 보면 발생할 수 있는 헷갈리기 쉬운 클래스의 타입에 대해서 알아보겠다.

 

 

자바스크립트 클래스

자바스크립트에서 클래스는 ES6에서 추가된 문법으로 기본적인 사용방법은 아래와 같다. (자바스크립트의 클래스에 대한 자세한 내용은 해당 링크를 참고 : 클래스)

// 클래스
class Person {
   constructor({name, age}) {
     this.name = name;
     this.age = age;
   }
   
   introduce() {
     return `이름 : ${this.name} 나이 : ${this.age}`;
   }
}

const person = new Person({name: 'kim', age: 26});
console.log(person.introduce()); // 이름 : kim 나이 : 26

 

class 키워드를 통해 클래스를 생성하고 new 생성자를 통해 객체를 생성할 수 있다. 코드와 사용 문법만 보면, 자바의 클래스와 비슷하지만, 자바스크립트에서 클래스는 기존의 프로토타입 방식과 내부적으로 동작하는 방식은 똑같다.

 

위의 말을 곱씹다보면, 자바스크립트의 클래스에 대해서 다음과 같은 의문이 생길 것이다. 겉은 클래스라는 키워드를 사용하고 클래스의 사용법과 똑같지만, 내부적으로는 기존의 생성자 함수, 프로토타입 체이닝을 사용하는 방식과 똑같이 동작한다면 자바스크립트에서 클래스는 정확히 무엇인가??

 

 

 

클래스는 함수이다??

클래스의 설명에서 파생된 위의 의문에 대한 답은 반대로 클래스의 설명에서 얻을 수 있다. 클래스란 처음의 설명처럼, 자바스크립트 ES6에서 기존의 방법을 편하게 사용하기 위해 등장한 문법이다.

 

즉, 클래스는 생성자 함수, 프로토타입을 편하게 사용하기 위한 문법적 설탕(Syntactic sugar)이지 자바스크립트에서 새롭게 창안한 개체(entity)가 아닌 것이다. 겉이 조금 더 편리하게 바뀌었을 뿐이지 기존의 함수 그대로인 것이다. 

 

이는 간단하게 typeof 연산자를 통해 확인할 수 있다.

// 클래스
class Person {
    constructor({name, age}) {
      this.name = name;
      this.age = age;
    }
    
    introduce() {
      return `이름 : ${this.name} 나이 : ${this.age}`;
    }
}

console.log(typeof Person); // function

// 클래스 함수를 통해 생성된 객체는 당연히 object 
const person = new Person({name: 'kim', age: 26});
console.log(typeof person);  // object

 

 

 

마무리

이번 글에서는 자바스크립트 클래스에 관해서 오해할 수 있을만한 주제에 대해서 다루어보았다. 자바스크립트의 클래스가 무엇이며, 구체적으로 어떻게 사용하는지에 관한 내용은 아래의 포스팅을 참고하면 된다.

 

 

자바스크립트 클래스의 기본 개념

[자바스크립트] Class 개념과 기본 문법

 

자바스크립트 클래스 상속

[자바스크립트] 클래스 상속