〜 とある、もくもく会にて 〜
🔰 初めてのアロー関数
※ 実話
自分「先輩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 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