[쏙쏙 들어오는 함수형 코딩] - CH4 ~ CH5

암묵적 출력 두 개 없애기

function calc_cart_total() {
	calc_total();
    set_cart_total_dom();
    update_shipping_icons();
    update_tax_dom();
}

function calc_total() {
	shopping_cart_total = 0;
    for(var i = 0; i < shopping_cart.length; i++){
    	var item = shopping_cart[i];
        shopping_cart_total += item.price;
    }
}


// 수정 후
function calc_cart_total() {
    shopping_cart_total = calc_total();
    set_cart_total_dom();
    update_shipping_icons();
    update_tax_dom();
}

function calc_total();
    var total = 0;
    for(var i = 0; i < shopping_cart.length; i++){
    	var item = shopping_cart[i];
        total += item.price;
    }
    return total;
}

수정 후의 코드에서 `calc_total` 함수는 더 이상 외부 변수를 수정하지 않고 대신 결과 값을 반환합니다.

`calc_cart_total` 함수에서는 각 함수의 반환값을 변수에 할당하여 사용하므로 암묵적 출력이 없어집니다!

 

암묵적 입력 두 개 없애기

function calc_cart_total() {
    shopping_cart_total = calc_total();
    set_cart_total_dom();
    update_shipping_icons();
    update_tax_dom();
}

function calc_total();
    var total = 0;
    for(var i = 0; i < shopping_cart.length; i++){
    	var item = shopping_cart[i];
        total += item.price;
    }
    return total;
}

// 수정 후
function calc_cart_total() {
shopping_cart_total = calc_total(shopping_cart);
set_cart_total_dom();
update_shipping_icons();
update_tax_dom();
}

function calc_total(cart) {
	var total = 0;
    for(var i = 0; i < cart.length; i++){
    	var item = cart[i];
        total += item.price;
    }
    return total;
}

수정 전 코드에서 `calc_total` 함수는 외부에서 정의된 `shopping_cart` 변수를 사용하고 있었습니다.

수정된 코드에서는 `calc_total` 함수에 `cart`라는 인자를 추가하고, 함수 내부에서 이 인자를 사용하도록 변경했습니다.

 

 

chapter4

연습문제1

결제 부서에서 우리가 만든 세금 계산 코드를 쓰려고함. 하지만 DOM과 묶여있어 바로 사용하기
어려움. update_tax_dom() 함수에서 세금을 계산하는 부분을 추출

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

 

나의 풀이

function update_tax_dom() {
    set_tax_dom(tax_calculation());
}

function tax_calculation() {
    return shopping_cart_total * 0.01;
}

세금을 계산하는 부분을 함수로 분리 후 tax_calculation 함수를 호출해서 리턴값을 사용합니다.

 

정답

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

function calc_tax(amount) {	
	return amount * 0.01;
}

책에서는 `calc_tax` 함수가 `amount`라는 파라미터를 받도록 변경하여 `update_tax_dom` 함수는 세금을 계산하는 부분을 `calc_tax` 함수에 위임하고, `calc_tax` 함수는 전달받은 `amount`를 기반으로 세금을 계산하여 반환합니다.

 

 

연습문제2

/*
배송팀에서 무료 배송인지 확인하기 위해 우리가 만든 코드를 사용하려고 합니다. 
update_shipping_icons() 함수에서 계산을 추출 해 보세요.
 */

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();
    }
}

// if문에 해당하는 부분이 배송팀에서 사용하려는 비즈니스 규칙입니다.

먼저 암묵적 입, 출력이 있는지 찾아봅시다

 

코드에 정의되어 있지 않은 shopping_cart_total 이라는 외부 변수를 직접 참조하고 있으므로 암묵적 입력이라고 생각합니다 (아마도)

암묵적 입력을 인자로 바꿔 봅시다

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;
        free_shipping_con(item, shopping_cart_total) ? button.show_free_shipping_icon() : button.hide_free_shipping_icon();
    }

