[리팩터링 2판] 12.6 타입 코드를 서브클래스로 바꾸기

0.  리팩토링 전 전체 코드

class Employee {
	#name;
	#type;
	constructor(name, type) {
		this.validateType(type);
		this.#name = name;
		this.#type = type;
	}

	validateType(arg) {
		if (!['engineer', 'manager', 'salesperson'].includes(arg)) {
			throw new Error(`${arg}라는 직원 유형은 없습니다.`);
		}
	}

	get type() {
		return this.#type;
	}

	toString() {
		return `${this.#name} (${this.#type})`;
	}
}


const mandoo = new Employee('기획하는만두', 'engineer');
const gom = new Employee('코딩곰', 'manager');

 

1.  문제점

constructor(name, type)라고 해두면 외부에서 어떤 type이 있는지 모르니까 어떤 type을 제공해줘야 할 지 파악하는 비용이 발생한다. 특히나 js 프로젝트에서는 타입이 명시되어 있지 않기 때문에 어떤 타입이 가능한지 유추하기 어렵다.

현재 코드에서는 constructor에서 validateType(type)해주면서 유효성 검사를 해주고 있는데, 전달된 문자열이

['engineer', 'manager', 'salesperson']에 해당하지 않으면 에러를 던지는 코드이다.

이렇게 생성자에서 에러를 던지는 것은 정말 나쁜 관례이다.

그러므로, validateType를 생성자에서 작성하지 않아도 되게끔 리팩토링하는 것이 목표이다. + 타입 필드 제거

 

2.  리팩터링 전략

(1) 타입 코드 필드를 자가 캡슐화한다.

(2) 타입 코드 값에 해당하는 서브클래스를 만든다. 타입 코드 게터 메서드를 오버라이드하여 해당 타입 코드의 리터럴 값을 반환하게 한다.

(3) 매개 변수로 받은 타입 코드와 방금 만든 서브클래스를 매핑하는 선택 로직을 만든다.

(4) 타입 코드 필드를 제거한다.

(5) 타입 코드 접근자를 이용하는 메서드 모두에 메서드 내리기와 조건부 로직을 다형성으로 바꾸기를 적용한다.

 

3. 예제 코드 

(1) 리팩터링 전

class Employee {
	#name;
	#type;
	constructor(name, type) {
		this.validateType(type);
		this.#name = name;
		this.#type = type;
	}

	validateType(arg) {
		if (!['engineer', 'manager', 'salesperson'].includes(arg)) {
			throw new Error(`${arg}라는 직원 유형은 없습니다.`);
		}
	}
}

(2) 리팩터링 후

 

주안점: validateType(type)이 필요없게끔 고친다.

두가지 스타일로 리팩터링할 수 있다.

 

-1- 첫번째 스타일

타입별로 서브 클래스들을 만들어서

해당 서브클래스에서 타입 게터를 오버라이딩할 수 있도록 조치하고,

new를 사용할 때도 슈퍼클래스가 아니라 서브클래스로 생성해준다.  

class Employee {
	#name;
	constructor(name) {
		this.#name = name;
	}

	get type() {
		return null;
	}
	toString() {
		return `${this.#name} (${this.type})`;
	}
}

class Engineer extends Employee {
	get type() {
		return 'engineer';
	}

}

class Salesperson extends Employee {
	get type() {
		return 'salesperson';
	}
}

class ProductManager extends Employee {
	get type() {
		return 'pm';
	}
}

const mandu = new ProductManager('PM만두');
const introduceMandu = mandu.toString();
const gom = new Engineer('코딩곰');
const introduceGom = gom.toString();


console.log(introduceMandu);
console.log(introduceGom);

출력결과

 

 

-2- 두번째 스타일

 

직접적으로 생성할 수 있는 경우가 아닐 때,

 스태틱 팩토리 메서드 활용

class Employee {
	#name;
	constructor(name) {
		this.#name = name;
	}

	get type() {
		return null;
	}
	toString() {
		return `${this.#name} (${this.type})`;
	}
	static createEmployee(name, type) {
		switch (type) {
			case 'engineer':
				return new Engineer(name, type);
			case 'salesperson':
				return new Salesperson(name, type);
			case 'pm':
				return new ProductManager(name, type);
			default:
				throw new Error(`${type}라는 직원 유형은 없습니다.`);
		}
	}
}

class Engineer extends Employee {
	get type() {
		return 'engineer';
	}

}

class Salesperson extends Employee {
	get type() {
		return 'salesperson';
	}
}

class ProductManager extends Employee {
	get type() {
		return 'pm';
	}
}

const mandu = Employee.createEmployee('PM만두', 'pm');
const introduceMandu = mandu.toString();
const gom = Employee.createEmployee('코딩곰', 'engineer');
const introduceGom = gom.toString();
const navi = Employee.createEmployee('마케터나비', 'maketer');
const introduceNavi = navi.toString();

console.log(introduceMandu);
console.log(introduceGom);
console.log(introduceNavi);

출력 결과