javascript 에서의 Class를 활용한 모듈화

Class를 활용한 모듈화를 하기 앞서서 간단하게 Class에 대해서 알아보고 넘어가겠습니다!

Class란..?

MDN에서는 클래스(class)를 다음과 같이 설명하고 있습니다.

class는 객체를 생성하기 위한 템플릿입니다. 클래스틑 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.

프로토 타입 메서드 차이점

클래스의 내용중 이번 모듈화 파트에서 사용할 프로토타입 메서드 선언 방식의 차이점을 확인해보겠습니다!

// console.log()는 생략하고 값만 적었습니다.
function Person(name,age){
	this.name = name;
	this.age = age;
}

//프로토타입 메서드 생성
Person.prototype.isAdult = function(){
	return !!(this.age>18);
}

const p1 = new Person('김철수', 20); //Person { name : "김철수", age : 20}
const p2 = new Person('신짱구', 5);  //Person { name : "신짱구", age : 5}

p1.isAdult();  // true
p2.isAdult();  // false

//p1의 프로토타입 확인
Object.getPrototypeOf(p1)  // Person { isAdult : f }
Person.prototype           // Person { isAdult : f }

이를 Class 를 활용하여 작성하면 다음과 같습니다.

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	isAdult() {
		return !!(this.age > 18);
	}
}

비고) class 에서의 private변수

//생성자 함수

//클래스
class Person {
	//#키워드를 변수명 앞에 붙이면 private처럼 외부에서 접근을 못한다
	#name = "";
	#age = 0;
	constructor(name, age) {
		this.#name = name;
		this.#age = age;
	}
	isAdult() {
		return !!(this.#age > 18);
	}
}

여기서 생성자 함수 Person과 클래스 Person의 차이점은 간단하게 다음과 같습니다

• 생성자 함수 Person 과 달리 클래스 Person은 new 키워드가 강제 됩니다.
  - ex) const p1 = new Person
• 프로토 타입 메서드의 작성 방식이 다릅니다
  - 생성자 함수의 경우 Person.prototype.생성자함수 형태로 작성 해야 하지만
  - 클래스의 경우 Person 클래스 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 됩니다.
• 프로토 타입의 경우 변수명 앞에 #을 붙여서 명시적으로 private변수로 만들 수 있습니다.

Class를 활용한 모듈화

기본적으로 모듈화는 재사용을 용이하게 하기 위해 모듈단위로 나누어서 필요할때 import 해서 사용하는 방법입니다

간단한 예제로 counter를 구현하면서 모듈화를 해보겠습니다

먼저 count라는 변수가 있어야 하는데 이를 직접 수정하다가 값을 Number 가 아닌 다른 타입으로 들어올 수 있으니 기본적으로 private 하게 선언을 한 후 메서드들을 통해 값을 읽거나 수정하겠습니다.

추려보자면

1. private count 변수
2. 직접 수정은 신뢰하지 않는다
3. 메서드를 통해 읽기, 쓰기를 진행한다

이를 기반으로 코드로 작성하면 다음과 같습니다!

class Counter {
	//private
	#count = 0;
	
	
	constructor(count = 0) {
		this.#count = count;
	}
	
	//프로토타입 메서드
	increase() {
		this.#count++;
	}
	decrease() {
		this.#count--;
	}
	getValue() {
		return this.#count;
	}
}

사용 예제

const count = new Counter();
count.increase(); 
count.increase();
count.increase();
count.increase();
count.getValue(); // 4
  


const count2 = new Counter();

// count1 과 count2는 서로 다를 인스턴스를 가진다  
count2.getValue()// 0


// count2.#name 으로는 값에 접근할 수 없다.

이처럼 클래스를 활용해서 자주 사용할 수 있는 counter 를 모듈화 하면서 동시에 count라는 변수의 직접 수정을 방지해서 값이 이상해 지는 것을 미연에 방지 할 수 있습니다.