結構雑に無名関数は使ってたんだけどまだ知識がレガシーだったので備忘
一旦コード書きますね。
const isInput = bo.tagName.toLowerCase() === 'input';
const getText = () => isInput ? bo.value : bo.textContent;
const setText = (text) => isInput ? (bo.value = text) : (bo.textContent = text);
最近のコードがこれです。
そもそも無名関数って何？アロー関数って何？
「そもそも無名関数って何？」という人もいると思いますが、これはなんてことはない、名前を付けない関数のことです。
アロー関数は無名関数の一部です。ほぼニアリーイコールです。
通常の関数は 「function 関数名(引数) { 処理; return 戻り値; }」 という形です。そして、定義した関数を 「変数 = 関数名(引数)」 のように呼び出して使います。
たとえば：
function aaa(x) {
let b = x + 1;
return b;
}
console.log(aaa(10)); // 11
さて、無名関数の説明をする前に1つだけ補足すると、「関数は変数に代入することができます」：
変数 = function 関数名(引数) { 処理; return 戻り値; };
たとえば、こんな風に関数を定義して変数に代入できます：
const bbb = function aaa(x) {
let b = x + 1;
return b;
};
console.log(bbb(10)); // 11
変数 bbb に代入したことで、bbb は関数として呼び出すことができます。つまり：
変数 = function 関数名(引数) { 処理; return 戻り値; };
というのは、変数に「関数」が入ってるということです。以降、代入先を「関数」と書きますが、実際は const 変数名 = ... の形で使います。
そして、関数を代入するとき、定義した関数の名前（ここでは aaa）が不要なら、いっそ名前を省略しようというのが無名関数の第一段階目です：
関数 = function(引数) { 処理; return 戻り値; };
たとえば：
const bbb = function(x) {
let b = x + 1;
return b;
};
console.log(bbb(10)); // 11
関数名を省略して、直接 function(x) と書く形です。これで、名前をつけない関数、つまり無名関数が作れます。
ちなみに、このように関数内で別の関数を定義することもできます。
たとえば：function outer() {
const inner = function(x) {
let b = x + 1;
return b;
};
return inner(10);
}
console.log(outer()); // 11
ここでは inner が outer の中で定義されていて、外からは見えません。
第二段階として、今度は function を省略します。代わりにアロー（=>）を使って、アロー右側が関数の処理であることを明示します：
関数 = (引数) => { 処理; return 戻り値; };
function がなくなるだけで、かなりスッキリしますね。
たとえば：
const bbb = (x) => {
let b = x + 1;
return b;
};
console.log(bbb(10)); // 11
ここからは、1行で書く場合に限りますが、さらに短く記述することが可能です。第三段階は：
関数 = (引数) => 処理
たとえば：
const aaa = (x) => x + 1;
console.log(aaa(10)); // 11
通常、処理結果をいったん変数に入れて、それを戻り値として返します。でも、1行の場合は『処理結果がそのまま戻り値になる』と分かるので、return を省略できます。また、1行だけなら『=> の後が戻り値の式』と確定するので、{} も外せます。
{} を外すと、1つの式しか書けなくなるため、return を書くとエラーになります。つまり、『処理結果が直接戻り値になる』ので、return は不要となります。
無名関数の話をまとめると・・・
⓪function aaa(x) {let b = x + 1; return b;}要点としては
①関数は変数に代入できる
②関数名が不要になる
③アロー関数で functionも省略 できる
④1行限定で括弧とreturnも省略できる
三項演算子
簡単に言えば「if、else」文の短縮記述ですね。
最初に記述した「isInput ? (bo.value = text) : (bo.textContent = text);」はisInput がtrueかfalseになります。
これによって真ならコロンの左側が、偽なら右側の代入処理が行われます。
もう一つ「const getText = () => isInput ? bo.value : bo.textContent;」
こちらはreturnがあります。アロー関数を使って三項演算子を使った場合、上記なら真の場合、インプットボタンのバリューが返り、偽ならボタンのテキストが返ります。
アロー関数の一行記述の場合、直接returnが返ってしまいますが簡単な計算や簡単な分岐returnぐらいなら可能という事です。