function free_shipping_con(item, shopping_cart_total) {
   return item.price + shopping_cart_total >= 20;
	}
}

`free_shipping_con `함수는 `item`과 `shopping_cart_total`을 전달받아 무료 배송 여부를 계산하고,

`update_shipping_icons` 함수에서 `free_shipping_con` 함수의 결과에 따라 아이콘을 보여주거나 숨깁니다

 

 

chapter5

연습문제1

/* 
전역변수를 읽는 부분을 최대한 인자로 바꾸기!
(암묵적 입력과 출력 줄이기)
*/

function add_item_to_cart(name, price) {
    shopping_cart = add_item(shopping_cart, name, price);  //shopping_cart는 전역변수인듯
    calc_cart_total();
}

function calc_cart_total() {
    shopping_cart_total = clac_total(shopping_cart); //shopping_cart_total도 전역변수
    set_cart_total_dom();
    update_shipping_icons(shopping_cart);
    update_tax_dom();
}

function set_cart_total_dom() {
    ...
    shopping_cart_total //여기도 덩그러니
    ...
}

function update_shipping_icons(cart) {
    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;
        var new_cart = add_item(cart, item.name, item.price);
        if(gets_free_shipping(new_cart))
            button.show_free_shipping_icon();
        else 
            button.hide_free_shipping_icon();
    }
}
//여기는 다 지역변수인듯하다 ...

function update_tax_dom() {
    set_tax_dom(calc_tax(shopping_cart_total));
}
// shopping_cart_total 인자로 없으니 인자로 받아야 할듯

function add_item_to_cart(name, price) {
    shopping_cart = add_item(shopping_cart, name, price);
    calc_cart_total(shopping_cart); // 이부분 잘 이해되지 않음 ,,
}

function calc_cart_total(cart) {
    var total = calc_total(cart);
    set_cart_total_dom(total);
    update_shipping_icons(cart);
    update_tax_dom(total);
    shopping_cart_total = total;
}
/* 
total 이라는 새로운 매개변수를 추가하여 set_cart_total_dom 함수는 total 값을 인자로 받아 호출된다
이전에는 함수 내에서 직접 shopping_cart_total을 변경하고 있었는데, total을 변경함으로써 외부 변수인
shopping_cart_total을 직접 변경하지 않고, 함수의 인자를 통해 값을 처리하는 형태로 변환
*/


function set_cart_total_dom(total) {
    ...
    total
    ...
}
// shopping_cart_total 변경이 함수 외부에서 이루어짐

function update_shipping_icons(cart) {
    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;
        var new_cart = add_item(cart, item.name, item.price);
        if(gets_free_shipping(new_cart))
            button.show_free_shipping_icon();
        else 
            button.hide_free_shipping_icon();
    }
}

function update_tax_dom(total) {
    set_tax_dom(calc_tax(total));
}
// update_tax_dom 함수도 total값을 인자로 받아 shopping_cart_total 대신 값을 변경해주고 있음

 

 

실습

Q. 주어진 배열에서 양수를 모두 찾아 제곱한 후, 그 중에서 짝수만 필터링하여 총합을 계산하는 함수를 작성하세요.

const calculateEvenSquaredSum = (numbers) => {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 0) {
      const squared = numbers[i] ** 2;
    }
  }
};

const inputArray = [1, -2, 3, 4, -5, 6, -7, 8, 9];
const result = calculateEvenSquaredSum(inputArray);
console.log(result);

const isPositive = (num) => num > 0;
const square = (num) => num ** 2;
const isEven = (num) => num % 2 == 0;

const calculateEvenSquaredSum = (numbers) =>
  numbers
    .filter(isPositive)
    .map(square)
    .filter(isEven)
    .reduce((acc, curr) => acc + curr, 0);

const inputArray = [1, -2, 3, 4, -5, 6, -7, 8, 9];
const result = calculateEvenSquaredSum(inputArray);
console.log(result);