9강의 메인주제는 Class!
1.클래스소개
class: ES2015(ES6)부터 사용된 문법으로, class예약어를 사용해여 인스턴스를 만들어 주는 것이 기본 역할
기본적인 형태는 다음과 같다.
class SthClass {
constructor() {
}
}
var classObj = new SthClass()실제로는 이렇게 사용된다.
.
Person이라는 class를 new와 함께 사용하여 인스턴스를 만들면 constructor 내부의 로직이 실행된다.
클래스를 생성하고 클래스에 속성을 넘겨주어 객체를 생성한 다음
그것을 jay라는 변수에 할당한 뒤 브라우저에서 실행시켜보면 다음과 같이 Person클래스로 생성된 jay에 Person에 넘겨준 속성들이 객체로 할당된 것을 확인할 수 있다.
2.자바스크립트 프로토타입 소개
자바스크립트의 프로토타입이라는 개념에 대해서 간단하게 설명하기 위해서 다음과 같은 객체를 만들어보자.
사용자의 정보를 담는 객체를 하나 생성하여 user라는 변수에 담았다.
근데 name과 age라는 정보에다가 권한까지 예를 들면 관리자, 시스템 관리자 이런식으로 어떤 권한 같은 룰을 추가하고 싶다.
이렇게되면 user와 admin사이에 name과 age라는 키가 중복된다.
이때 많은 객체들을 활용할 때 중복되는 코드들을 줄일 수 있는 방법이 있는데 이런게 JS지향하는 프로토타입을 이용한 상속이라는 개념이다.
원래 기본적으로 admin에는 아무 정보가 없다.
근데 admin의 프로토에 접근하여 해당 값을 user로 설정하면 admin은 user를 상속받는것으로 되어 user의 값을 활용할 수 있게 되어 age와 name이 제공된다.
만약 여기서 role이라는 키를 admin에 추가해보자.
이렇게 했을때 이 admin이라는 객체를 브라우저에서 콘솔로 확인해보면 role은 amdin의 key로 존재하고 age와 name은 상속받았기 때문에 [[Prototype]]에 있는 것을 확인할 수 있다.
이러한 관점에서 여태까지 썼던 object, array 그리고 기타 데이터 타입에서 제공받았던 속성이나 api들은 프로토타입으로 거슬러 올라가서 사용할 수 있게 된다는 걸 알 수 있다. => 프로토 타입 체인이라는 개념이 있는데 이것도 매우 매우 중요하다. 이부분은 추후에 꼭! 블로그 포스팅으로 정리해두겠다.
3. 자바스크립트 프로토타입의 활용 사례
결국 우리가 만든 데이터들은 prototype을 무조건 가지게 되는데 해당 prototype에 따라 사용할 수 있는 메서드나 API가 달라지게 된다
obj변수에 {data:a}라는 객체를 할당해보자.
이때 obj라는 변수는 hasOwnProperty라는 메서드를 사용할 수 있는데 그 이유는 obj의 [[Prototype]]이 Object이기 때문이다.
더 정확히 말하자면 먼저 Object라는 객체 타입은 hasOwnProperty 등 다양한 메서드를 가지고 있다.
이때 obj라는 변수가 Object라는 객체를 상속받았고 프로토타입체인으로 [[Prototype]]으로 접근해서 Object의 메서드들을 사용할 수 있는 것이 된다.
4. 프로토타입과 클래스와의 관계
결국 class는 문법적으로 보기 좋게 하기 위한 일종의 신테틱 슈거로서 결국 보기좋은 코드를 말한다.
추가적으로 제공하는 기능이나 기존에 제공하던 어떤 성질을 바꾸지 않고 단순히 문법만 바뀐 것으로 생성자 함수와 동일한 역할을 한다.
밑의 코드는 결과적으로 동일한 역할을 수행한다.
이 같은 패턴의 클래스가 등장한 배경은 자바 개발자 혹은 객체지향 언어에 익숙한 사람들이 js에 더 다가서기 수월하게 하려고 클래스 기반의 문법을 제공한 것이다.
클래스를 바벨이나 이런 것들을 돌려서 보면 실질적으로는 이런 생성자 함수를 썼다는 것을 알 수 있다.
자바스크립트 언어 그러니까 프로토 타입 기반으로 코딩을 하는 이 언어의 특성을 클래스로 문법이 바뀌었다고 해서 바뀐 것은 아니라는 뜻이다.
5. 타입스크립트의 클래스 문법
7_class.ts를 생성하고 지금까지 연습했던 Person class를 똑같이 생성하면 다음과 같이 에러가 발생한다.
에러가 발생한 이유는 다음처럼 해당 속성들이 없다고 나온다.
하지만 js 파일에서는 위와 같은 에러가 발생하지 않았다.
기존 js에서는 constructor에다가 바로 이 클래스를 사용할 member변수를 바로 정의할 수 있지만 ts의 경우에는 일단 기본적으로 클래스의 최상단에 이 name이라고 하는 값을 정의 해야한다.
두번째 차이점은 contructor에 들어오는 파라미터들에 대한 타입도 구체적으로 지정할 수 있다는 점이다.
또한 클래스 내부의 변수들에 유효범위를 지정할 수도 있다.
가장 기본적으로는 public이 있으며 protected, private 등 다양한 설정들이 있다.
