0
0

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-10-06

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

  • スコープについての理解を深める

#本題
###1.即時関数(IIFE)

即時関数とは関数定義と同時に一度だけ実行される関数のこと。

→実行結果が呼び出し元に返される。

基本構文

let result = (function (仮引数){
  return 戻り値;
})(実引数);

戻り値はresultに返ります。


function a() {
  console.log("called");
}
a();

// 上記と下記は同じ結果が出力される
(function(){
  console.log("called");
  return 
})();

// 最後に実行する()がないとSyntaxエラーが発生する
// 関数式の場合は()がいらない(エラーにならない)

即時関数で表すと下記のとおりになります。

// 即時関数
let c = (function(d){
  console.log("called" + d);
  // 呼び出し元変数cに0が返される
  return 0;
  // 仮にここに引数10を渡すと上記dに返される
})(10);

この即時関数はどのようなタイミングで使用するのか。
それは、関数スコープを利用して関数の中でしか使えない変数や関数と関数の外で使う変数や関数を明確に区別したいときに使用します。

let c = (function(){
  console.log("called");
  // 変数privateValを定義 関数内でしか使えない
  let privateVal  = 0;
  // 変数publicValを定義 これは関数の外で使えるようにしたい
  let publicVal = 10;

  // 関数も上記の様に生成
  function privateFn(){
    console.log("privateFn is called");
  }
  function publicFn(){
    console.log("publicFn is called");
  }

  // 戻り値を設定してこの結果が変数cに格納される
  return {
    privateVal,
    publicFn
  };
})()

// 関数の外から下記のように呼び出すとコンソールに出力される
c.publicFn();
console.log(c.publicVal);

// c.privateValと書くことはできない

今日はここまで!

#参考にさせて頂いた記事

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?