【JavaScript】アロー関数の使い方。functionとの違いを実例でわかりやすく解説

JavaScriptでよく使われるアロー関数について簡単なまとめです。

書き方

・const 関数名 = (引数)=>{処理;};
　└ const：定数を定義。関数名になる
　└ 引数：省略可

functionと異なりアロー関数自体は関数名を持たないため、代入した定数(変数)名が関数名になる。

*constはvarやletなど変数でも可(自由度が異なる)。誤った書き換えや重複防止のためにconst推奨。

アロー関数の呼び出し

・関数名();

定数(変数)名に()をつける。
functionで定義した関数の呼び出しと同じ。

//アロー関数の場合
const hello1 = ()=>{
    console.log('こんにちは');
}


//functionの場合
function hello2(){
    console.log('ハロー');
}

hello1();
hello2();


//出力
こんにちは
ハロー

functionを定数(変数)に代入することもできる

const hello3 = function hello2 (){
    console.log('ハロー');
}

hello3();
hello2();

//出力
ハロー
hello2 is not defined

※hello2()は使えなくなる。

const hello3 = function(){
    console.log('ハロー');
}

hello3();

//出力
ハロー

引数を使う

・const 関数名 = (引数名１, 引数名２,,,,)=>{処理}
　└ 引数名は任意（小文字アルファベット）
　└ 大文字、数値はエラー
　└ 引数の数と

引数名は内容を端的に示すものをつける。

const hello2 = (name, prefecture)=>{
    console.log(`${name}さんこんにちは。出身地は${prefecture}ですね`);
}

hello2('TODOROKI','長野')

//出力
//TODOROKIさんこんにちは。出身地は長野ですね

変数展開：「`${変数名}`」を使うと、文字列と変数をつなげて書ける。
※｀：バッククオート（shift+@）

▼引数名は任意の例

const hello3 = (aaa, bbb)=>{
    console.log(`${aaa}さんこんにちは。出身地は${bbb}ですね`);
}

hello3('TODOROKI','長野')

//出力
//TODOROKIさんこんにちは。出身地は長野ですね

補足

▼仮引数の数だけ渡さなくてもエラーにならない。
　└ undefinedになる
　└ phpやpythonはエラー

const hello1 = (name, prefecture)=>{
    console.log(`${name}さんこんにちは。出身地は${prefecture}ですね`);
}

hello1()

//出力
//undefinedさんこんにちは。出身地はundefinedですね