一白山中

自分を磨き、自分なりの幸せを追求しよう

JavaScriptネームスコープ

ネームスコープとは、アクセスできる変数の集合である

JavaScriptにて、オブジェクト及び関数も変数であるので、ネームスコープは、アクセスできるオブジェクト、関数、変数の集合である

 

関数内部で生成した変数のネームスコープはその関数内部だけになる

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title> 
</head>
<body>

<p>関数内部変数だから、関数の外では利用できない</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName のデータ型は" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

</body>
</html>

 

一方、関数外の変数ですと、サイトのすべてscript及び関数で利用できる

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title> 
</head>
<body>

<p>関数外の変数は、すべてのscript及び関数内部でも利用できる</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
        "出力 " + carName;
}
</script>

</body>
</html>

 

そして、関数内部でも、全体的に利用できる変数を生成することは可能である

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title> 
</head>
<body>

<p>
最初から変数宣言しなかったら、すべてのところで利用できる変数になる:
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
    "出力 " + carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>

 

関数内部生成した変数は、関数実行される際に生成され、関数処理後に処分される。関数外部の変数は、サイト閉じられたときに処分される。

 

関数の引数は、関数内部だけ利用できる。

 

関数外部変数は、全部windowオブジェクトの属性になる

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title> 
</head>
<body>

<p>
HTMLにて、すべての関数外部変数は、window の変数になる
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
    "出力 " + window.carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>

 

まとめ、

ローカル変数:関数内部で、var経由で生成した変数

グローバル変数:関数外部で、var経由で、生成した変数

宣言してなかった変数は、グローバル変数になる

 

letとvarの区別

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同じ変数
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 違う変数
    console.log(x);  // 2
  }
  console.log(x);  // 1
}