[함수형 코딩#4] 액션에서 계산 빼내기

절차적 방법 구현 ?  순차적 처리를 중요시 함 (컴퓨터가 처리하는 방향대로 코드를 작성함)
ㄴ단점 : 순서 바꾸면 결과 값 이상해질 수 있음 / 유지 보수 어렵다고 하고 코드가 길어질수록 가독성이 떨어짐
(대형 프젝 부적합함)

액션이 뭘까? 
ㄴ 외부에 영향을 줄 수 있는 것  (ex. 전역변수, DOM에서 읽고, 바꾸는 것)
ㄴ 액션이 하나만 있어도 그 함수 전체가 액션이 됨
ㄴ 부수효과가 있는 함수 
ㄴ 암묵적 입력 : 인자외 다른 입력 (부수효과)
ㄴ 암묵적 출력 : 리턴값 외 다른 출력 (부수효과)

 

함수의 입력과 출력
ㄴ명시적 입력 : 인자 
ㄴ명시적 출력 : 리턴값
ㄴ함수에 암묵적 입력과 암묵적 출력이 있으면 액션이 됨
ㄴ암묵적 입력을 명시적입력(함수의 인자)으로/ 암묵적 출력을 명시적출력(리턴값)으로 바꾸면 "계산"이 됨

 

테스트는 쉽게, 재사용하기 좋은 코드 만들기 

  1. DOM업데이트와 비지니스 규칙을 분리할 것 (분리안할 시, 비즈니스 규칙을 테스트하려면 DOM에서 값을 가져와야만 함)
  2. 전역변수가 없어야 함 (전역변수에 의존하면 재사용하기 좋지 않음)
  3. DOM을 사용할 수 없는 곳에서 실행된다고 가정하기 (암묵적 출력을 함수의 리턴값으로 바꾸기)
  4. 함수가 결과 값을 리턴하도록 하기 

 

액션에서 계산 빼내기   
ㄴ서브루틴 추출하기  (= 함수 추출하기 리팩토링)

  1. 기존 함수내에서 계산하는 코드를 빼고
  2. 빼낸 코드를 새로운 함수를 만들어넣기 
  3. 새로운 함수내 암묵적 입력, 암묵적 출력을 인자와 리턴값으로 바꿔주기

//서브루틴 추출전
let shoppingCart = [];
let shoppingCartTotal = 0;

function calcTotal (){
    shoppingCartTotal = 0;  //전역변수 사용 중
    
    for(let i = 0 ; i < shoppingCart.length; i++){
    		let item = shoppingCart[i];
        	shoppingCartTotal += item.price;
    	}
        
    setCartTotal();
    updateIcons();
    updateTax();
 }

 

 //서브루틴 추출후 
let shoppingCart = [];
let Total = 0;
 
function CartTotal(){

    Total = calcTotal(shoppingCart);   //새로 만든 함수의 리턴값을 Total이라는 전역변수에 할당
    setCartTotal();
    updateIcons();
    updateTax();
    
}

function calcTotal(shoppingCart){ //계산에 해당하는 코드를 분리해서 입력값은 인자로 출력값은 리턴으로 바꾸기
                                  //암묵적 출력 없애기

    let shoppingCartTotal = 0;   //지역변수로 선언 
    
    for(let i = 0 ; i < shoppingCart.length; i++){ 
    		let item = shoppingCart[i];
        	shoppingCartTotal += item.price;
    	}
        
     return shoppingCartTotal;   //지역변수 리턴
 }

위와 같이 함수형 원칙을 적용하면
액션은 줄고, 계산이 늘어남 (=> 계산은 test하기 좋고, 암묵적 입출력을 없애는 것으로 재사용성을 높이는 코드가 됨)