TIL 18

高次関数とは?

▶▼戻り関数
パラメータ(パラメータ)として関数を受信し、関数として返される関数.
変数squareに関数を割り当てる関数式:

const square = function (num) {
  return num * num;
};

// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49

JavaScriptでは、関数は1レベルのオブジェクトなので、変数に格納できます.
関数式は、割り当て前に使用できません.
割り当てる前に使う→square(7);//ReferenceError:Can't find variable:square.

Arr.filter(関数名)

📌 arrは常に配列でなければなりません
📌 カッコ内の関数はtrue/falseを返す関数でなければなりません(falseの場合は破棄されます)
📌 return値は、条件(true/false)に合致する結果値のみを出力します.
filterの使用例1
→配列と任意の値(keeper)を入力し、既存の配列のkeeperにのみ一致する要素の新しい配列を返します.

function keep(arr, keeper) {
  return arr.filter(el => {        // = return arr.filter(function (el) {
    if (el === keeper) {
      return true;
    }
    return false;
  });
}

           ⏸

function keep(arr, keeper) {
  let func = function (el) {
    return el === keeper              ▶️ el===keeper 결과가 true 일 경우만 리턴
  }
  return arr.filter(func)
}

filterの使用例2
→配列の入力を受け取り、配列の中で最も短い文字列要素を返す

findShortestWord([4, 'two', 2, 'three']); 를 대입해서 로직 설명하자면:

function findShortestWord(arr) {
  
  const onlyStrings= arr.filter(el => {
    return typeof el === 'string'    ▶️ 'two', 'three'는 true, 4, 2는 false
  })                                 ▶️ 결과값은 ['two', 'three'] -> true나온 애들만 filter됨.
  
  // 가장 짧은 길이 찾기
  return onlyStrings.reduce((acc,cur) => {      ▶️ acc='two', cur='three'
    if(acc.length > cur.length) {
      return cur;
    } return acc;
  })     
 }                                              ▶️ 최종 return : "three"

Arr.map(関数名)

📌 arrは常に配列でなければなりません
📌 カッコ内の関数は、すべての計算値を返す関数でなければなりません.

Arr.reduce(関数名)

📌 arrは常に配列でなければなりません
📌 カッコ内の関数は、常に2つのパラメータ→関数(arr,cur)を入力する必要があります.
📌 計算値を返す関数

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(array1.reduce(reducer));

アキュムレータには、常に関数の結果値(ここではacc+curの関数)が含まれます(累積値のように).
CurrentValueは常に配列(array 1)のインデックス0,1,2,3,4...順序よく入る.
例1の説明:

let array= [1, 2, 3, 4];
let reducer = ( acc, cur ) => acc + cur ;

ここでは、array.reduce ( acc , cur )からarray.reduce ( 배열의 0번째 값, 배열의 1번째 값 )です.
→ array.reduce ( 1 , 2 )
return acc+curを矢印関数で表し、1+2=3に等しい.
accには累積値が含まれているため、array.reduce ( 누적값, 배열의 2번째 값 )/(3,3)->6

                                           `array.reduce ( 누적값, 배열의 3번째 값 )`   // ( 6,4 ) —> 최종 10 출력

例2説明(初期値がInitialValueの場合):

<< 원리 >>
let array= [1, 2, 3, 4];
let reducer = ( acc, cur ) => acc + cur ;

array.reduce(reducer, 5));

<<예시>>
const array= [1, 2, 3, 4];
const result = array.reduce((acc, cur) => {
	return acc + cur
}, 0);
	// 0부터 시작해서, acc는 이전누적결과값, cur는 array요소 하나하나가 순차적으로 들어감 (arr[i])

ここでreduceをコールバック関数,5を初期値(InitialValue)と呼ぶ.→ arr.reduce( callback, initialValue )array.reduce ( 5 , 배열의 0번째 값 ) //( 5, 1 )array.reduce ( 누적값 , 배열의 1번째 값 ) // ( 6, 2 )array.reduce ( 누적값 , 배열의 2번째 값 ) //( 8, 3 )array.reduce ( 누적값 , 배열의 3번째 값 )//(11,4)->最終15出力
💡 TIP :
Reduceで並びたい→文字列!
文字列としてInitialValue(初期値)を使用すると便利です
並びたい→数字!初期値を数値として保持
私は1つの対象になりたいです!初期値をオブジェクトとして保持
実戦例reduce累積プラス記号を求める必要があるのでreduce(reduceは、本文で使用するresult=result+aのように、累積するAPI)を使用する

function calculateScore(records, value) {
  const sum = records.reduce((acc, cur) => {  // = records.reduce(function(acc,cur)) {
  //acc는 누적계산값(여기선 누적합), cur는 배열의 0번째 값  
  if (cur.animal === value) {   //배열의 0번째 값의 animal이 입력한 value('cat')와 같으면
      return acc + cur.score;   //acc (누적합. 처음엔 0으로 시작) + score값을 리턴하라
    } else {
      return acc;               //else면 acc(누적합)만 리턴하라
    }
  }, 0);

  return sum;
}

               ⏸

function calculateScore(records, value) {
 let result=0;
 for(let i=0; i<records.length; i++){
    if(records[i]['animal'] === value){
    result= result + records[i]['score'];
    }
 } return result;
}