アロー関数(無名関数)＆三項演算子を学んだ話

 結構雑に無名関数は使ってたんだけどまだ知識がレガシーだったので備忘

一旦コード書きますね。

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;}

①const bbb = function aaa(x) { let b = x + 1; return b; };

②const bbb = function (x)  { let b = x + 1; return b; };

③const bbb = (x) => { let b = x + 1; return b; };

④const aaa = (x) => x + 1;

要点としては
①関数は変数に代入できる
②関数名が不要になる
③アロー関数で functionも省略 できる
④1行限定で括弧とreturnも省略できる

三項演算子

【条件 ? 真の場合 : 偽の場合】
簡単に言えば「if、else」文の短縮記述ですね。

感覚としてはエクセル関数のifの記述に似ています。

最初に記述した「isInput ? (bo.value = text) : (bo.textContent = text);」はisInput がtrueかfalseになります。
これによって真ならコロンの左側が、偽なら右側の代入処理が行われます。

もう一つ「const getText = () => isInput ? bo.value : bo.textContent;」
こちらはreturnがあります。アロー関数を使って三項演算子を使った場合、上記なら真の場合、インプットボタンのバリューが返り、偽ならボタンのテキストが返ります。

アロー関数の一行記述の場合、直接returnが返ってしまいますが簡単な計算や簡単な分岐returnぐらいなら可能という事です。