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
}