' P '

whatever I will forget

Javascript アロー関数

めっちゃいつも混乱することがあるのでメモ

まずはアロー関数の書き方

JavaScriptでは、下記がアロー関数になります

普通

const a = function(a,b,c) {
 // peronperon
}

アロー関数

const a = (a,b,c) => {
  // peronperon
}

下記は、下記にも記述したけど、同じ箇所で疑問がでるので一応再喝
mankozooyork.hatenablog.com

混乱しがちな仕様:仮引数

filterや、mapに渡す引数は自由です。
よく、上記の関数に渡されている変数名、一体どこからやってきたんだ... と絶望しそうになるのですが、
ただの仮引数です。なんでもいいです。

before

//dataには、nameとstate(true/false)が存在する
const data = new Array();
function add(dataName) {
  data.push{{ name: dataName, state: false}};
}

function test1(dataA) {
  return dataA.state === false;
}

function test1(dataB) {
  return dataB.name;
}

function test() {
  return
    data.filter(test1).map(test2);
}

これをアロー関数で実装すると

after

//dataには、nameとstate(true/false)が存在する
const data = new Array();
function add(dataName) {
  data.push{{ name: dataName, state: false}};
}

function test() {
  return
    data.filter(dataA => !dataA.state).map(dataB => dataB.name);
}

となる。
JavaScriptは、C/Java系から入った人は混乱するのですが、関数に関数を引数として渡せます。
すなわち、JavaScriptの関数は第一級関数と呼ばれるものになり、
関数はオブジェクト扱いなので、値として扱える。