[노예찬] 챕터 4: 액션에서 계산 빼내기

챕터_4/노예찬.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장의 내용은 이렇게 액션에서 계산을 빼내는 원칙을 설명하고, 예제코드에서 적용해보는 실습 코드들로 구성되어있다. 결론적으로 이렇게 액션에서 계산을 분리해내고 나면, 우리는 함수를 더욱 작은 단위로 분리할 수 있고, 그 결과 명확한 책임을 가진 함수, 테스트하기 용이한 함수, 재사용가능한 함수를 만들어낼 수 있게 된다.