即時関数

このタグでブログを書く

言葉の解説

ネットで話題

即時関数

(コンピュータ)

【そくじかんすう】

JavaScriptで使われているコード(function(){...})()の呼び名のひとつ。JavaScriptパターン ―優れたアプリケーションのための作法で命名されている*1。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現する*2。JavaScriptにおいて頻繁に使われている手法である。

使用例

一般的な使用例

(function(){
  var a = "hatena";
  alert(a); //hatena
})();

その他使用例

()の代わりに「+」「-」「!」「void」「typeof」などの単項演算子を用いることも可能である*3。

+function(){
  var a = "hatena";
  alert(a); //hatena
}();

!function(){
  var a = "hatena";
  alert(a); //hatena
}();

PHP

他プログラミング言語のPHPでも同様の手法が可能である*4。

call_user_func(function(){
  /*
   * このブロックは擬似的にブロックスコープを持つ
   *
   */
  $a = "hatena";
  echo $a; // hatena
});

*1:知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵

*2:即時関数(function(){ ... })()の別の書き方いろいろ: Architect Note

*3:即時関数(function(){ ... })()の別の書き方いろいろ: Architect Note

*4:PHP5.3で即時関数: Architect Note

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

(gensym)•7ヶ月前

即時関数と老害

2015年あたりに勤務していた会社には顧問CTOが出入りしていた。開発者で雑談のよう場があり、JavaScriptの即時関数の話になり、自分は、即時関数という概念自体が言語の欠陥であると主張したが、顧問CTOに「そういう老害の考えはやめて、時代に即して柔軟に考えていかなければいけない」と諭された。自分は「はぁ?!」と思うばかりであったが、Rubyコミュニティで有名な人物だったので、言語仕様がどうのこうのという議論をするバックグラウンドはなさそうだなと考えて深追いはしなかった。久し振りに思い出して確認してみると、いまや即時関数などという概念を固持していたら逆に老害扱いされそうな有様である。 …

#即時関数

ネットで話題

