쏙쏙 들어오는 함수형 코딩 38일차

38일차 <암묵적 인자를 인자로 바꾸기>

이전 파트에서 자원을 공유하는 타임라인의 문제를 살펴봤다. 멀티 스레드 환경에서 공유자원은 lock으로 관리 돼, race condition을 막아야 한다. 아니면 다른 스레드가 공유자원을 업데이트 하기도전에 채어가서 이상한 결과가 도출 될 것이다.

 

마찬가지로 이전 파트에서는 cart, total 값을, 전역변수를 끌어와서 사용하고 있었다. 문제가 발생하는것은 불보듯 뻔했다. 이제 공유하는 자원을 없애보자.

 

지금까지 전역변수를 지역변수로 바꾸로 암묵적 인자를 명시적 인자로 바꿔주는 작업들을 쭉 해왔다. 이제 써 먹어볼 차례다!

 

우선 문제의 코드를 살펴보자.

 

#문제의 코드

function add_item_to_cart(name, price, quantity) {
  cart = add_item(cart, name, price, quantity);    // 전역변수 cart
  calc_cart_total();
}

function calc_cart_total() {
  total = 0;                                       // 전역변수 total
  cost_ajax(cart, function(cost) {
    total += cost;
    shipping_ajax(cart, function(shipping) {
      total += shipping;
      update_total_dom(total);
    });
  });
}

이 코드는 전역변수 cart, total을 사용하고 있다. 단계적으로 처리해보자.

 

첫 번째로 total을 지역변수로 바꿔보자.

function calc_cart_total() {
  var total = 0;                                   // 지역변수 total
  cost_ajax(cart, function(cost) {
    total += cost;
    shipping_ajax(cart, function(shipping) {
      total += shipping;
      update_total_dom(total);
    });
  });
}

total을 지역변수로 바꿔주었다. total의 경우 지역변수로 변경해주어도 로직상 아무 문제가 없다.

 

두 번째로 암묵적 인자 cart를 명시적 인자로 변경해주자.

function add_item_to_cart(name, price, quantity) {
  cart = add_item(cart, name, price, quantity);    // 전역변수 cart
  calc_cart_total(cart);                           // 명시적인 인자로 변경
}

function calc_cart_total(cart) {                   // 명시적인 인자로 변경
  var total = 0;                                   // 전역변수 total
  cost_ajax(cart, function(cost) {
    total += cost;
    shipping_ajax(cart, function(shipping) {
      total += shipping;
      update_total_dom(total);
    });
  });
}

이제 전역변수와 암묵적 인자를 제거해준 코드를 볼 수 있다. 

 

참고로 add_item_to_cart에서 여전히 전역변수 cart를 사용하고 있다. 하지만 cart를 읽고 쓰는 것은 클릭 직후 발생하는 이벤트이므로 다른 클릭에 영향을 주지 않는다.

---

비동기호출에서 명시적 출력을 위해 리턴값 대신 콜백 사용하기

오늘 파트에서 재밌는 사실을 하나 알아간다. 바로 비동기 함수에서 명시적 출력을 위해서 리턴값 대신 콜백을 사용하는 것이다. 비동기 함수에서 리턴값을 쓸 수 없는데, (물론 리턴값을 쓸순 있다. 다만 원하는 값이 리턴되지 않을 뿐이지..

 

예시 코드를 살펴보자.

function get_pets_ajax() {
  var pets = 0;
  dogs_ajax(function(cats) {
    cats_ajax(function(cats) {
      pets = dogs + cats; 
    });    
  });
  return pets;
}

만약 ajax의 결과가 개 2마리 고양이 3마리라면 기대하는 반환값은 5일 것이다. 하지만 이 코드는 무조건 0을 반환 할 것이다. 이벤트 루프는 ajax 작업이 들어오면 요청 큐에 넣어 네트워크 엔진에 맡긴다. 때문에 이벤트 루프는 두 ajax 함수를 기다리지 않고 바로 값을 반환해 버리는 것이다.

 

이를 위해 콜백을 사용하는 것이다. 콜백을 사용해서 이벤트 루프가 바로 작업을 마무리 짓는다고 해도 콜백으로 전달된 함수가 ajax 요청이 완료되고 나서 호출될 것이다. 아래는 콜백함수를 인자로 넘기는 예시이다.

 

# 콜백

function get_pets_ajax(do_something) {
  var pets = 0;
  dogs_ajax(function(cats) {
    cats_ajax(function(cats) {
      pets = dogs + cats; 
      do_something(pets);          // 화면에 출력한다거나 db에 저장하거나 하는 작업들...
    });    
  });
}

 이렇게 바꿔줌으로써 ajax 반환값을 가지고 db에 저장한다거나 화면에 출력한다거나 하는 일을 할 수 있는것이다.