【JavaScript】始めたての頃に間違えた初歩的な出力問題【アロー関数】

〜　とある、もくもく会にて　〜

🔰 初めてのアロー関数

※ 実話
　

自分「先輩PC忘れたんですか？（チャンス..!!）」
　　「暇ならJavaScript教えてくれませんか」
先輩「いいよ〜JavaScript始めたの〜？」

自分「はい、まだ全然ですがアロー関数が知りたいです」
先輩「おっけ〜じゃあ適当に書くから、出力結果は何になる〜？」
　
（MacにVSCodeでカタカタ書き始める）
　

出力問題 1

問題１

let f = (x) => 1
f(42);

console.log(f(42));

　
自分「（おお！矢印だ..！）う〜ん...42ですか？」

先輩「お〜！ Node.jsは入れてる〜？」
自分「はい！インストールしてます」
先輩「じゃあ出力してみよう〜」

コマンドプロンプト

cd ./Desktop/workspace/JavaScript
node Question1.js

答え（クリックで開く）

コマンドプロンプト

1

　
　
　
　
　
　
　
　
　
　
　
　
　

先輩「はいハズレ〜」

自分「えっ..42はどこに行ったんですか」
先輩「これをな〜普通に書くとこうなるんよ〜」

先輩のコード

let f = function(x){
    return 1;
};
console.log(f(42));

先輩「xは42だけど、返ってくるのはただの1なんだよ〜」
自分「は〜なるほど」

　
自分「つまりこう書けば、結果は42になるんですね」

私のコード

let f = (x) => x
f(42);

console.log(f(42));

　
自分「functionで書くとこうなる」

私のコード

let f = function(x){
    return x;
};
console.log(f(42));

先輩「そう〜」

　
自分「2行目のf(42);ってなんですか？」
先輩「消し忘れたけどまぁいいやって、消しても同じ〜」

問題１

let f = (x) => 1
console.log(f(42));

自分「あぁ…あとさっき、お〜！って言ったのはなんですか」

先輩「じゃあ次〜」
自分「・・・。」
　

出力問題 2

先輩「ｶﾀｶﾀ...次はこれどうなる？」

問題２

let f = (x) => y
console.log(f(42));

自分「yが返ってくるので、yですか？」
先輩「ファイナルアンサー？」
自分「はい」
先輩「お〜！じゃあ出力してみよう〜」
　

答え（クリックで開く）

エラー

コマンドプロンプト

ReferenceError: y is not defined

　
　
　
　
　
　
　
　
　
　
　
　
自分「えっ」

先輩「変数を定義してないからな〜」
自分「んn...（2行程度の問題に正解出来なかった...）」
　

💘 アロー関数とは

ES6（ES2015）で導入された新しい関数の書き方
文字どうり、矢 => を使って書く。

アロー関数

let sum = (a, b) => a + b;
console.log(sum(3, 7));  // 結果：10

functionの場合

function sum(a, b){
    return a + b;
}
console.log(sum(3, 7));  // 結果：10

　
　
複数行の場合は、{}でも書ける。

複数行の場合

let sum = (a, b) => {
    let result = a + b;
    return result;
}
console.log(sum(4, 5)); // 9

　
　

・ アロー関数でのthisについて

従来の無名関数とthisの参照が異なる。
従来の無名関数は関数の呼び方によってthisの参照先が異なるが、アロー関数は関数が定義されたスコープ内のthisを参照する。

つまりthisを使用する場合は気を付ける必要がある。
少し難しいので下記を参考にしましょう。

▪️ 参考記事
【JavaScript】アロー関数式を学ぶついでにthisも復習する話
　JavaScript の this を理解する多分一番分かりやすい説明
　
　

💬 終わりに

ちょっと恥ずかしいのですが...ここまでの内容は実話で、
昔、もくもく会でお会いした際の、先輩（GitHub）とのやりとり。
しかしアロー関数は知っておくべきもので頭にもしっかり残したいので、1つでも記事を書いておきたかった。

ちなみにこの時に、定数のconstで配列の内容が変更出来る事でもヒッカケられました。
...でも教えてくれてありがとうね！

（ところで、もくもく会にPC持たずに何しに来たんだ...。）
　
　

リンク

🐦 Twitter
https://twitter.com/aocattleya
GitHub
https://github.com/aocattleya
📗 Qiita
https://qiita.com/aocattleya