쏙쏙 들어오는 함수형 코딩 - #5

#5 - 더 좋은 액션 만들기

암묵적 입력과 출력은 적을수록 좋다.

• 암묵적인 입/출력을 사용한다면 강하게 연결된 컴포넌트이며, 모듈로서 개별로 사용할 수 없다.
• 암묵적 입력이 있는 경우, 입력 값을 사용하는 함수가 동작하는 과정에서 입력값이 바뀌지 않도록 관리해야한다.
• 암묵적 출력이 있는 경우, 출력 로직을 선택적으로 사용하기 힘들다.
• 암묵적 입/출력이 많은 경우 , 테스트가 외부의 영향을 많이 받게 되어 어렵다.

연습문제 Solve

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

function calc_cart_total(cart) {
	cart_total = calc_total(cart);
	set_cart_total_dom(cart_total);
	update_shipping_icons(cart);
	update_tax_dom(cart_total);
}

function set_cart_total_dom(cart_total) {
	...
	cart_total
	...
}

function update_shipping_icons(cart) {
	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;
		var new_cart = add_item(cart, item.name, item.price);
		
		if(gets_free_shipping(new_cart)) {
			button.show_free_shipping_icon();
		} else {
			button.hide_free_shipping_icon();
		}
	}
}

function update_tax_dom(cartTotal) {
	set_tax_dom(calc_tax(cartTotal));
}

설계는 엉켜있는 코드를 푸는 것

• 함수를 통해 관심사를 분리할 수 있다.
• 복잡한 로직을 나누는 것만이 항상 좋은 방법인 것은 아니며, 분리한 것을 조합함으로서 더 좋은 방향으로 설계할 수 있다.
• 잘 설계한 함수의 장점
  • 재사용하기 쉽다.
  • 유지보수하기 쉽다.
  • 테스트하기 쉽다.

일반적인 로직은 분리하여 공통으로 사용할 수 있는 유틸(util)로 만들기

// before
function add_item(cart, item) {
	var new_cart = cart.slice();
	new_cart.push(item);
	return new_cart;
}

// after
function add_element_last(array, item) {
	let new_array = array.slice();
	new_array.push(item);
	return new_array;
}

범용성있는 변수명으로 변경하여 장바구니에 제품을 추가하는 함수에서 배열에 새 요소를 주입하는 함수로 변경하여 재사용성을 높였다.

연습문제 Solve

// before
function update_shipping_icons(cart) {
	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;
		var new_cart = add_item(cart, item.name, item.price);
		
		if(gets_free_shipping(new_cart)) {
			button.show_free_shipping_icon();
		} else {
			button.hide_free_shipping_icon();
		}
	}
}

// after
function update_shipping_icons(cart) {
	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;

		const is_free_shipping = get_free_shipping_with_new_item(cart, item);
		set_free_shipping_icon(is_free_shipping);
	}
}

function get_free_shipping_with_new_item(cart, item) {
	let new_cart = add_item(cart, item);
	
	return gets_free_shipping(new_cart)
}

function set_free_shipping_icon(is_free_shipping) {
	if(is_free_shipping) {
			button.show_free_shipping_icon();
		} else {
			button.hide_free_shipping_icon();
		}
}