함수형 코딩: 액션, 계산, 데이터

1. 장보기 과정을 액션, 계산, 데이터로 나눠보자.

 

이 과정을 통해 우리가 알게된 것

• 액션과 계산, 데이터는 어디에나 적용할 수 있다.
• 액션 안에는 액션, 계산, 데이터가 또 있을 수도 있다.
• 계산은 더작은 계산과 데이터로 나누고 연결할 수 있다.
• 데이터는 데이터만 조합할 수 있다.
• 계산은 우리 생활에 녹아있어 잘 보이지 않을 수 있다.

 

연습문제 1. 10명 이상을 추천한 사용자는 더 좋은 쿠폰을 받을 수 있다는 것을 전제로 해야할 일들을 나열해보자. (40p)

이메일 보내기	추천 수
데이터 베이스에서 구독자 가져오기	어떤 이메일이 쿠폰을 받을지 결정하기
쿠폰에 등급 매기기	구독자 DB 레코드
데이터 베이스에서 쿠폰 읽기	쿠폰 DB 레코드
이메일 제목	쿠폰 목록 DB 레코드
이메일 주소	구독자 목록 DB 레코드
이메일 본문

 

연습문제 2. 위 항목들을 액션, 계산, 데이터로 분류해보자. (41p)

해야할 일	분류	해야할 일	분류
이메일 보내기	액션	추천 수	데이터
데이터 베이스에서 구독자 가져오기	액션	어떤 이메일이 쿠폰을 받을지 결정하기	계산
쿠폰에 등급 매기기	데이터	구독자 DB 레코드	데이터
데이터 베이스에서 쿠폰 읽기	액션	쿠폰 DB 레코드	데이터
이메일 제목	데이터	쿠폰 목록 DB 레코드	데이터
이메일 주소	데이터	구독자 목록 DB 레코드	데이터
이메일 본문	데이터

 

연습문제 3. 위 항목들을 액션, 계산, 데이터로 다이어그램을 구현해보자. 

 

2. 액션을 다루는 것은 까다롭다.

• 액션을 부르는 함수가 있다면 그 함수를 부르는 다른 함수도 액션이다.
• 액션은 다양한 형태로 나타난다.
  • 함수 호출, 메서드 호출, 생성자, 표현식(변수 참조, 속성 참조 등), 상태(값 할당, 속성 삭제 등)

 

3. 함수를 재사용하기 쉽게 만들어보자.

재사용할 수 있는 더 좋은 코드를 만드는 방법은,

• DOM 업데이트와 비즈니스 규칙은 분리되어야 한다.
• 전역변수가 없어야한다.
• 전역변수에 의존하지 않아야한다.
• DOM을 사용할 수 있는 곳에서 실행된다고 가정하면 안된다.
• 함수가 결괏값을 리턴해야한다.

액션을 계산으로 만들어보자,

• 먼저 액션과 계산, 데이터로 구분한다.
• 암묵적 입력과 암묵적 출력을 찾는다.
  • 암묵적 입력: 전역변수값을 읽는 등
  • 암묵적 출력: 전역변수값을 바꾸거나 console.log를 호출하는 등
• 암묵적 입력과 암묵적 출력을 제거한다.
  
  • 암묵적 입력은 인자로 받아오고 암묵적 출력은 결과를 return하는 것으로 변경한다.

 

연습문제 1. update_tax_dom() 함수에서 세금 계산하는 부분을 추출하자. (79p)

기존 코드

function update_tax_dom () {
	set_tax_dom(shopping_cart_total * 0.10);
}

 

바뀐 코드

function update_tax_dom () {
	set_tax_dom(calc_total(shopping_cart_total));
}

function calc_tax (price) {
	return price * 0.10;
}

연습문제 2. update_shipping_icons() 함수에서 계산을 추출하자. (82p)

기존 코드

function update_shipping_icons () {
	var buy_buttons = get_buy_buttons_dom();
    for(var i=0; i<buy_buttons.length; i++) {
    	var button = buy_buttons[i];
        var item = button.item;
        if(item.price + shopping_cart_total >=20) {
        	button.show_free_shipping_icon();
        } else {
        	button.hide_free_shipping_icon();
        }
    }
}

 

바뀐 코드

function update_shipping_icons () {
	var buy_buttons = get_buy_buttons_dom();
    for(var i=0; i<buy_buttons.length; i++) {
    	var button = buy_buttons[i];
        var item = button.item;
        if(calc_future_total(shopping_cart_total, item.price )) {
        	button.show_free_shipping_icon();
        } else {
        	button.hide_free_shipping_icon();
        }
    }
}

function calc_future_total (total, price) {
	return price + total >= 20
}