<blockquote>
<p>테스트하기 쉽고 재사용 하기 좋은 코드를 만들기 위해 리팩터링 하는 방법</p>
</blockquote>
<h2 id="heading-7j6l67cu6rws64uiiouhnoyngsdqsjzshkdtlzjqula">장바구니 로직 개선하기</h2>
<ul>
<li><p>장바구니 총액</p>
</li>
<li><p>구매 합계가 특정 금액 이상이면 무료 배송</p>
</li>
<li><p>금액 합계 바뀔 때마다 세금 계산</p>
</li>
</ul>
<h3 id="heading-7ywm7iqk7yq4lyeroycroyaqe2vmoq4scdsib3qsowg66em65ok6riw">테스트/재사용하기 쉽게 만들기</h3>
<ul>
<li><p>DOM 업데이트와 비즈니스 규칙 분리</p>
</li>
<li><p>DOM을 사용할 수 있는 곳에서 실행된다고 가정하지 않기</p>
</li>
<li><p>전역변수(공유변수) 제거</p>
</li>
<li><p>함수가 결괏값(명시적 출력)을 리턴해야 함</p>
</li>
</ul>
<h3 id="heading-7zwo7iiy7j2yioyehsstpzroku">함수의 입/출력</h3>
<p>함수에 암묵적 입/출력이 있으면 액션이 된다</p>
<ul>
<li><p>암묵적 입력: 인자 외 다른 입력</p>
</li>
<li><p>암묵적 출력: 리턴값 외 다른 출력</p>
</li>
</ul>
<p><strong><em>테스트/재사용성은 입출력과 관련 있다</em></strong></p>
<h2 id="heading-7jwh7iwy7jeq7iscioqzhoycscdrubzrgrtqula">액션에서 계산 빼내기</h2>
<h3 id="heading-extract-subroutine">서브루틴 추출 <em>extract subroutine</em></h3>
<ul>
<li><p>계산에 해당하는 코드를 함수로 분리</p>
</li>
<li><p>전역변수 입/출력을 명시적 입/출력으로 변경</p>
<ul>
<li><p>copy-on-write</p>
<ul>
<li><p>전역 변수를 명시적 입력으로 받았을 때, 함수안에서 복사본 만들기</p>
</li>
<li><p>ex. 배열이 입력으로 들어오고 배열 내 값을 변경해야 하는 경우, 배열 복사본을 만들어서 복사본을 변경하고 리턴</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>


> 테스트하기 쉽고 재사용 하기 좋은 코드를 만들기 위해 리팩터링 하는 방법

## 장바구니 로직 개선하기

* 장바구니 총액
    
* 구매 합계가 특정 금액 이상이면 무료 배송
    
* 금액 합계 바뀔 때마다 세금 계산
    

### 테스트/재사용하기 쉽게 만들기

* DOM 업데이트와 비즈니스 규칙 분리
    
* DOM을 사용할 수 있는 곳에서 실행된다고 가정하지 않기
    
* 전역변수(공유변수) 제거
    
* 함수가 결괏값(명시적 출력)을 리턴해야 함
    

### 함수의 입/출력

함수에 암묵적 입/출력이 있으면 액션이 된다

* 암묵적 입력: 인자 외 다른 입력
    
* 암묵적 출력: 리턴값 외 다른 출력
    

***테스트/재사용성은 입출력과 관련 있다***

## 액션에서 계산 빼내기

### 서브루틴 추출 *extract subroutine*

* 계산에 해당하는 코드를 함수로 분리
    
* 전역변수 입/출력을 명시적 입/출력으로 변경
    
    * copy-on-write
        
        * 전역 변수를 명시적 입력으로 받았을 때, 함수안에서 복사본 만들기
            
        * ex. 배열이 입력으로 들어오고 배열 내 값을 변경해야 하는 경우, 배열 복사본을 만들어서 복사본을 변경하고 리턴

Ch04 액션에서 계산 빼내기

뇌피셜과 헛다리 짚기가 넘쳐나는 프론트엔드 개발 블로그

Ch04 액션에서 계산 빼내기

장바구니 로직 개선하기

테스트/재사용하기 쉽게 만들기

함수의 입/출력

액션에서 계산 빼내기

서브루틴 추출 extract subroutine