자바스크립트에서의 Class

객체지향 언어에서

 

Class란 일종의 설계도와 같다고 볼 수 있습니다.

 

그리고 Class라는 설계도를 통해 생성되는 물건들이 Object가 되는것입니다.

 

또 이 Object를 다른 말로 instance of class(한국말로 클래스의 예)라고도 합니다.

 

대부분의 객체지향 언어들은 Class의 개념을 기반으로 만들어진 언어들이 많습니다.

 

 

자바스크립트는 개발 당시 시간을 10일밖에 주어지지 않았기 때문에 급하게 만들 수밖에 없었습니다.

 

그래서 prototype을 이용한 객체지향 언어가 되어버렸습니다.

 

 

하지만 점점 자바스크립트의 사용자가 늘고 웹에서 중요한 언어로 자리를 차지하게 되면서 

 

ES6에서 자바스크립에도 Class를 도입하게 됩니다.

 

 

우선, Class가 없던 시절에 객체지향적으로 어떻게 구현했는지 알아보겠습니다.

 

객체를 생성할 때 속성이 같은 여러 개의 객체를 만드는 과정을 보겠습니다.

 

여러개의 obj 만들기

 

이런 식으로 값은 다르지만 그 외의 것들은 중복되는 코딩이 보입니다.

 

만약 저 속성들이 2개가 아닌 10개가 된다고 상상해봅시다.

 

한눈에 알아보기도 힘들며 코딩도 길어져 귀찮아지게 됩니다.

 

이런 귀찮음을 방지하기 위해 객체를 만드는 함수를 선언하여 이용하여 구현할 수 있습니다.

 

function을 이용한 객체 만들기

위 그림은 Person이라는 설계도를 정의하고 new 연산자를 통해 instance를 만들어 각 변수에 객체를 할당시키는

 

모습이 다른 언어의 Class와 아주 유사합니다.

 

위 두 가지 경우를 비교하면 해당 객체의 이름을 가지고 있냐 없냐 뿐이지 결과는 같습니다.

 

추가적으로 객체를 만들어주는 함수 안에 함수를 정의하여 사용할 수 있습니다.

 

---

자바스크립트의 Class

 

자 이제는 Class가 도입된 ES6를 살펴보겠습니다.

 

class를 이용하여 객체 탄생

자바스크립트에서 생성자는 constructor함수를 이용하여 초기화를 시켜줍니다. 

 

그리고 해당 클래스 안에는 사람과 관련된 행동도 같이 정의할 수 있습니다.

 

보시는 거와 같이 자바에서의 클래스 정의랑 거의 유사하다고 볼 수 있습니다.

 

좀 더 객체지향적인 언어로 보이게 됐습니다. 

 

이제 캡슐화를 이용하여 사용자가 이상한 값을 넣지 않도록 유도하여 데이터를 보호하는 것을 해보겠습니다.

 

get, set을 이용한 데이터 보호

age의 값을 가져오려고 했을 뿐인데 에러가 발생했습니다.

 

해당 에러는 너무 많이 호출되어 stack에 명령어가 쌓여 overflow가 발생한 에러입니다.

 

위 에러가 발생한 이유는 class에서 age를 get과 set을 이용하여 값을 넣어주게 되면

 

자동으로 age라는 함수를 호출하게 됩니다.

 

그리고 그 안에서 다시 this.age에 값을 넣어주게 되면 또다시 호출하여 무한 호출을 하게 되어 

 

에러가 발생되는 것입니다.

 

 

해결 방안) 

 

이 에러를 해결하기 위해서는 get, set 함수안의 변수의 이름 앞에 _를 붙이면 됩니다.

 

_age를 사용하면 _는 자동으로 사라지게 되고 age라는 변수로 이름을 지정하게 됩니다.

 

_age를 사용하여 무한호출 방지

 

 

사용자의 입력 제한하기

 

이제 사용자가 엉뚱한 값을 넣어줬을 경우 문제를 해결해보겠습니다.

 

나이는 음수가 나올 수가 없습니다. 하지만 사용자가 음수 값을 넣어준다면 문제가 발생합니다.

 

이를 방지하기 위해 set함수에 일정 조건을 주게 됩니다.

 

특정 조건을 주어 데이터를 보호

위 그림과 같이 -1을 주었지만 set함수에서 0보다 작으면 0으로 초기화시켜

 

데이터를 보호할 수 있습니다.

 

---

 

 

여기까지는 자바스크립트에서의 class 사용법을 알아보았습니다.

 

이제 추가적으로 사용할 수 있는 기능들을 살펴보겠습니다.

 

private

 

자바스크립트에서도 private 선언이 가능합니다. 

 

private은 class 내부에서만 접근이 가능하도록 하여 외부의 접근을 막아 데이터를 숨길 수 있습니다.(은닉화)

 

class private 선언

private를 선언하려면 #을 앞에 써주면 되고 public 아무것도 쓰지 않으면 자동으로 public이 됩니다.

 

결과에서 보이듯이 외부에서 직접 접근해도 undefined가 출력이 되고

 

함수를 통해 접근을 하려 해도 undefined가 출력이 됩니다.

 

(마지막에 출력된 undefined는 아직 왜 출력이 되는지 모르겠습니다....)

 

이렇게 데이터를 완벽하게 숨길수 있는 것이 가능하지만

 

이 기능이 구현된 지 얼마 되지 않아서 최신 브라우저에서만 사용이 가능합니다.

 

 

 

static

 

static에 대해서 알아보겠습니다.

 

static은 프로그램이 시작하자마자 바로 메모리가 할당되며 스코프의 범위가 전역으로 잡히게 됩니다.

 

먼저 예를 보겠습니다.

 

static을 이용한 접근

Article 클래스를 이용하여 객체를 만들게 되었는데 생성자로 만들어진 변수는 접근이 가능하나

 

static으로 지정된 함수를 접근하려고 하면 article 1에 그런 함수는 없다고 에러가 출력이 됩니다.

 

앞에서 말했던 것처럼 static 프로그램이 시작하자마자 데이터라는 영역에 메모리가 할당되어 

 

static이 들어간 함수나 변수는 article1 객체 안의 소속되어있지 않습니다.

 

그렇다면 접근할 수 있는 방법은 무엇인가??

 

static으로 지정된 변수 및 함수에 접근

바로 Article 클래스 자체에서 접근이 가능합니다.

 

프로그램이 시작되자마자 class인 Article에서 static으로 지정된 변수 및 함수가 등록되기 때문에

 

위와 같은 일이 가능하게 되는 것입니다.

 

이런 특성을 이용하여 공통적으로 사용되는 변수 및 함수를 미리 구현하여

 

프로그래머가 편하게 코딩할 수 있도록 해주는 것이 가능합니다.