はじめに
reactでtodoアプリを作成しているのですが、アロー関数の省略記法についての理解が不足していると感じたので今回の記事を書いてみます。今回は省略記法に絞った記事のためアロー関数とは何かについては書いておりませんのでよろしくお願いします。また、もし間違いなどがあればコメント頂けますと私の勉強になりますのでよろしくお願いします。
省略記法の書き方
- 引数が1つだけの時はカッコを省略できる
//通常の書き方
const hello = (word) => {
return word
}
console.log(hello("こんにちは") //出力結果 こんにちは
省略記法を使うとこのように書くことができます。
//省略した書き方
const hello = word => {
return word
}
console.log(hello("こんにちは") //出力結果 こんにちは
引数のカッコがなくなりました。
- 関数の処理が式を直接返す場合
//通常の書き方
const hello = (word) => {
return word
}
console.log(hello("こんにちは") //出力結果 こんにちは
省略記法を使うとこのように書くことができます。
//省略した書き方
const hello = word => word
console.log(hello("こんにちは") //出力結果 こんにちは
{}とreturnがなくなりました。
このように省略記法を使うとすっきりと書くことができます。一方で省略記法を知らないと、これがアロー関数なのかよく分からないと思います。
私の場合
冒頭でtodoアプリ作成時に、アロー関数の省略記法についての理解が不足していると書きました。私の場合は何が問題であったのか記載します。
こちらではtodoアプリに記入した勉強時間の合計時間を計算する処理を行っていました。特にコンソールにエラーは出ていないのですが、合計時間が表示されていないという現象が起きていました。
//修正前
const totalTime = time.reduce((totalTime, currentTime) => {
totalTime + currentTime;
}, 0);
returnが抜けていたのです。（もしくは{}が不要）
//修正後
const totalTime = time.reduce((totalTime, currentTime) => {
return totalTime + currentTime;
}, 0);
省略ができるということは覚えていたのですが、returnを省略するなら{}の省略する必要がありました。しかしなんとなくでしか覚えていなかったので、ここに気がつくまでにかなり時間がかかってしまいました。
最後に
エンジニアになって4年目になります。お恥ずかしい話ですが、変数に関数が代入してあるときなどに「なんでこれがアロー関数なのだろう？」と思っていました。()も{}もないのになぜ関数なのか、今まではよく分かっていませんでした。
今まで私が関数としっかり認識できていなかったのは、省略記法を知らなかったからです。JavaScriptは省略したがる言語とのことなので、省略記法をしっかりと使うことでさらに理解を深めたいと思います。
またこのようなjsの細かい基本知識の不足が、私のreact学習が今までうまくいっていなかった根本的な原因だと改めて再認識しました。