자바스크립트 클래스(생성자) 만드는 방법

javaScript Class

자바스크립트에서 클래스란...생성자 함수이다!!!

함수가 특정기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 포장하는 기술입니다.

다시말해서, 연관있는 변수와 함수를 하나로 묶을 때 사용하는 문법입니다.

이렇게 클래스로 포장하는 이유는 객체 단위로 코드를 그룹화 할 수 있으며 코드를 재사용하기 위해서 입니다.

클래스로 포장하는 이유는?

객체 단위로 코드 그룹화 및 코드 재사용성을 사용하기 위함입니다.

함수와 비교해서 설명하면 다음과 같이 비교 할 수 있습니다.

1) 함수기반 단위

포장내용 :  특정 기능을 하는 변수 + 구문(알고리즘)등을 감싸는 것입니다.

기능 : 

- 기능 단위의 코드 그룹화

- 기능 단위의 중복 코드 제거 및 코드 재사용성

2) 클래스기반 단위

포장내용: 연관 있는 변수와 함수를 감싸는 것입니다.

기능:

- 객체 단위의 변수와 함수

- 객체 단위의 중복 코드 제거 및 코드 재사용.

다시 말해서  UI로 슬라이더가 있는 경우 로직을 짤 때 슬라이더의 경우 indicate 기능, next, prev 버튼등의 여러 기능들이 있을 경우에 대개는 함수 기반 단위의 코딩은 슬라이더의 필요한 기능들을 각각 로직을 구현하는데 이런 방식으로 구현하게 되면 전역스코프도 오염될 뿐더러 소스 가독성도 떨어지며 그로 인한 유지보수도 힘들어집니다. 

하지만 클래스 단위로 코딩을 하게 되면 슬라이더에 대한 기능들을 모두 그룹화하여 관리할 수 있게 됩니다.

그래서 클래스의 대표적인 기능으로 연관 있는 변수와 함수를 그룹화할 수 있습니다. 

함수를 그룹화한다는 것이 중요합니다.

이렇게 클래스를 사용함으로써 얻는 이점은 겍체 단위의 중복 코드를 제거 할 수 있으며 코드 재사용성이 좋아집니다.

코드의 재사용성이라 함은 예를 들어서 탭패널 3개가 들어 있는 웹 페이지를 만들어야 하는 경우 클래스 하나로 독립적으로 동작하는 3개의 탭패널을 모두 동작하게 할 수 있다는 것입니다.

함수 기반 단위의 코딩은 코드가 구분없이 작성되어 있기 때문에 이슈가 발생할 경우 해당 이슈되는 코드를 쉽게 찾을 수 없으며, 큰 프로젝트에서 다수의 사람이 협업을 이뤄 진행하게 될 때 개발자간에 같은 이름의 변수와 함수를 만들어 사용할 확률이 많아지기 때문에 그로 인한 이슈,충돌의 위험성이 내포되어 있습니다.

하지만 클래스란 포장기술을 이용하면 산발적으로 흩어져 있는 코드들을 한 곳에 부품별로 포장하여 그룹화시켜 관리할 수 있도록 해줍니다.

클래스(생성자) VS 일반함수

	클래스(생성자함수)	일반 함수
포장 내용	연관있는 변수와 함수	특정기능을 하는 변수 + 구문
기능	객체 단위의 코드를 그룹화  객체 단위의 중복 코드 제거 및 코드의 재사용성	기능 단위의 코드를 그룹화 기능 단위의 중복 코드 제거 및 코드의 재사용성

자바스크립트에서 클래스를 만드는 방법 3가지

사실 자바스크립에는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않습니다.

생성자 함수가 다른 언어에서의 클래스(Class)와 유사한 개념이기 때문에 클래스를 사용할 수 있는 방법이 있습니다. 

그렇기 때문에 자바스크립트에서는 클래스는 없지만 OOP 와 같이 비슷하게 사용할 수 있는 문법이 존재합니다.

다음은 그 세 가지 방법입니다.

1) 리터럴 방식

2) 함수 방식

