- var,let,constの違いは
ブロックスコープ : let, const
関数スコープ : var
※ブロックは{}
例：
<body>
<button onclick="testVar()">click me</button>
<p id="test1"></p>
<p id="test2"></p>
<script>
function testVar(){
if(true){
var varTest = "you are the best";
let letTest = "have a good night";
}
// you are the best出力
document.getElementById("test1").innerHTML = varTest;
// エラー：Uncaught ReferenceError: letTest is not defined
document.getElementById("test2").innerHTML = letTest;
}
</script>
</body>
- let,constの違い
定数宣言：const
非定数宣言：let
※varも非定数宣言可能だが、より狭いスコープでは可読性高いし、バグが少ない
例
<body>
<button onclick="testLet()">click me</button>
<p id="test1"></p>
<p id="test2"></p>
<script>
function testLet(){
const constTest = "you are the best";
let letTest = "have a good night";
// have a good night出力
document.getElementById("test1").innerHTML = letTest;
// エラー：Uncaught TypeError: Assignment to constant variable.
constTest = "have a fun day";
document.getElementById("test2").innerHTML = constTest;
}
</script>
</body>
- 注意：
例：
<body>
<button onclick="testConst()">click me</button>
<p id="test1"></p>
<p id="test2"></p>
<script>
function testConst(){
const constTest = {
a : "hava a fun day",
b : 2
}
// hava a fun day出力
document.getElementById("test1").innerHTML = constTest.a;
constTest.a = "kitty is lovely";
// kitty is lovely出力
document.getElementById("test2").innerHTML = constTest.a;
}
</script>
</body>