即時関数の罠 -ご利用は計画的に

2021-01-24

概要

さっそくですが、即時関数はご存知だと思います。
グローバル汚染を防ぐために無名関数でくくり、関数スコープで完結させるテクニックです。

ある時、即時関数を使用しているとエラーがでました。以下のコードです。

const callName = function(name: string) {
  console.log(`hey ${name}`);
}

(function() {
   console.log("call immediate function");
})();

いったいどうしたのでしょう。構文は間違っていないはずです。

原因

セミコロンがないがために文が継続していると解釈されるためでした。
つまり以下のコードになっていたわけです。

const callName = function(name: string) {
  console.log(`hey ${name}`);
}(function() {
   console.log("call immediate function");
})();

解決策

セミコロンをつけましょう。

const callName = function(name: string) {
  console.log(`hey ${name}`);
}; // ここ

(function() {
   console.log("call immediate function");
})();

僕はセミコロンを書かないスタイルなので、もし即時関数を使用するならば以下のように使用します。

const callName = function(name: string) {
  console.log(`hey ${name}`);
}

// 以下のように即時関数前にセミコロンを
;(function() {
   console.log("call immediate function");
})()

結論

はっきり気持ち悪いですけど、そうそう即時関数を使用しないものなので…

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店