Help us understand the problem. What is going on with this article?

JavaScriptでクロージャ入門。関数はすべてクロージャ?

More than 3 years have passed since last update.

JavaScriptでは関数はすべてクロージャです。
ではそもそもクロージャってなんなんでしょうか。

クロージャ??

クロージャの簡単な定義として
「自分を囲むスコープにある変数を参照できる関数」
が挙げられます。

言葉ではパッとしないかもしれませんが、コードを一つづつ追っていくと、
入門としてのクロージャは簡単に理解できます。

スコープ

まずJavaScriptは関数ごとにスコープが作られます。
スコープとは変数を参照できる範囲のことです。
その範囲外では変数は参照できません。

function func() {
  var value = 1;
  console.log(value);
}
func(); // 1
console.log(value); // undefined

クロージャの例

ここでクロージャの例を見てみましょう

function func() {
  var value = 1;

  function innerFunc() {
    console.log(value);
  }
  innerFunc();
}
func(); // 1

先ほどの定義を思い出してみましょう。
「自分を囲むスコープにある変数を参照できる関数」

内側の関数が外側の関数の変数を参照できています。
ここで重要なのは、値のコピーではなく、参照ができていることです。

ですから、ここでは下記のようにvalueの変更が可能です。

function func() {
  var value = 1;

  function innerFunc() {
    value++;
  }
  innerFunc();
  console.log(value); // 2
}
func();

クロージャの実践例

ここで基本的なクロージャの実践例として一つ、
「モジュールパターン」を紹介します。

クロージャの一つの利点として、
変数をプライベートな変数として扱う事ができるようになります。

var module = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };

})();

module.show(); // 0

module.increment();
module.show(); // 1

console.log(count); // undefined

即時関数を用いてオブジェクトを生成しています。
moduleにはreturnされているオブジェクトが代入されます。

ここで重要な事として、
即時関数内のcountに関しては内側からしか参照できないという事です。
外側からアクセスしようとした場合にはもちろん「undefined」となります。

これによりプライペードな変数として扱う事が可能になります。

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
Twitterはこちら
Feedlyのフォローはこちら

おすすめの記事

JavaScriptはオブジェクト指向?プロトタイプベースのオブジェクト指向を学ぶなら。
JavaScriptのプロトタイプからオブジェクト指向を学ぶ

JavaScriptでは関数型言語の一部の機能?実践的なJavaScriptの関数型とは。
JavaScriptで関数型プログラミングの入門

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)

takeharu
【名前】三上丈晴 【経歴】北海道大学理学院数学専攻を経て、2012年新卒入社。現在ピグパーティ プロダクトマネージャ 【著書】Git逆引き入門
https://twitter.com/takeharumikami
cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away