7-3. 기본형을 객체로 바꾸기

적용 시점

  • 데이터가 단순히 출력 이상 기능이 필요해진 순간

절차

  1. 아직 변수를 캡슐화하지 않았다면 캡슐화한다.

  2. 단순한 값 클래스를 만든다. 생성자는 기존 값을 인수로 받아서 저장하고, 이 값을 반환하는 게터를 추가한다.

  3. 정적 검사를 수행한다.

  4. 값 클래스의 인스턴스를 새로 만들어서 필드에 저장하도록 세터를 수정한다. 이미 있다면 필드의 타입을 적절히 변경한다.

  5. 새로 만든 클래스의 게털르 호출한 결과를 반환하도록 게터를 수정한다.

  6. 테스트한다.

  7. 함수 이름을 바꾸면 원본 접근자의 동작을 더 잘 드러낼 수 있는지 검토한다.

예시

❌Before

class User {
	constructor({ grade, name, }) {
		this._grade = grade;
		this._name = name;
	}
	...
}		

// grade가 보여주는 용도 이외에 grade를 기준으로 사람 수를 센다.
const users = 
	[
		new User({ grade: 'A', name: 'Peanut' }), 
		new User({ grade: 'B', name: 'Fish' }), 
		new User({ grade: 'A', name: 'Tree' })
	]				

users.reduce((acc, cur) => {
	if (cur.grade === 'A') {
		return { ...acc, A: acc.A + 1 };
	} else {
		return { ...acc, B: acc.B + 1 }
	}
}, {A: 0, B: 0})

// user의 grade를 가지고 특정 등급 이상인지 검사한다.
const user1 = new User({ grade: 'A', name: '아저씨' });
const getBetterGrade = (user, grade) => user.grade > grade ? user.grade : grade;

// user의 grade를 가지고 점수로 변환한다.
const user2 = new User({ grade: 'B', name: '아줌마' });
const gradeToPoint = (user) => {
	...
}

⭕After

class Grade {
	constructor(value) {
		this._value = value;
	}
	getValue() { return this._value; }
	getbetterGrade(grade) {
		return this._value > grade : this._value : grade
	}
	gradeToPoint() {
		if (this.value === 'A') {
			return 100;
		}
		if (this.value === 'B') {
			return 90;
		}
		if (this.value === 'C') {
			return 80;
		}
		if (this.value === 'D') {
			return 70;
		}
		return 60;
	}
}

class User {
	constructor({ grade, name }) {
		this._grade = grade;
		this._name = name;
	}
	get gradeValue() { return this._grade.getValue(); }
	set grade(value) { this._grade = new Grade(value); }
}

	[
		new User({ grade: new Grade('A'), name: 'Peanut' }), 
		new User({ grade: new Grade('B'), name: 'Fish' }), 
		new User({ grade: new Grade('A'), name: 'Tree' })
	]				

users.reduce((acc, cur) => {
	if (cur.getGrade === 'A') {
		return { ...acc, A: acc.A + 1 };
	} else {
		return { ...acc, B: acc.B + 1 }
	}
}, { A: 0, B: 0 })

Last updated