[함수형 프로그래밍] 4장 액션에서 계산 빼내기

4장 액션에서 계산 빼내기

 

함수형 프로그램 적용 전 장바구니 예시

 

var shopping_cart = [];
var shopping_cart_total = 0;

// 장바구니 카트에 추가
function add_item_to_cart(name, price) {
	shopping_cart.push({
		name: name,
		price: price,
	});
	calc_cart_total();
}

// 장바구니 총액 계산
function calc_cart_total() {
	shopping_cart_total = 0;
	for (var i = 0; i < shopping_cart.length; i++) {
		var item = shopping_cart[i];
		shopping_cart_total += item.price;
	}
	set_cart_total_dom();
	update_shipping_icons();
	update_tax_dom();
}

// 일정 금액 이상이면 무료 배송 아이콘 보여줌
function update_shipping_icons() {
	var buy_buttons = get_buy_buttons_dom();
	for (var i = 0; i < buy_buttons.length; i++) {
		var button = buy_buttons[i];
		var item = button.item;
		if (item.price + shopping_cart_total >= 20) button.show_free_shipping_icon();
		else button.hide_free_shipping_icon();
	}
}

//세금 계산
function update_tax_dom() {
	set_tax_dom(shopping_cart_total * 0.1);
}

 

테스트 재사용시 고려해야할 점

 

• DOM 업데이트와 비즈니스 규칙은 분리되어야함
• 전역변수가 없어야함
• 전역변수에 의존하지 말아야함
• 함수가 결과값을 리턴해야함

 

함수형 프로그래밍 기법

 

• 액션에서 계산 빼내기
• 계산 추출 단계
  • 계산 코드를 찾아 빼냄
  • 새 함수에 암묵적 입력과 출력을 찾음
  • 암묵적 입력은 인자로 암묵적 출력은 리턴값으로 바꿈 

 

내가 수정한 코드 예시

 

// var shopping_cart = [];
// var shopping_cart_total = 0;

// 장바구니 카트에 추가
function add_item_to_cart(name, price) {
	var shopping_cart = add_shopping_cart(name, price);
	calc_cart_total(shopping_cart);
}

function add_shopping_cart(name, price) {
	var shopping_cart = [];
	shopping_cart.push({
		name: name,
		price: price,
	});
	return shopping_cart;
}
// 장바구니 총액 계산
function calc_cart_total(shopping_cart) {
	shopping_cart_total = cal_total(shopping_cart);
	set_cart_total_dom();
	update_shipping_icons(shopping_cart_total, 20);
	update_tax_dom(shopping_cart_total, 0.1);
}

function cal_total(shopping_cart) {
	shopping_cart_total = 0;
	for (var i = 0; i < shopping_cart.length; i++) {
		var item = shopping_cart[i];
		shopping_cart_total += item.price;
	}
	return shopping_cart_total;
}

// 일정 금액 이상이면 무료 배송 아이콘 보여줌
function update_shipping_icons(total, price) {
	var buy_buttons = get_buy_buttons_dom();
	for (var i = 0; i < buy_buttons.length; i++) {
		var button = buy_buttons[i];
		var item = button.item;
		if (item.price + total >= price) button.show_free_shipping_icon();
		else button.hide_free_shipping_icon();
	}
}

//세금 계산
function update_tax_dom(total, taxPercent) {
	set_tax_dom(total * taxPercent);
}

• 전역변수를 모두 제거함 
• 상수값(20, 0.1등) 을 매개변수로 전달받도록 수정함

 

 

책에서 수정한 코드 예시

 

var shopping_cart = [];
var shopoing_cart_total = 0;

function add_item_to_cart(name, price) {
	shopping_cart = add_item(shopping_cart, name, price);
	calc_cart_total();
}

function calc_cart_total() {
	shopping_cart_total = calc_total(shopping_cart);
	set_cart_total_dom();
	update_shipping_icons();
	update_tax_dom();
}

function update_shipping_icons() {
	var buttons = get_buy_buttons_dom();
	for (var i = 0; i < buttons.length; i++) {
		var button = buttons[i];
		var item = button.item;

		if (gets_free_shipping(shopping_cart_total, item.price)) button.show_free_shipping_icon();
		else button.hide_free_shipping_icon();
	}
}

function update_tax_dom() {
	set_tax_dom(calc_tsx(shopoing_cart_total));
}

function add_item(cart, name, price) {
	var new_cart = cart.slice();
	new_cart.push({
		name: name,
		price: price,
	});
	return new_cart;
}

function calc_total(cart) {
	var total = 0;
	for (var i = 0; i < cart.length; i++) {
		var item = cart[i];
		total += item.price;
	}
	return total;
}

function gets_free_shipping(total, item_price) {
	return item_price + total >= 20;
}

function calc_tax(amount) {
	return amount * 0.1;
}

내가 작성한 코드와의 차이점

• gets_free_shipping을 함수로 따로 빼서 계산함 
• 전역변수를 아직 제거하지 않음 
• 20, 0.1 등 인자값을 함수안에 포함되어있음 

 

요점

• 액션은 암묵적인 입력 또는 출력을 가지고 있음
• 계산의 정의에 따르면 계산은 암묵적인 입력이나 출력이 없어야함
• 전역변수는 일반적으로 암묵적 입력 혹은 출력이 됨
• 암묵적 입력은 인자로 바꿀 수 있음
• 암묵적 출력은 리턴값으로 바꿀 수 있음
• 함수형 원칙을 적용하면 액션은 줄어들고 계산은 늘어남