Edited at

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


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



🔰 初めてのアロー関数

※ 実話

 

自分「先輩PC忘れたんですか?(チャンス..!!)」

  「暇ならJavaScript教えてくれませんか」

先輩「いいよ〜JavaScript始めたの〜?」

自分「はい、まだ全然ですがアロー関数が知りたいです」

先輩「おっけ〜じゃあ適当に書くから、出力結果は何になる〜?」

 

(MacにVSCodeでカタカタ書き始める)

 


出力問題 1


問題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);ってなんですか?」

先輩「消し忘れたけどまぁいいやって、消しても同じ〜」


問題1


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

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

先輩「じゃあ次〜」

自分「・・・。」

 


出力問題 2

先輩「カタカタ...次はこれどうなる?」


問題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

:octocat: GitHub

https://github.com/aocattleya

📗 Qiita

https://qiita.com/aocattleya