JavaScriptのファーストクラス関数を学ぶ

このポストを与えてください💓, 🦄, or 🔖 あなたがそれを楽しむならば!
JavaScriptは一流関数を持っています.これは、関数を他の値と同様に扱うことができます.これはJavaScript開発者としてあなたが進めるように理解するために非常に重要な振る舞いであることがわかります.次の3つの箇条書きは、重要なファーストクラスの機能動作を表します.

関数は変数

関数は、他の関数

関数は他の関数から

のは、基本的な例を使用して、これらの箇条書きのそれぞれを探索してみましょうし、一緒に最後に、より複雑な、現実世界の例と一緒に最後にそれをもたらす!
私は他の簡単なチュートリアルコンテンツを消化する!以下を考えてください.

私の購読DevTuts mailing list

私の購読

変数への関数の割り当て
テキストを返す関数を作成しましょう"Hello" そして、その関数を創造的に命名された変数に割り当てるsayHello .

const sayHello = () => {
  return 'Hello';
};

console.log(sayHello());
// "Hello"

かなり基本的!動きましょう.

引数として関数を渡す
前述しましょうsayHello 関数を別の関数への引数として渡す.この他の関数は、特定の人に挨拶するでしょう.

const sayHelloToPerson = (greeter, person) => {
  return greeter() + ' ' + person;
};

console.log(sayHelloToPerson(sayHello, 'John'));
// Hello John

我々が何をするかについての速いメモsayHello 関数へsayHelloToPerson : 内部sayHelloToPerson 関数、変数greeter では、sayHello メモリの機能.我々が呼ぶときgreeter() , この関数は呼び出されます!
注意:普通はこの場合、templateリテラルを使います.return `${greeter()} ${person}` ), しかし、この例では、水を泥だらけにするために、テンプレートリテラル構文を望まなかった!

他の関数から関数を返す
多分、我々はalwaysが言いたくないでしょう"Hello" , しかし、むしろgreetersの異なる種類の任意の数を作成する選択をしたい.greeter関数を作成できる関数を使いましょう.

const greeterMaker = greeting => {
  return person => {
    return greeting + ' ' + person;
  };
};

const sayHelloToPerson = greeterMaker('Hello');
const sayHowdyToPerson = greeterMaker('Howdy');

console.log(sayHelloToPerson('Joanne'));
// "Hello Joanne"

console.log(sayHowdyToPerson('Joanne'));
// "Howdy Joanne"

我々greeterMaker 関数を作成する関数です.かなり気の利いた、右?

いくつかの楽しい、現実世界のユースケース
今ではファーストクラスの機能の基礎をチェックしてみましょう.

オブジェクトの検証
おそらく、あなたは、オブジェクト(例えば、新しいユーザ情報)が「有効な」と考えられるために通過する必要がある基準の束を持っていますすべての基準を反復し、オブジェクトが有効かどうかを返す関数を作成しましょう.

const usernameLongEnough = obj => {
  return obj.username.length >= 5;
};

const passwordsMatch = obj => {
  return obj.password === obj.confirmPassword;
};

const objectIsValid = (obj, ...funcs) => {
  for (let i = 0; i < funcs.length; i++) {
    if (funcs[i](obj) === false) {
      return false;
    }
  }

  return true;
};

const obj1 = {
  username: 'abc123',
  password: 'foobar',
  confirmPassword: 'foobar',
};

const obj1Valid = objectIsValid(obj1, usernameLongEnough, passwordsMatch);
console.log(obj1Valid);
// true

const obj2 = {
  username: 'joe555',
  password: 'foobar',
  confirmPassword: 'oops',
};

const obj2Valid = objectIsValid(obj2, usernameLongEnough, passwordsMatch);
console.log(obj2Valid);
// false

あなたがJavaScriptに比較的新しいならば、それは何が起こっているかについて理解するためにあなたにいくつかの読むスルーをするかもしれません、しかし、私を信頼してください、ペイオフはあなたが理解するならば、大きいです!
注意:残りの演算子に慣れていない場合(... ), これにより、関数に与えられたすべての引数は、指定された名前で配列に配置されます.

API閉鎖
APIキーを使用してAPIに接続したい場合があります.すべてのリクエストにこのキーを追加することができます.また、APIキーパラメータを受け取り、APIキーを含む関数を各リクエストで返す関数を作成することもできます.
重要:フロントエンドコードで秘密のAPIキーを置かないでください.代わりに、次のコードがノードベースのバックエンドにあります.

const apiConnect = apiKey => {
  const getData = route => {
    return axios.get(`${route}?key=${apiKey}`);
  };

  const postData = (route, params) => {
    return axios.post(route, {
      body: JSON.stringify(params),
      headers: {
        Authorization: `Bearer ${apiKey}`,
      },
    });
  };

  return { getData, postData };
};

const api = apiConnect('my-secret-key');

// No need to include the apiKey anymore
api.getData('http://www.example.com/get-endpoint');
api.postData('http://www.example.com/post-endpoint', { name: 'Joe' });

結論
そして、あなたはそれを持っている!うまくいけば、あなたはJavaScriptの機能が本当に一流であることを、そして、重要な機能があなたのJavaScript開発経歴にありえるとわかります.私はあなたのコードで関数を使用するすべての種類の練習をお勧めします!