最新！JavaScript入門講座ー関数式の書き方をわかりやすく解説

関数は任意の機能を持たせ、繰り返し呼び出したりコードが見やすくなるといったメリットがあります。関数の基本的な書き方は決まっていますが、JavaScriptには基本的な書き方意外にも、関数を変数のようにして定義できる方法がいくつも存在します。

それが関数式になります。
関数式という書き方は、最近になって実装された機能です。昔からあるサイトには使われていない新しい書き方です。

今の開発では関数式が使われている傾向にあります。なので、初心者の方は今の主流の書き方になれる必要があります。

今回は初心者の方向けに関数式の書き方について解説していきます。

関数式の解説

無名関数の解説

まずは無名関数から解説していきます。
まずは、基本的な書き方からみていきましょう。

無名関数の書き方はこの通りです。
変数宣言、初期化と同じように変数に代入させます。このとき、予約語であるfunctionの後に関数名を省略しています。これが無名関数になります。

呼び出すときは変数名を記述します。

では実際にサンプルをみていきましょう。

const ticker=function (flag){
    let array = ["VYM","SPYD","HDV","VOO","IVV","SPY","VTI","VEA","GLD","QQQ"];
    return array[flag];
}

let getTicker;
for(let i = 0;i < 5;i++){
    getTicker = ticker(Math.floor(Math.random()*11));

    console.log(`${i+1} : ${getTicker}`);
}

$ node func.js

1 : HDV
2 : VEA
3 : SPYD
4 : GLD
5 : HDV

21回で解説したサンプルを無名関数に書き直すとこのようになります。
通常の関数を定義した場合は呼び出すときに関数名を呼び出しますが、無名関数の場合は定義した変数名を呼び出します。

もうひとつ、例をみていきましょう。

const profit =function (sales,cost){
    return sales-cost;
}

let getProfit = profit(10000000,50000000);
console.log(`純利益 : ${getProfit}`);

$ node func.js

純利益 : -40000000

はいこちらは利益を計算する関数になります。実質引き算をやっているだけですね。
基本的に利益は売り上げー経費という計算式ですね。

アロー関数式を解説

続いては最近よく使われるアロー関数式について解説していきます。
まずは書き方について解説していきます。

アロー関数式の書き方は上記の通りです。
無名関数の時と比べてさらに記述する内容が減ります。予約語のfunctionを省略することが可能です。予約語の代わりにアロー関数の名の如く、=>を記述します。
アロー関数はこのように非常にシンプルに書くことができます。

では実際のコードをみていきましょう。

const companys = (comp) =>{
    return comp.length;
}

let array = ["Anker","ASUS","Intel","GIGABYTE","ZOTAC","CoolerMaster","Western Digital"];

for(let i = 0;i < array.length;i++){
    console.log(`${array[i]} : ${companys(array[i])}`);
}

$ node func.js

Anker : 5
ASUS : 4
Intel : 5
GIGABYTE : 8
ZOTAC : 5
CoolerMaster : 12
Western Digital : 15

これは配列の要素を受け取って、文字列の長さを返すアロー関数になっています。
アロー関数は書き方は変わりますが、関数の宣言、初期化、呼び出しのやりかたは無名関数と同じようにやります。

まとめ

短いですが、今回のまとめに入りましょう。
今回は下記のようなことを学びました。

では、今回はここまでとなります。
お疲れ様でした。

参考文献

関数 - JavaScript | MDN

関数は、 JavaScript の基本的な構成要素のひとつです。 JavaScript の関数は、プロシージャに似ています。 — タスクを実行したり値を計算したりする一連の文ですが、プロシージャが関数として認められるためには、何らかの入力を受け取り、入力と出力の間に何らかの明白な関係がある出力を返す必要があります。関数...

developer.mozilla.org

JavaScript Primer - 迷わないための入門書

JavaScript Primerは、JavaScriptの基礎から応用までを一貫して学べる入門書です。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org