【JavaScript】「関数って何？？」「アロー関数って？」の初心者にわかりやすく解説する話

まだProgateで学習を進めている身ですが、「JavaScript学習コース」をいったん通しで最後まで進めていると、途中で、そもそも「関数」ってなんだっけといった状態になってきたので振返って理解をしたいと思い、まとめてみました。

【JavaScriptの関数とは】

関数とはざっくり「いくつかの処理をまとめたもの」です。

処理というのは例えば、console.log()　などです。

関数を作る場合、まず「これは関数ですよ」といった関数の定義が必要になります。

それがこれ　「function( )｛ ｝」。これで１セットで覚えてしまっていいのではと思っています。

例：names という定数を使用して以下例文。

const names = function() {
    console.log("名前１です");
    console.log("名前2です");
};

「function( )」で 定数names は　関数です！　と宣言！　そして　｛　｝　の中にまとめたい　処理　をいれます。この場合は console.log()が2つ。

そして上記のように関数の構文ができても、これだけでは何も実行されません。関数が定義されただけなので。

なので、関数ができたら、その関数を呼び出したい（＝使いたい＝実行したい）場合には下記↓

names();

と　定義した関数名（）;　で呼び出すことで　{ }内にまとめられている処理が実行されるといった流れになります。

すなわち、console.log()が2つ実行されるといった具合になります。

関数についてまとめると、

関数はいくつかの処理をまとめたもの　と覚えれば良いかと思います。

同じ処理を何度も書くのはめんどくさいので、ひとまとめにしてしまって、簡単にまとめた処理を実行するためにこんな形になっています。

一応ですが、配列やオブジェクトとの違いは下記です。※私もこの辺との違いがこんがらがってきたのでまとめておきます。

配列やオブジェクトは　複数の値を管理するもの　といった点で似てはいますが、「関数」は単なる値ではなく、処理をまとめてある箱です。

配列は複数の値を並べて管理　→　[値１, 値２, 値３...]

オブジェクトはそれぞれの値に名前（名前のことをプロパティと呼びます）を付けて管理　↓

[プロパティ名１:  値１   ,   プロパティ名２ :  値２  , ...]　

といった具合です。　

次にアロー関数です。

ここまで読んで頂き申し訳ないのですが、実はアロー関数を覚えると先ほどのfunction　は　使わなくてよくなります...泣　

さっそく見てみると、アロー関数は、下記

function() {};   を   () => {}　 

に変えるだけです。　function と入力する代わりに( ) のあとに、

アロー（弓矢の矢）の形のもの　＝＞　を入力するだけなのでコードが

シンプルになりました。

ここしか変わりません。呼び出し方も一緒です。なので　functionだと下記だったのが、

【function　を　使う場合】

const names = function() {
    console.log("名前１です");
    console.log("名前2です");
};
names();

下記、アロー関数の場合、

【アロー関数　を　使う場合】

const names = () => {
    console.log("名前１です");
    console.log("名前2です");
};
names();

です。

一旦ここまでのnoteでした。