diff --git "a/\354\261\225\355\204\260_4/\353\205\270\354\230\210\354\260\254.md" "b/\354\261\225\355\204\260_4/\353\205\270\354\230\210\354\260\254.md" new file mode 100644 index 0000000..c330ca8 --- /dev/null +++ "b/\354\261\225\355\204\260_4/\353\205\270\354\230\210\354\260\254.md" @@ -0,0 +1,110 @@ +# 4. 액션에서 계산 빼내기 + +4장에서는 이론적인 차원에서 설명을 하는 장이 아니다. 1-3장에서 배웠던 이론을 기반으로, 실제 코드에 적용해보는 연습을 해보고 있다. 주안점은 액션에서 계산을 빼내는 부분을 연습하는 것이었다. + +이렇게 액션에서 계산을 빼낼 때의 프로세스가 있다. + +> 1. 코드를 선택하고 빼낸다. +> 2. 암묵적 입력과 출력을 찾는다. +> 3. 입력은 인자로 바꾸고 출력은 리턴값으로 바꾼다. + +이런 프로세스를 가지고 액션에서 계산을 빼내는 작업을 수행한다. 위 프로세스를 적용한 코드 예시를 살펴보자. + +## 액션에서 계산 빼내기 코드 예시 + +```javascript +function calc_cart_total() { + shopping_cart_toal = 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(); +} +``` + +### 01.코드를 선택하고 빼내기 + +이런 코드가 있다. 위 코드에서 특정 코드 영역을 추출해내보자. + +```javascript +function calc_cart_total() { + calc_total(); + set_cart_total_dom(); + update_shipping_icons(); + update_tax_dom(); +} + +function calc_total() { + shopping_cart_toal = 0; + for (var i = 0; i < shopping_cart.length; i++) { + var item = shopping_cart[i]; + shopping_cart_total += item.price; + } +} +``` + +이렇게 코드를 추출해 내 보았다. 하지만, 아직 우리에게 남아있는 순서가 있다. + +### 02.암묵적 입력과 출력을 찾는다. + +암묵적 입력과 출력이 존재한다는 것은 함수가 외부세계에 영향을 미치는 액션이라는 것을 말한다. 주어진 함수를 계산으로 만들기 위해서는 어떤 암묵적 입력과 출력이 존재하는지 찾아야하고, 해당 요소를 제거해야한다. + +```javascript +function calc_total() { + shopping_cart_toal = 0; // 암묵적 입력 + for (var i = 0; i < shopping_cart.length; i++) { + // shopping_cart <- 암묵적 입력 + var item = shopping_cart[i]; + shopping_cart_total += item.price; + } + // 어떤 값도 return 하고 있지 않음으로 암묵적 출력이라고 할 수 있다. +} +``` + +### 03.입력은 인자로 바꾸고 출력은 리턴값으로 바꾸기 + +```javascript +function calc_total() { + let total = 0; // 지역변수 사용 + for (var i = 0; i < shopping_cart.length; i++) { + // shopping_cart <- 아직 남아 있는 암묵적 입력 + var item = shopping_cart[i]; + total += item.price; + } + return total; // 명시적 출력으로 바꾸기 +} +``` + +이렇게 일차적으로 수정했다. 하지만 아직도 남아있는 부분이 있는데, 해당 부분을 수정해보자. + +```javascript +function calc_total(cart) { + // 명시적 입력으로 바꾸기 + let total = 0; + for (var i = 0; i < cart.length; i++) { + // 명시적 입력으로 받아온 값을 사용하기 + var item = cart[i]; + total += item.price; + } + return total; // 명시적 출력으로 바꾸기 +} +``` + +그리고 이렇게 바꾼 함수를 사용해보자. + +```javascript +function calc_cart_total() { + shopping_cart_total = calc_total(shopping_cart); + set_cart_total_dom(); + update_shipping_icons(); + update_tax_dom(); +} +``` + +## 결론 : + +4장의 내용은 이렇게 액션에서 계산을 빼내는 원칙을 설명하고, 예제코드에서 적용해보는 실습 코드들로 구성되어있다. 결론적으로 이렇게 액션에서 계산을 분리해내고 나면, 우리는 함수를 더욱 작은 단위로 분리할 수 있고, 그 결과 명확한 책임을 가진 함수, 테스트하기 용이한 함수, 재사용가능한 함수를 만들어낼 수 있게 된다.