코드스테이츠 Full Pre 3주차 기록 Part 1

지난 1~2주의 과정은 몸풀기 수준이었다는 것을 깨닫게 해준 3주차의 모든 과정은 아주 다이내믹했다.
먼저 1일은 지난주에 이어 pair와 함께 고차함수 문제를 풀어나갔다.

1. 고차 함수란?

• 함수를 인자로 받거나 함수를 리턴하는 함수를 말한다. 이 때 전달 받는 함수를 콜백 함수라고 한다.

// 1. 함수를 인자로 받는 경우
function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수
// func에 double함수가 인자로 들어올 경우 double은 doubleNum의 콜백 함수
let result = doubleNum(double, 2);

// 2. 함수를 리턴하는 경우
function adder(added) {
  return function (num) {
    return num + added;
  };
}
// adder가 리턴하는 함수를 변수에 저장하여
const add3 = adder(3);
let output = add3(2); // 계속 재사용 할 수 있다.
console.log(output);

// 3. 위의 두 경우를 합한 경우(함수를 인자로 받고, 함수를 리턴)
function doubleAdder(added, func) { // func에 위의 double 함수를 넣는다고 가정하면
  const doubled = func(added); // double콜백 함수에 added에 해당하는 숫자를 인자로 받아 실행시킨 결과를 doubled 변수에 할당하고 결과값은 5 * 2 = 10
  return function (num) {  // 인자 3은 이쪽으로 들어와서
    return num + doubled; //  10 + 3이 된다.
  };
}
doubleAdder(5, double)(3); // -> 의 과정을 거쳐 결과는 13

const addTwice3 = doubleAdder(3, double);
addTwice3(2); // 결과는 8

이론은 비교적 간단하지만, 이것을 실제 웹이나 앱을 만들때 활용하려면 막막함을 느낀다...

• 문제를 풀면서 중요하다고 생각되는 식을 나열해 본다.

// 1. 함수들이 입력된 차례대로 결합된 함수를 리턴하는 함수.
function pipe(...func) {
  return function (num) {
    let result = num; // 함수에 전달될 인자값을 할당한다.
    for (let i = 0; i < func.length; i++) {
      result = func[i](result); // 입력받은 함수의 차례대로 (num)값을 할당시킨다.
    }
    return result; // 차례대로 입력된 함수에 전달 인자까지 결합된 상태로 리턴한다.
  };
}

// 2. 함수와 배열을 입력받아 배열의 각 요소에 함수가 적용된 새로운 배열 리턴하기
function mapCallback(func, arr) {
  let result = [];
  for (let el of arr) {
    result.push(func(el));
  }
  return result;
}

• 그런데 자바스크립트에는 위의 고차 함수를 추상화 한 내장 고차 함수가 존재한다.

// 예를 들어 filter라는 내장 고차 함수를 이용하는 경우를 보자.
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
let output = arr.filter(isEven);

// 내장 고차 함수 map의 사용 예제
function getOnlyNames(arr) {
  // arr.map();
  // for (let i =0; i < arr.length; i++) {
  return arr.map (function (el) {
    return el.name;
  });
} // 객체를 요소로 갖는 배열인 arr의 각 객체 name속성을 요소로 갖는 배열을 리턴한다.

// 함수를 활용한 경우
function square(number) {
  return number * number;
}

function getSquared(obj, property) {
    const squareArr = obj[property];
    if (Array.isArray(squareArr)) {
      return squareArr.map(square);
    }
    return [];
}
// 2차원 배열을 단일 배열로 리턴할 때
const newArr = arr.reduce (function (acc, cur) {
     return acc.concat(cur);
});
return newArr;

추상화는 곧 생산성 향상에 기여할 수 밖에 없기 때문에 내장 고차 함수를 잘 이용하도록 연습하자...
예를 들어 filter, map, reduce를 이용해 각각의 과정들을 함수로 선언해 놓고, 그 함수들을 순차적으로 인자로 전달받아 함수를 리턴하는 compose함수로 만들어 각각의 함수를 다른 목적을 위해 재사용 될 수 있도록 만들 수 있다. 이처럼 사고 수준에서의 추상화를 달성하도록 생각을 해야 한다.