1416ブックマーク知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て (function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解で...

d.hatena.ne.jp

384ブックマーク即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように

blog.tojiru.net

134ブックマーク即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）即時関数の構文即時関数はスコープを汚染せずに新たなスコープを作成するための唯一の手段即時関数が使われるケースまとめ JavaScriptには「即時関数」という構文があります。即時関数は関数を定義すると同時に実行するための構文で、この即時関数を使ってコードを書いたことのある方も多いのではないかと思います。 ...

analogic.jp

129ブックマーク JavaScriptから即時関数を排除する - Qiita

qiita.com

121ブックマーク JavaScriptで即時関数を使う理由 - Qiita

qiita.com

89ブックマーク JavaScriptの即時関数とは何か。意味やメリット、引数の使い方についてまとめてみた。 | ゴトーのブログ

www.gamehuntblog.com

39ブックマーク彼氏が(function(){...})()を即時関数って言ってた。別れたい。 - このブログは証明できない。

d.hatena.ne.jp

29ブックマーク【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！ | unitopi - ユニトピ -

unitopi.com

27ブックマーク CoffeeScriptで即時関数 - 四角革命前夜

sasaplus1.hatenadiary.com

関連ブログ

sai_dive IL•3年前

【JavaScript】即時関数

即時関数とは? 関数定義と同時に一度だけ実行される関数 let result = (function(仮引数) { return 戻り値; })(実引数);

#JavaScript#即時関数

なんでもノート•3年前

即時関数を使ってletをconstに置き換える

※ 置き換えられないケースもあるかと思いますので、ご承知おきください。 JavaScriptの即時関数を使って、letを使いそうになるところをconstで定義できるようになることがある。具体的には条件分岐で活躍する。複雑なif文やswitch文で変数の値が変わるときに使える。サンプルコードを書いていく。 let str: string = ""; if (cond1) { str = "hoge"; } else if (cond2) { str = "fuga"; } else if (cond3) { str = "piyo"; } else { str = "hogehoge"; …

#JavaScript#即時関数#let#const

Industry One Tech Blog•23日前

ReactコンポーネントをBubbleで利用する（HTMLエレメント編）

はじめに BubbleとはなぜBubbleでReact? 今回利用する技術スタック (※執筆時点のバージョン) プロジェクト作成 Viteでプロジェクトを作成 Tailwindの追加 tsconfig.jsonにbaseUrlとpathsを追加してTypeScriptがpathを認識できるようにする vite.config.tsを編集してViteがpathを認識できるようにする shadcn/uiの設定を追加 Bubble(VanillaJS)用にビルド shadcn/uiからButtonを追加ビルドのエントリーファイル作成 vite.config.tsにビルドの設定を追加ビルド Bub…

フロントエンドエンジニアのスターティングノート•1ヶ月前

useEffectでasyncを使うと「destroy is not a function」エラーが発生する場合の対処方法

はじめに ReactでuseEffectを使用する場合によくやってしまう問題について紹介します。それは、useEffectで非同期関数を使用したい場合にasyncの設定方法を間違えてしまいます。一見、問題なさそうな下記のコード・・・ useEffect(async () => { // 処理 }, []); 実行すると下記のエラーが発生してWebページが表示されません。なぜ・・・。どうやらこの書き方ではうまくいかないようです。 Uncaught TypeError: destroy is not a function at safelyCallDestroy (react-dom.dev…

三日坊主がサイトを作るまで•1ヶ月前

【JavaScript】関数式、無名関数、即時関数について

クロージャーについても理解が深まったので、即時関数についてもさくっと分かるかなと思いましたが、どうしても引っかかる...いや念のためまとめました。 function で始まる文は、関数名がないと文法エラーになる無名関数をそのまま書くとエラーになるということです。 function() { // 何らかの処理 } これだとエラーになります。 function で始まると関数宣言になるので、関数に名前を付けなければならないそうです。たしかに名前がついていないと呼び出せませんね。関数式の場合は変数宣言から始まり、変数に関数を代入しているので問題ありません。なので無名関数の使い方は変数に代入す…

ソニックの部屋•1ヶ月前

JavaScriptまとめ

環境構築 warp（ターミナル）のインストール所定のフォルダで「code .」でvscode起動 vscode上でhtmlを作成し「!エンター」で様式入力 vscode上で拡張機能のlive serverをインストール vscode上でhtml上で右クリックlive serverで起動 scriptタグに記述する <script src="index.js"></script> scriptタグはbodyの一番下に書く実務では別jsファイルに分ける実行結果はブラウザから確認する実行結果はターミナルから確認する node index.js 文法基礎以下（暗黙的な型変換により）fals…

19日に更新してた•2ヶ月前

今月のチラ裏

ELSA speak 起動画面が格好良くてアガる。 IT パスポートの合格証が送られてきた。合格証の日付が受験から約一ヶ月。経産大臣はどちらの署名だろうかと思っていたが、ギリギリ滑り込みみたいな西村大臣だった。うま味調味料の使用の可否について度々燃えているの見て思うけれど、うま味調味料って単体だと使うの難しい。麺つゆとか、だし入りみそとか、味塩コショウとか、粉末だしだと楽に使えるので、うちではどうしてもそちらにしてしまう。単体で追加してうまく自然に使うにはなかなか量の加減がいるような気がするから、料理研究家が研究した内容を教えていただけるのはとてもありがたい。 utf-8 時代に外字はどうな…

KAYAC engineers' blog•4ヶ月前

「JS体操」のすゝめ〜その①〜

このエントリは【カヤック】面白法人グループ Advent Calendar 2023 の24日目の記事です。こんにちは！意匠部のおばらです。面白法人カヤックでは日々、様々な社内勉強会が開催されています。本記事では JS 好きな社内のエンジニア向けに私が企画＆主催している「JS体操」についてご紹介します。記事の最後にはみなさんも挑戦できるように最新の「JS体操」を紹介しています。ぜひ挑戦してみてください。 1.「JS体操」とは？ 2.「JS体操」の掟 3.「JS体操」のメニュー 3.1. 何らかのロジックを解く 3.2. コードゴルフで文字数を競う 4.「JS体操」の流れ 4.1. 出題方…

過程が大事•6ヶ月前

picoCTF Writeup (Web問)その５

Some Assembly Required 3(160pts) picobrowser (200pts) Client-side-again(200pts) Forbidden Paths(200pts) Power Cookie(200pts) Roboto Sans(200pts) Secrets(200pts) Some Assembly Required 3(160pts) フォームが一つある wasmをみると、strcmp と check_flag 関数がflagをチェックしてるみたい devtoolsのネットワークタブからバイナリファイルであるqCCYI0ajpDをダウンロード …

KEITA LOG•7ヶ月前

JavaScriptの関数まとめ

JavaScriptの関数についてまとめました。関数の種類関数宣言関数宣言はfunctionキーワードを使った、最もオーソドックスな関数。 // 関数の定義 function fn() { console.log('fn') } // 関数の実行 fn() 関数内でreturnを実行するとそれ以降の処理が行われない。returnを記述しない場合はその関数はundefinedを返す。関数宣言は同じ関数を定義するとエラーではなく上書きされる。 function fn() { console.log('fn') } function fn() { console.log('上書き') } f…

音楽と言葉•8ヶ月前

diary2023-08

diary 2023-8-31 (木) 月齢14.7 晴れモーツァルトの序曲集をアップした。楽しくて体が動いてしまうし笑いが込み上げる。だからモーツァルトはBGMには適さない。クリップスやスウィトナー、デイヴィス、ワルター、クレンペラーらは欠かせない。バロックオーケストラも景気良くていい。→ モーツァルト序曲集 Overtures / Mozart diary 2023-8-30 (水) 月齢13.7 晴れjavascript漬けが続く。ドン・ジョヴァンニをデータ３のバロックオーケストラで聴いた。歌手はあまり魅力的ではなかったがオーケストラの特にティンパニとラッパの音がいい。ハイドンの弦楽四…

天の月•9ヶ月前

並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しように参加してきた

jtx.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。会の概要会の様子技術書典への取り組みの紹介並列処理の基本 Go ルーチンで並列処理を実装しよう Goルーチンの基本知識 Goルーチンのデータ渡しちょっとしたデータ分析の並列化・ Python Pythonで並列処理を実装する際のアプローチ具体的な実装と注意点 Pythonで並列処理を書く際のTips Pythonで並列化する際の設計方針 Rustにおける並列処理スレッド間でデータ共有がない場合スレッド間でデータ共有がある場合 Rustで並行処理を扱うメリット/デメリット…

じぶん対策•10ヶ月前

ReactのuseEffectをきちんと理解する

はじめに最近ReactやNext.jsを触る機会が多いのですが、スマレジでの業務で使用しているわけではないため、キャッチアップがおろそかになっているなあと感じています。今回は、Reactに触れる上で必須かつVueとの違いにおいて重要な仕組みであるuseEffectについて公式サイトを確認してみます。 useEffectとは何か公式サイトにあるuseEffectの呼び出し方は以下のようになっています。 useEffect(setup, dependencies?) ReactのuseEffectは、コンポーネントのライフサイクルを扱うための重要なフックです。副作用とは、データの取得、購読の…

約束の地•1年前

Google 検索にてそのページのキャッシュの検索結果を表示する Bookmarklet

結論 javascript:location.href='https://webcache.googleusercontent.com/search?q=cache:%27+escape(document.location.href) 詳細内部的には以下のように即時関数を実行しているようなことになっています。前述のブックマークレットではシングルクォートが %27 にエスケープされています。これはブックマークに登録すると自動で変換してくれた結果です。Bookmarklet の登録時には %27 は ' で記述されていても問題ありません。 ( function() { document.loc…

使用例

一般的な使用例

その他使用例

PHP

関連ブログ

即時関数と老害

ネットで話題

関連ブログ

【JavaScript】即時関数

即時関数を使ってletをconstに置き換える

ReactコンポーネントをBubbleで利用する（HTMLエレメント編）

useEffectでasyncを使うと「destroy is not a function」エラーが発生する場合の対処方法

【JavaScript】関数式、無名関数、即時関数について

JavaScriptまとめ

今月のチラ裏

「JS体操」のすゝめ 〜その①〜

picoCTF Writeup (Web問)その５

JavaScriptの関数まとめ

diary2023-08

並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しように参加してきた

ReactのuseEffectをきちんと理解する

Google 検索 にてそのページのキャッシュの検索結果を表示する Bookmarklet

「JS体操」のすゝめ〜その①〜

Google 検索にてそのページのキャッシュの検索結果を表示する Bookmarklet