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 1 year has passed since last update.

Javascript のクロージャについて

Last updated at Posted at 2022-04-19

Javascript のクロージャについて

スコープの種類と概要

Javascript におけるスコープとは、どの変数にアクセスできるかを考える時に必要になってくる。
スコープには、グローバルスコープローカルスコープ関数スコープブロックスコープが存在する。

グローバルスコープは、同一ファイル内であれば、どこでも参照できる。

//var で宣言することでグローバル変数となる
var hensu = 100;

ローカルスコープは、グローバルスコープ以外の全てのスコープで、関数スコープとブロックスコープに分かれる。
関数スコープは、関数の中で定義される変数のスコープで、その関数内部でしかアクセスできない。

//関数の引数は関数スコープとなる
function test(hensu) {
  console.log(hensu);
}

ブロックスコープは、{}で閉じられたブロックによって定義されてその中で宣言された変数のスコープであり、その中でしかアクセスできない。

function test() {
  //{}の中にあるので、ブロックスコープとなる
  let hensu;
  console.log(hensu);
}

クロージャの利点

クロージャとは、ローカルスコープの変数を保持する他の関数が内部に存在している関数を指します。
以下が例になります。xというローカル変数は、外部から直接操作することはできず、直接取得することもできない。これを、javaなどのオブジェクト指向言語で言うと「カプセル化」と呼ぶ。

function test() {
 //カプセル化されている
 let x = 0;
 return {
  get: () => { 
   return x;
  },

  set: (newX) => {
   x = newX;
  },
  //カプセル化されていない
  y: 2
 }
} 

カプセル化を行うことによって、誤って値を上書きすることを防ぐことができる。

let func = test();

//カプセル化できている
console.log(func.x); //undefined
console.log(func.get()); //0
func.set(10); 
console.log(func.get()); //10

console.log(func.y); //2
//カプセル化できていない
func.y = 12
console.log(func.y); //12

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