3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript の即時関数さんてさ?

Last updated at Posted at 2021-07-13

即時関数とは

即時関数について知らない方はググって知識を得てからいかに進んでくださいm(_ _)m

文が書けるとこでは即時関数の出番は減る

JavaScript には、「文(statement)」と「式(expression)」という概念があります。それを知らずにプログラミングするということは、冬に富士山頂上を目指すようなものですから(?)、ググって知識を得てからいかに進んでくださいm(_ _)m

さて、ここまで進んでこられた皆さんにすればどうということもない話であると思いますが、ブロック文を使えば、即時関数の出番は減ります。


let c = 0;
{
  const a = 1;
  const b = 2;
  let c = a + b;
}
console.log(c); // 0

つまり、変数のスコープを狭めるだけの目的でわざわざ即時関数を使う種族は絶滅したはずである、ということです。

文が書けない場所

JavaScript には、「式」しか書けない場所というものがあります。
有名なところでは、React などの jsx 内の{ここ}や、テンプレートリテラル内の${ ココ }です。あと、「演算子」ですから当たり前かもしれませんが、三項演算子の中でも「式」しか使えませんよね。
do 式なるものが提案されていますが、まだ正式採用はされていませんので、「文」であるブロック文が使えない上記のような場所では、「式」である即時関数が大活躍することになります。

世界一美しい即時関数の書き方

【JS】世界一美しい即時関数の書き方 ~ JavaScriptに関するお知らせ ~ では、次のような書き方が紹介されています。


<div class="main"> {
  (_=>{
    // ここに
    // 処理を書く
  })``
} </div>

美しいですね。即時関数は普通に書くと()だらけでダサいんですよね。ちなみに最後の `` は、テンプレートリテラルのタグ関数というやつです。タグ関数知らない、という方はググって勉強しておいてくださいね。
However, 個人的には次の書き方が好みです。


<div class="main"> {
  function immediately() {
    // ここに
    // 処理を書く
  }``
} </div>

外側の()がないだけでもかなり見やすい気がするのですが・・・
どうも、「式」しか書けない場所では、アロー関数形式ではなくfunction()形式を用いる限り、 外側の()はなくても許されるようです。
プロのエンジニアは、ひとつの言語だけず~っとやってるわけにはいきません。久しぶりにJavaScript に戻ってきて、過去のソースを見たときに、こちらの方が自分フレンドリーな気がするのですがどうでしょう。
美しさだけに頼って食べていけるわけではありません(泣)
immediately なくてもいいですが、書いておいた方が即時関数であることがパッと見から判別しやすいですし、英語圏のエンジニアに仕事を促す際に必須の単語ともいえる、immediately のスペリングにも強くなれます。

最後に

長々とすみませんでした。次の投稿で今回の知識が役立つことになりますので許してください。

3
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?