[함수형 코딩] 더 나은 액션 만들기

쏙쏙 들어오는 함수형 코딩

이전 글인 '액션, 계산, 데이터란?'에서, 액션을 잘못 사용했을 경우 전체 코드에 액션이 퍼질 수 있고 테스트가 어려워질 수 있다고 이야기 했었다. 하지만 그렇다고 액션이 나쁘고 불필요한 것은 아니다. 오히려 액션이 있어야 동작하는 웹을 구현할 수 있는만큼 액션은 필요하다. 때문에 우리는 좋은 액션을 만들기 위해 노력해야 한다.

비즈니스 요구 사항과 설계를 맞추기

예시로 살펴보는 것이 가장 이해가 잘 된다. 아래 예시를 보면 gets_free_shipping이라는 함수가 있다. 이 함수는 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 역할을 한다. 하지만 인자로 장바구니를 넘기는 것이 아닌, 제품의 총합과 가격으로 확인하고 있다. 때문에 이 부분은 요구 사항과 맞추기 위해 장바구니를 인자로 받도록 수정해야 한다.

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

// After: 장바구니를 인자로 넘긴다.
function gets_free_shipping(cart) {
	return calc_total(cart) >= 20; // 별도의 계산 함수를 사용해 금액 합계를 구한다.
}

 

암묵적 입력과 출력 줄이기

'암묵적이라는 단어는 알겠는데, 암묵적 입출력이 도대체 뭐지...?'라는 생각을 했었다. 이건 책에 나오는 한 마디로 쉽게 정의할 수 있다.

 

인자가 아닌 모든 입력은 암묵적 입력이고 리턴값이 아닌 모든 출력은 암묵적 출력입니다.

 

암묵적 입력 vs 명시적 입력

전역 변수, 그리고 React라고 가정한다면 useState로 관리하는 상태, 전역 상태로 관리하는 값 등, 위 정의에서 나온 것처럼 인자를 제외한 모든 입력은 암묵적 입력이라고 부른다. 반대로 인자는 명시적 입력이라고 부른다.

 

암묵적 출력 vs 명시적 출력

리턴값은 명시적 출력이며, 이를 제외한 모든 출력은 암묵적 출력이다. 예시를 보면 좀 더 명확하게 알 수 있다. 

var total = 0;
function add_to_total (amount) {
    console.log("Old total: " + total); // 암묵적 출력 (cf. 전역변수 total을 읽는 것은 암묵적 입력)
    total += amount; // 암묵적 출력
    return total; // 명시적 출력
}

console에 출력하는 것과 전역 변수를 업데이트 하는 것은 모두 암묵적 출력에 해당된다.

 

Before: 암묵적 입출력을 사용

function calc_cart_total() {
    calc_total();
    set_cart_total_dom();
    update_shipping_icons();
    update_tax_dom();
}

function 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; // 전역 변수를 업데이트
    }
}

 

After: 암묵적 입출력을 제거

function calc_cart_total() {
    shopping_cart_total = calc_total(shopping_cart); // shopping_cart를 인자로 전달, return 받은 값을 전역 변수에 할당
    set_cart_total_dom();
    update_shipping_icons();
    update_tax_dom();
}

function cart_total(cart) {
    var total = 0; // 로컬 변수를 생성
    for(var i=0; i<cart.length; i++) { // 전역 변수 대신 인자를 사용
        var item = cart[i];
        total += item.price; // 로컬 변수를 업데이트
    }
    return total; // 최종 값을 return
}

 

실무에 적용한다고 생각했을 때, 암묵적 입출력을 최소화하는 것만으로도 훨씬 개선된 코드가 될 수 있다고 생각한다. 코드 간 의존성이 약해지며 재사용성 또한 높아질 수 있고 이전 글에서도 이야기 했던 것처럼 테스트 또한 쉽게 작성이 가능할 것이다.