3) 프로토타입 방식

1) 리터럴 방식의 클래스

var 인스턴스 = {
  프로퍼티1 : 초기값,
  프로퍼티2 : 초기값,
  메서드1 : function() {

  },
  메서드2 : function() {

  }

}

2) 함수 방식의 클래스

function 클래스이름() {
  this.프로퍼티1 = 초기값;
  this.프로퍼티2 = 초기값;
  
  this.메서드1 = function() {
  
  }
  this.메서드2 = function() {
  
  }

}

var 인스턴스 = new 클래스이름(); 

3) 프로토타입(prototype) 방식의 클래스

function 클래스이름() {
  this.프로퍼티1 = 초기값;
  this.프로퍼티2 = 초기값;
}

클래스이름.prototype.메서드1 = function() {

}

클래스이름.prototype.메서드2 = function() {

}

위와 같이 세 가지 패턴으로 클래스를 사용할 수 있습니다. 

하지만 세 가지 패턴마다 장,단점이 있기 때문에 상황에 맞게 선택적으로 사용해야 합니다.

한가지 단점을 말씀드려 보자면 단점이 없어 보이는 함수방식의 클래스는 아주 치명적인 단점을 가지고 있습니다. 

바로 인스턴스를 생성할 때마다 내부의 모든 메서드가 독립적으로 만들어진다는 것입니다. 

예를 들어 탭메뉴를 제작할 때 하나의 클래스로 여러 개의 탭메뉴를 개별적으로 동작한다고 했을 때 클래스는 하나이지만 각각의 탭메뉴에 대한 인스턴스를 생성하게 되면 그 인스턴스마다 클래스 내부에 정의된 변수나 함수들이 독립적으로 각각 생성되어 메모리 누수가 생길 여지가 많습니다.

즉, 인스턴스마다 중복 변수와 중복 메서드들이 생성됩니다.

이번 포스팅에서는 간단하게 클래스를 사용할 때 알아야할 몇 가지 개념들만 짚고 넘어가 보도록 하겠습니다.

인스턴스(instance)

일반적인 함수의 경우는 함수를 선언한 후 함수를 호출해줘야 동작하듯이 클래스의 경우는 클래스 인스턴스를 생성해야만 클래스에 들어 있는 함수들의 내부 기능들을 사용할 수 있습니다.

다시말해서, 클래스가 설계 도면이라면 인스턴스는 설계에 따른 실체가 담겨 지는 곳입니다.

클래스(생성자 함수)는 설계도, 인스턴스는 실체이다.

예) 붕어빵을 제작한다고 가정했을 때 : 붕어빵틀 = 클래스, 붕어빵 = 인스턴스

 

그리고 일반적으로 인스턴스 생성 방법은 다음과 같습니다.

var 인스턴스 = new 클래스이름();        // new 키워드를 사용

객체(Object)란?

객체는 인스턴스의 또 다른 이름이고 그때 그때 상황에 따라 인스턴스 또는 객체라고 부르고 있습니다.

인스턴스는 주로 new 연산자를 이용하여 클래스의 실체를 생성할 때 사용하고 이 외에 클래스에서 제공하는 프로퍼티와 메서드를 사용한다고 했을 때의 경우를 객체라고 말합니다.

그리고 프로퍼티는 클래스 내부에 만드는(포장하는) 변수를 프로퍼티티라고 부르며 멤버 변수라고도 합니다.

메서드는 클래스에 만드는(포장하는) 함수들을 메서드라고 부르며 멤버 함수라고도 부릅니다.

메서드는 주로 객체의 프로퍼티 값을 변경하거나 알아내는 기능과 클래스를 대표하는 기능이 담기게 됩니다.

지금까지 간단히 클래스에 대해 알아보았으며 아래의 링크에서는 같은 내용일 수는 있으나 조금 다른 접근방식의 설명,내용들을 보실 수 있습니다.

자바스크립트 생성자 기초 알아보기

자바스크립트 생성자를 클래스라 부르는 이유

Jaehee's WebClub