자바스크립트의 ES2015(ES6)에서 클래스 문법이 도입되었다. 클래스는 왜 쓰는지와 문법에 대해 먼저 알아보자.
클래스(JS)
클래스의 목적은 정해진 형태로 인스턴스라는 객체를 만들어 내는 것이다.
인스턴스 : 클래스 문법으로 만들어진 객체
클래스는 class <클래스 명> {} 으로 생성할 수 있다.
정해진 모양을 만들어 주기 위해 constructor라는 초기화 메서드를 선언해 준다.
new <클래스 명>();으로 인스턴스(객체)를 만들면 constructor가 먼저 실행이 된다.
class Person {
//constructor(생성자) : new 키워드로 객체를 만들 때 호출되는 함수
constructor() {
console.log("생성되었습니다.");
}
}
new Person(); //생성되었습니다.파라미터로 이름과 나이를 받고, 이에 속성으로 가지는 인스턴스를 만드는 클래스를 만들어 보자.
class Person {
constructor(name, age) {
console.log("생성되었습니다.");
this.name = name;
this.age = age;
}
}
let jihu = new Person("지후", 22); //생성되었습니다.
console.log(jihu); //Person {name: '지후', age: 22}클래스에서 this는 앞으로 생성될 인스턴스 자체를 뜻한다.
클래스와 프로토타입이라고 하는 것은 관련이 되어 있다. 자바스크립트가 프로토타입 기반의 언어라는 것을 이해하면 클래스를 이해하기 쉬우므로 프로토타입에 대해 알아보자.
자바스크립트 프로토타입
자바스크립트의 모든 객체(배열)들은 내부에 프로토타입이라는 객체를 가지고 있다.
프로토타입이라는 객체 안에 여러가지의 메서드들이 숨겨져 있기 때문에 우리는 객체의 기본적인 메서드들을 사용할 수 있게 되는 것이다.
프로토타입 활용
이제 직접 user라는 객체와 user객체의 정보를 상속받는 admin이라는 객체를 만들어보자.
크롬에서는 __proto__가 프로토타입을 의미한다. admin의 프로토타입으로 user를 할당하면 admin은 user의 정보를 상속받아 그대로 사용할 수 있게 된다.
하지만 프로토타입은 외부에서 직접 접근이 불가하다. admin의 값은 분명 빈 객체지만, 내부에 user객체가 프로토타입으로 들어가 있기 때문에 접근이 가능하다. 따라서 프로토타입으로 기존 객체를 상속받아 확장하여 새로운 객체를 만드는 것이 가능해진다.
프로토타입과 클래스의 관계
자바스크립트에서는 생성자 함수를 통해 객체를 쉽게 만들 수 있었는데 이는 프로토타입을 이용해서 객체지향 프로그래밍을 지원하기 때문이다. 하지만 이제는 클래스 타입의 문법을 많이 쓴다. 클래스는 ES2015(ES6)에서 생성자 함수의 기능을 자바같은 클래스기반의 언어를 본 따 문법만 바꿔서 만든 것이다. 현재 모던한 코드들은 대부분 클래스 문법을 사용하며 타입스크립트에서도 클래스 문법을 사용한다.
타입스크립트의 클래스 문법
자바스크립트에서 클래스를 선언하고 바로 constructor메서드로 들어올 파라미터가 어떻게 될 지 선언했었다면, 타입스크립트에서는 생성될 속성이 어떤 데이터인지 먼저 선언하고 시작한다.
//자바스크립트
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
//타입스크립트
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}