関数と関数式(無名関数)とアロー関数(ド初級編)

JSにはいくつか固有の書き方があると(個人的に)思っています。 まずは関数と関数式の違いについて 引数nameで指定した文字に対してハローと返すだけの簡単な関数です

関数

function hello(name) {
return name + 'さん、こにちは'
};

関数式ではこうなります

関数式

const hello = function(name) {
return name + 'さん、こにちは'
}
const greeting = hello('山岡四郎');
console.log(greeting);

上記の関数式をより短く記述できるのがアロー関数です。 わかりやすいように上のコードをアロー関数化します

const hello = (name) => {
return name + 'さん、こにちは'
}
const greeting = hello('山岡四郎');
console.log(greeting);

functionをけして「=>」の矢印(アロー)を付与するだけ。簡単ですね

また、処理の中身がreturnするだけの場合はもっと短くできます

const hello = (name) => name + 'さん、こにちは';
const greeting = hello('山岡四郎');
console.log(greeting);

ブロックとreturn文章がなくなりますね. また、今回の関数のように引数が一つの場合()も省略できます

const hello = name => name + 'さん、こにちは';
const greeting = hello('山岡四郎');
console.log(greeting);

正直、ここまでくると慣れていない方はわからなそうです。 JK言葉なみに略してますね。 理解が曖昧な部分を簡単に整理してみました。