JavaScript関数を定義する方法

私は常にすべてを覚えて少しのトラブルを持って、また、私が好きな小さなコレクション側があるので、ここではJavaScriptの機能を定義するために存在するさまざまな方法の概要です.

宣言を通じて
古典的な方法はJavaScriptの起源にさかのぼります、そして、単にfunctionと機能を宣言することから成ります.

function hello (firstname) {
  console.log(`Hello ${firstname}`);
}

この関数は名前「hello」を持ち、名前付き関数となります.

表情で
関数が他のようなオブジェクトであり、変数に割り当てることができるという事実を強調するより近代的なメソッドです.

const hello = function (firstname) {
  console.log(`Hello ${firstname}`);
};

これが明らかでない場合でも、この関数は匿名です.

それは名前を与えることなく作成されます{…}】

はそれが名前

を持つ変数に割り当てられますが
注意:これは変数への代入です(この場合は割り当てられた関数です).このコマンドはセミコロンで終了します.

矢印構文で
ES 6を使用すると、新しい構文"矢印"が式で関数を宣言するようになりました.

は、引数のリストの前にキーワードconst pi = 3.14;を取り除きます.

はこのリストの後にシンボルfunctionを追加します.

const hello = (firstname) => {
  console.log(`Hello ${firstname}`);
};

それはよりコンパクトです、そして、ゴールはよりきれいなコードを得ることです.このため、矢印の機能をさらに簡単にすることができます.

だけで括弧内に置く必要はありません.

関数=>のコードの1行だけがブロック“{...}”を必要としません.

関数が“return ...”=”になる場合のみ242479142は役に立たない.

結局、以下の3つの宣言は同じです.

const hello1 = function (firstname) {
  return `Hello ${firstname}`;
};

const hello2 = (firstname) => {
  return `Hello ${firstname}`;
};

const hello3 = firstname => `Hello ${firstname}`; // (°~°)

このきれいな面は、コールバックに本当に役に立ちます.たとえば、コールバック関数を期待するテーブルの=>メソッドを使用すると、いくつかの興味深いstuffsを得ることができます.

const test = [1, 2, 3];

function doubler (x) {
  return x * 2;
}
test.map(doubler);                          // [2, 4, 6]

test.map(function (x) { return x * 2; });   // [2, 4, 6]

test.map((x) => { return x * 2; });         // [2, 4, 6]

test.map(x => x * 2);                       // [2, 4, 6] Bingo!

この記事はもともとblogに掲載されました.
カバー画像:Wall decorations with colorful butterflies - __ drz __ .