반디북
쏙쏙 들어오는 함수형 코딩
Ch12
우석

함수형 반복

map()

function emailsForCustomers(customers, goods, bests) {
  var emails = [];
 
  forEach(customers, function(customer) {
    var email = emailForCustomer(customer, goods, bests);
    emails.push(email);
  });
 
  return emails;
}
  • emailsForCustomers()는 고객 데이터를 배열로 받아 고객에게 보낼 emil 리스트를 배열로 반환하는 메서드이다.
  • 이러한 상황에서 사용할 수 있는 함수형 도구가 map()이다.
  • map()은 X값을 가진 배열을 인자로 받아 배열을 개별 값들을 Y로 변환하고 이를 리스트로 반환한다.

function map(array, f) {
  var newArray = [];
  forEach(array, function(element) {
    newArray.push(f(element));
  });
  return newArray;
}
 
function emailsForCustomers(customers, goods, bests) {
  return map(customers, function(customer) {
    return emailForCustomer(customer, goods, bests)
  })
}
  • map()메서드를 활용하면 emailsForCustomers()를 보다 간단하게 구현할 수 있다.

함수를 전달하는 3가지 방법

  • map() 메서드를 활용할 때 2번째 인자인 함수를 전달하는 방식에는 3가지가 존재한다.

1. 전역으로 정의하기

function greet(name) {
  return "Hello, " + name;
}
 
var friendGreetings = map(friendsNames, greet)
  • 프로그램 어디서나 쓸 수 있다는 점이 장점이다.

2. 지역적으로 정의하기

function greetEverybody(friends) {
  var greeting;
 
  if (language === "English")
    greeting = "Hello, ";
  else
    greeting = "Salut, ";
 
  var greet = function(name) {
    return greeting + name;
  }
 
  return map(freinds, greet);
}
  • 지역적으로 쓰고 싶지만 이름이 필요할 때 사용하면 유용하다.

3. 인라인으로 정의하기

var freindGreetings = map(friendsNames, function(name) {
  return "Hello, " + name;
});
  • 문맥에서 한 번만 쓰는 짧은 함수에 적합하다.

filter()

function filter(array, f) {
  var newArray = [];
 
  forEach(array, function(element) {
    if (f(element)) {
      newArray.push(element);
    }
  });
 
  return newArray;
}
  • 특정 조건을 만족하는 요소들만 추리고 싶을 때 사용할 수 있다.
    • 필요 없는 것을 거를 때도 사용 가능 (null값을 거르고 싶을 때)

reduce()

function reduce(array, init, f) {
  var accum = init;
 
  forEach(array, function(element) {
    accum = f(accum, element);
  });
 
  return accum;
}
  • 배열을 순회하면 누적된 데이터를 만들 때 사용하는 도구가 reduce()이다.
  • 배열을 모든 값을 더하거나, 모든 값을 누적하여 데이터를 만들 때 유용하다.
만혁

함수형 반복

예제를 통해 map() 함수 도출하기

1. 본문과 앞부분, 뒷부분 확인하기

function emailsForCustomers(customers, goods, bests) {
 const emails = []; // 앞부분
 forEach(customers, function(customer) {
    const email = emailForCustomer(customer, goods, bests); // 본문
    emails.push(email);
 })
 return email; // 뒷부분
}
 
function customerCities(customers, goods, bests) {
 const cities = [];
 forEach(customers, function(customer) {
    const city = customer.address.city;
    cities.push(city);
 })
 return cities;
}

2. 함수를 콜백으로 빼내기

function emailsForCustomers(customers, goods, bests) {
    return map(customers, function(customer) {
        return emailForCustomer(customer, goods, bests);
    })
}
 
function map(array, f) {
    const newArray = [];
    forEach(array, function(element) {
        newArray.push(f(element));
    })
    return newArray;
}

함수형 도구: filter()

function filter(array, f) {
    const newArray = [];
    forEach(array, function(element) {
        if (f(element)) {
            newArray.push(element);
        }
    })
    return newArray;
}
연습 문제

map() 을 사용해 필요한 객체가 들어있는 배열을 만들어라

  • 주어진것
    • 모든 고객 배열인 customers
    • 필요한 데이터는 firstName, lastName, address
map(customers, function(customer) {
        return {
            firstName: customer.firstName,
            lastName: customer.lastName,
            address: customer.address
        }
    }
)

filter()를 사용해봐라

  • 주어진것
    • 전체 고객 배열인 customers
    • 고객 아이디가 들어 있는 customer.id
    • 나머지 연산자 x % 3 === 0
const testGroup = filter(customers, function(customer) {
    return customer.id % 3 === 0;
})
 
const nonTestGroup = filter(customers, function(customer) {
    return customer.id % 3 !== 0;
})

예제를 통해 reduce() 도출하기

1. 본문과 앞부분, 뒷부분 확인하기

function countAllPurchases(customers) { 
    let total = 0; // 앞부분
    forEach(customers, function(customer) {
        total = total + customer.purchases.length; // 본문(합치는 동작)
    })
    return total; // 뒷부분
}
 
function concatArrays(arrays) {
    const result = []; // 앞부분
    forEach(arrays, function(array) {
        result = result.concat(array); // 본문(합치는 동작)
    })
    return result; // 뒷부분
}

2. 함수 콜백으로 빼내기

function countAllPurchases(customers) {
    return reduce(
        customers,
        0, // 초기 값
        function(total, customer) {
            return total + customer.purchases.length;
        }
    )
}
 
 
function reduce(array, init, f) {
    let accum = init; // 초기 값
    forEach(array, function(element) {
        accum = f(accum, element);
    })
    return accum;
}
연습 문제

reduce() 활용

// 배열에 있는 모든 수를 더하기
function sum(numbers) {
    return reduce(
        numbers, 
        0,
        function(total, number){
            return total + number;
        })
}
 
// 배열에 있는 모든 수를 곱하기
function product(numbers) {
    return reduce(
        numbers, 
        1,
        function(total, number){
            return total * number;
        })
}

배열에 있는 가장 큰 값과 가장 작은 값을 찾는 함수를 만들어라

  • 주어진것
    • 가장 큰 숫자인 Number.MAX_VALUE
    • 가장 작은 숫자인 Number.MIN_VALUE
// 배열에서 가장 작은 숫자를 리턴
// 빈 배열이라면 `Number.MAX_VALUE` 리턴
function min(numbers) {
    return reduce(
        numbers,
        Number.MAX_VALUE,
        function(m, n) {
            if (m < n) {
                return m;
            } else {
                return n;
            }
        }
    )
}
 
 
// 배열에서 가장 큰 숫자를 리턴
// 빈 배열이라면 `Number.MIN_VALUE` 리턴
function min(numbers) {
    return reduce(
        number,
        Number.MIN_VALUE,
        function(m, n) {
            if (m > n) {
                return m;
            } else {
                return n;
            }
        }
    )
}

reduce() 로 map() 과 filter() 만들기

function map(array, f) {
    return redcue(
        array, 
        [],
        function(ret, item) {
            // return ret.concat(f([item]));
            ret.push(f(item));
            return ret;
        }
    )
}
 
function filter(array, f) [
    return reduce(
        array,
        [],
        function(ret, item) {
            if (f(item)) {
                // return ret.concat([item])
                ret.push(item);
            }
            return ret;
        }
    )
]

회독

  • reduce만 제대로 알아도 모든걸 구현할 수 있는듯
Ch11Ch13