CH4. 액션에서 계산 빼내기

입력과 출력

모든 함수는 입력과 출력이 있습니다.

입력은 함수가 계산을 하기 위한 외부정보, 출력은 함수 밖으로 나오는 정보나 어떤 동작입니다.

함수를 호출하는 것은 어떠한 결과(출력)가 필요하기 때문이며 이를 얻으려면 입력이 필요합니다.

명시적 입/출력과 암묵적 입/출력

입력과 출력은 명시적이거나 암묵적일 수 있습니다.

var total = 0; // 전역변수
function add_to_total(amount) { // amount : 인자는 명시적 입력입니다.
    console.log("Old total: " + total); // total : 전역변수를 읽는 것은 암묵적 입력, 콘솔을 찍는 것은 암묵적 출력입니다.
    total += amount; // 전역변수를 수정하는 것은 암묵적 출력입니다.
    return total; // 리턴값은 명시적 출력입니다.
}

• 명시적 입력 : 인자
• 암묵적 입력 : 인자 외 다른 입력
• 명시적 출력 : 리턴값
• 암묵적 출력 : 리턴값 외 다른 출력

함수에 암묵적 입력과 출력이 있으면 부수효과입니다. (액션)

전역 변수와 같이 공유하는 변수는 일반적으로 암묵적 입력 또는 출력이 됩니다.

암묵적 입력은 함수의 인자로 바꾸고, 암묵적 출력은 리턴값으로 바꾸면 계산이 됩니다.

액션에서 계산 빼내기

add_item_to_cart : 장바구니에 아이템을 추가하고, 합계 금액을 계산하는 함수에서 계산을 빼내보겠습니다.

 

1. 코드를 선택하고 빼내기

코드를 추출해 새로운 함수를 만들어(함수 추출하기) 리팩토링합니다.
새 함수에 인자가 필요하다면 추가하고, 원래 코드에서 빼낸 부분에 새 함수를 부르도록 수정합니다.

 

원래코드

let shopping_cart = [];
let shopping_cart_total = 0;

function add_item_to_cart(name, price) {
  shopping_cart.push({ name: name, price: price });
  calc_cart_total();
}

바꾼 코드

// 전역변수 생략
function add_item_to_cart(name, price) {
  add_item(name, price);
  calc_cart_total();
}

function add_item(name, price) {
  shopping_cart.push({ name: name, price: price });
}

여전히 새로만든 함수 add_item은 전역변수(암묵적 입력)를 수정하고 있기 때문에 액션입니다.

 

2. 암묵적 입력과 출력을 찾기

함수를 호출하는 동안 결과에 영향을 줄 수 있는 것(암묵적 입력), 함수 호출의 결과로 영향을 받는 것(암묵적 출력)을 찾습니다.

 

전역 배열 shopping_cart는 암묵적 입력,

push() 함수로 전역 배열을 변경하는 부분은 암묵적 출력에 해당합니다.

이 부분을 명시적인 입력과 출력으로 바꿔보겠습니다.

 

3. 입력은 인자로 바꾸고 출력은 리턴값으로 바꾸기

입력은 인자로, 출력은 리턴값으로 바꿔줍니다.
새로운 리턴값이 생겼다면 호출하는 코드에서 함수의 결과를 변수에 할당해줍니다.
여기서 인자와 리턴값은 바뀌지 않는 불변값이라는 것이 중요합니다.

 

암묵적 입력, 암묵적 출력을 없앤 코드 

function add_item_to_cart(name, price) {
  shopping_cart = add_item(shopping_cart, name, price);
  calc_cart_total();
}

function add_item(cart, name, price) {
  let new_cart = cart.slice();
  new_cart.push({ name: name, price: price });
  return new_cart;
}

암묵적 입력을 인자로 바꿔 명시적 입력이 되었습니다.

shopping_cart 배열의 복사본을 만들고(불변성) 복사본에 제품을 추가해 리턴하여 전역변수에 할당했습니다.