猫とGAS

猫の写真を載せる。ついでにGASやVueJSの開発備忘録を兼ねる。

JavaScript関数の色々な書き方を並べてみる

同じ処理でも複数の書き方ができるところがjavaScriptの混乱を招きやすいところである。ここではjavascript関数の書き方について備忘録的に簡単にまとめておく。

引数を受け取り、1を足して返すシンプルな関数である。plus1(2)と書いて実行すると、2に1が足され3が返ってくる。これを他の書き方で書いてみたい。

変数plus1に関数を代入した形である。plus1には関数が代入されているので、こちらもplus1(2)と書けばやはり3が返ってくる。

functionを省略した形である。引数を表す括弧と処理を表す中括弧をアロー(矢)のような記号で繋ぐのでアロー関数と呼ばれる。関数を引数に取る関数(Arrayの関数など)でよく用いられる。ちなみに、アロー関数で書くとうまくいかないものもある。 Vue インスタンスの methods にアロー関数を使ったら動作しない理由を this のスコープで説明します

アロー関数がそもそも省略形だが、処理が1行の場合は中括弧とreturnすら省略できる。戻り値を必要としない場合でも同じ書き方ができる。余談だが、括弧でくくることで即時実行することもできる。
((num)=>num+1)(2);
極限まで短く書いてやろうという強い執念を感じるが、この例で言えば普通に「2+1;」と書いた方が早い。

厳密には先ほどまでの処理と同じではないが、カッコでくくるとカンマまでに処理内容、カンマの後に返却する値、という形で1行で書ける。先ほどまでの処理と何が違うかというと、plus1(2)を実行して3が返ってくるまでは一緒だが、格納と返却を同時に行なっているため実行後にresultを確認すると3が格納されている。

これまでとは内容が異なるが、小慣れてくるとJSONオブジェクトの便利さに気がつき、アロー関数でも返却しようとすることがあると思う。その時つまづかないように今のうちに小石を拾っておこう。まずはダメな例を挙げる。 この処理を実行するとエラーになる。GASで書くとまず構文エラーで保存ができない。なぜかというと、中括弧を処理だと解釈するためだ。アロー関数の最初の例を見てみると理解してもらえると思う。
let plus1 = (num)=>{return {org: num, result: num+1}};
これであればうまくいく。しかし何かスマートでない。。。本当にこんな書き方しかできないのか?いや、そんなわけはない。もっとスマートな書き方がちゃんとある。最後にその書き方を記して本記事の締めくくりとするが、その前にわたじいを見ておこう。

椅子の足を枕にするわたじい
椅子の足を枕にするわたじい

だらしない。。。椅子の足に顎を乗っけて、ベストフィットの位置なのだろう。ローラーなんて近すぎて、もし座っていたら危なくて動けないな。

JSON記法のオブジェクトをアロー関数で返却する答え