오늘은 자바스크립트에서의 Class, 상속 그리고 확장에 대한 이야기들을 잠깐 꺼내보고자 한다. 왜 상속이라는 이름이 붙었고, 이 상속이라는 것이 자바스크립트 언어에 있어서 어떤 의미를 갖는지. 어떤 목적을 두고 있는 것인지에 대한 이야기를 가지고 간단하게 다뤄보고자 한다.

CLASS _ ECMAScript 6

class는 사실 자바스크립트에서 초창기부터 지원하던 문법이 아니라, 다른 언어에 있는 좋은 기능을 가지기 위해 확장한 일종의 syntexic sugar(달콤한 문법)이다. Class가 추가되기전 자바스크립트에서는 Class와 비슷한 기능을 하게끔 하기 위해서 function keyword를 활용해서 함수 객체, 그리고 prototype을 이용해서 강제적으로 Class(와 비슷하지만 다른 것)를 사용하고 있었다. ECMAScript 6가 도입되면서 이렇게 강제적으로 사용하던 기능을 명문화해서 직접 문법적으로 사용할 수 있도록 만들었다. 하지만 Class 문법은 ES6부터 적용되는 문법이므로 그 이하 버전에서는 사용할 수 없다. 지금 만드는 웹에 적용하는 것이 좋을지 어떨지는 실제로 그 ES6이 어느 정도 포용되는지 브라우저의 버전을 통해 확인할 수 있다.

https://caniuse.com/ - caniuse,
내가 사용할 버전이 어떤 브라우저에 맞는지 통계적으로 확인할 수 있는 사이트다.
https://babeljs.io/ - babel,
내가 사용한 언어가 어느 언어에서나 사용할 수 있도록 트랜스 컴파일 해주는 사이트다.

Class는 Instance 생산 공장

사실 클래스라는 것의 사전적 의미는 등급, 급을 나누는 것을 의미한다. 이것은 영역을 줌으로서 구분짓기 위한 목적에서 class라는 명칭이 붙었다는 것을 의미한다. 기본적으로 클래스는 이러한 부차적인 이야기보다, 공장에서 찍어낼 때 그 원형을 생각하면 편하다. 무언가 기능을 가진 객체(Object)를 만들기 위해서는 Class를 바탕으로 만들어낼 필요가 있는데, 이때 Class는 내가 만들어낼 Instance(Object)의 형태를 가지고 있는 틀판이다. 여기에 new {Class 이름}을 통해서 Instance로 비로소 탄생시킬 수 있다. 이를 통해서 여러 인스턴스들을 생산할 수 있는 공장이다.

과거 JavaScript의 Class를 function을 통해 구현한 예제코드를 살펴보자.

javascript ES5 _ function Class

	function Player(nickName, hp, mp, str){ //생성자 함수 Player(arguments)
    	this.nickName = nickName;		    //property 초기화
        this.hp = hp;
        this.mp = mp;
        this.str = str;
	}
    Player.prototype.hit = function(){
    	this.hp--;
    }
    Player.prototype.levelUp = function(){
    	this.hp += 100;
        this.mp += 250;
        this.str += 20;
    }

이제 이 코드를 Class를 이용해 만든 것을 다시 살펴보자.

javascript ES6 _ class syntex

class Player{
    constructor(nickName, hp, mp, str){ //생성자 함수, property 초기화
    	this.nickName = nickName;
        this.hp = hp;
        this.mp = mp;
        this.str = str;
     }
     hit(){
     	this.hp--;
        }
     levelUp(){
     	this.hp += 100;
        this.mp += 250;
        this.str += 20;
        }
    }

둘은 거의 동일한 모습을 가지고 있지만 다르다. 위의 것은 function을 이용해서 Class와 같은 기능을 구현한 것이고, 밑의 것은 class 문법을 이용해서 명시적으로 class를 만드는 것이다. function을 이용할 때는 해당 명칭을 가진 함수 자체가 생성자 함수가 되고, class 문법에서는 constructor라는 별칭을 가진 함수가 생성자 함수가 된다.

기본적으로 둘다 내부 메소드 정의영역과, 프로퍼티 초기화 영역이 구분되어 있다. function 키워드를 이용한 경우에는 해당 함수 안에 프로퍼티를 정의하고 함수 밖에서 prototype을 접근해서 method를 추가하는 방식으로 method를 정의한다. class 문법을 이용한 경우에는 constructor 내부(클래스 필드)에서 프로퍼티를 초기화하고, class 안에서 method를 정의한다.

class 상속

클래스 상속이라는 것은 다른 것보다 가장 중요한 개념은 기능 확장이다. 예를 들어, 어떤 Class를 정의해서 사용하고 있었는데 추가적으로 필요한 기능이 생겼을 때 코드를 전면적으로 수정하는 것이 아니라 추가적으로 필요한 기능을 가져오거나 기능을 일부 변경해야할 때 상속을 사용한다. 다른 클래스를 만들어서, 해당 클래스로부터 method나 property를 상속받아 해당 method나 property를 조작해서 새로운 기능을 만들어서 method로 정의해서 쓰거나 필요해지는 property를 추가해서 사용할 수 있다.

클래스 개념에서 가장 중요한 것은 확장성이다. syntex의 기본개념자체가 기능을 확대하기 위함이다.

아래의 코드를 보도록 하자.

class Cal_essen(){
		constructor(){

	}
}