심층 자바스크립트(3) -클래스란?-
자바스크립트를 포기했던 사람들 중에는 prototype객체, instance, private, public과 같은 용어들에 경직반응을 보이는 경우가 많다. 필자 역시 함수를 사용하면서부터 코딩이 즐겁게 느껴졌지만 정규표현식과 클로저가 등장하고, 프로토타입, 인스턴스의 개념을 완벽하게 습득하려고 하면서부터 코딩이 괴로웠다.
그리고 ES2015 이후 버전에서 등장한 Class는 위의 괴로움을 상당부분 해결했다. class를 사용하면 더 이상 복잡한 프로토타입 객체구문을 사용하지 않아도 된다.
문과생의 시각에서 클래스는 '종'을 뜻한다. 쉽게 생각해보자. 우리 인간도 동물이란 종에 속한다. 이 세상의 모든 사물과 개체는 상위의 어느 '종', Class에 속한다.
스마트폰, 컴퓨터, 자동차, 부모형제까지도 모두 각기 다른 종에 속한다. 다만 상위 종이 무엇인가에 따라 다른 기능을 부여받은 것일 뿐이다.
가령, 김xx라는 변호사가 있다. 김xx는 법조인이라는 Class(종)에 속하고, 동시에 인간이라는 Class(종), xx 김씨 가문이라는 Class(종) 등....에 속한다. 모든 개체들은 여러가지 상위 Class(종)를 갖고 있고, 기능과 특징을 상속받는다.
클래스(종)가 있기에 세상은 빠르게 발전했고, 또 돌아갈 수 있었다. 우리는 변호사가 무인자동차 인공지능 알고리즘을 하루 0시간도 연구하지 않을 것이라고 확신할 수 있다. 왜냐하면 그가 '법조인'이라는 Class에서 상속받은 일만을 하기 때문이다.
프로그래밍에서 Class가 하는 일도 자연법칙과 별반 다르지 않다.
클래스마다 속성과 기능이 정해져있고, 프로그래머는 상황에 따라 필요한 기능을 갖고 있는 클래스를 갖고와서 기능과 속성을 사용할 수 있다.(상속받는다고 함) 즉, 프로그래머가 클래스를 만든다고 하는 말은 '신이 하는 일'과 비슷하다. (태초에 신이라는 게 존재했다면, 자연법칙에 해당하는 각종 클래스들을 만들었을테니깐)
대략 클래스 개념을 이해했다면, 자바스크립트 문법에서 클래스를 만들어보자.
class Car{
}
let truck = new Car();
'차'라는 '종'을 세상에 만들기로 했다면, 위와 같이 class Car{ }를 선언하면 된다. '차'라는 종은 '변속기(기어)', 핸들, 엔진, 시트, 브레이크 기능, on/off기능 등 많은 속성과 기능
을 갖고 있다. class Car{ }내부에 핸들부터 각종 기능까지 밀어넣은 Car클래스를 만들었다. 그런데 손님이 '트럭'을 한대 생산해달라고 주문한다.
truck이란 '종(class)'을 새로 만들것인가? 아니면 만들어놓은 Car 클래스에서 공통된 기능(변속기, 브레이크, 핸들, 프레임,시트 등...)을 활용할 것인가?
객체지향을 생각한 프로그래머는 효율적인 방식의 재활용을 선택했다. 그래서 다음과 같이 코드를 재활용한다.
class Car{
constructor(){
this.gear = "8단 변속기";
this.engine = "TDI 8기통";
}
}
let truck = new Car();
console.log(truck.gear);
//>> 8단 변속기
『Class규칙::속성』
constructor(){}함수 부분에는 속성(객체의 프로퍼티)을 나열한다. 속성을 넣을 때는 this와 점(.)을 붙여서 속성명을 지정하고, 속성값에는 " "를 사용한다. 속성값을 넣은 후에는 세미콜론(;)을 붙여서 속성을 구별한다.
constructor부분을 스마트폰과 비교하면, 색상, 아몰레드, 재질과 같은 특성이 constructor(){}부분에 들어가고, 3D 카메라 기능, 홀로렌즈, 방수기능과 같은 '기능'들은 constructor(){}밖에 함수(메서드)를 만들어 사용한다.
class Smartphone{
constructor(){
this.name = "갤럭시A8";
this.color = "red";
this.camera_quantity = "tripple";
this.display = "아몰레드";
}
getName(){
return this.name;
}
setName(value){
this.name =value
}
setColor(value){
this.color = value;
}
3d_cam(){
console.log('3D카메라 작동')
}
}
let gallaxy_a10 = new Smartphone();
console.log(gallaxy_a10.name);
//>> 갤럭시A8
gallaxy_a10.setName('갤럭시A10');
console.log(gallaxy_a10.name);
//>>갤럭시A10
gallaxy_a10.3d_cam();
//>>3D카메라 작동
위의 코드를 이해했다면 클래스를 활용하는 일만 남았다. 다음 포스팅에서는 클래스를 활용하는 방향으로 진행해보자.