先來看看MDN對兩者的定義
var
Declares a variable, optionally initializing it to a value.
let
Declares a block scope local variable, optionally initializing it to a value.差別在於 let 特別用在block scope
以下範例 清楚解釋 block scope 概念 : var可以作用在該scope以內的所有scope ，但是let 只作用在該block scope
var a = 1;
var b = 2;
if (a === 1) {
var a = 11;
let b = 22;
console.log(a);
console.log(b);
}
console.log(a);
console.log(b);
另一個範例，可以看出var作用域變數內都會是同一個，而 let 只作用該scope 所以裡面的不一樣
function varTest() {
var x = 1;
if (true) {
var x = 2;
console.log(x);
}
console.log(x);
}
function letTest() {
let x = 1;
if (true) {
let x = 2;
console.log(x);
}
console.log(x);
}
!!!有些 let 需要注意的事情
(1) 同一個Scope不能重複 let 宣告相同變數
if (x) {
let foo;
let foo;
}
下面也是相同狀況
switch (x) {
case 0:
let foo;
break;
case 1:
let foo;
break;
}
(2) 在最外層(Top level , Global) 不能用 let 宣告
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined
用let的好處
(1) 每一個 instance 是分開不一樣的 不像 var 只會呈現最後數值
var list = document.getElementById("list");
for (let i = 1; i <= 5; i++) {
let item = document.createElement("li");
item.appendChild(document.createTextNode("Item " + i));
item.onclick = function (ev) {
console.log("Item " + i + " is clicked.");
};
list.appendChild(item);
}
如果用var是不行的，結果會是 var 都是 6
參考:
MDN
另外補充
(1) Var 如果再最外層(Top level) 其實就是全域變數
(2) 如果沒有任何宣告就使用變數，他則會被當成全域變數 而且可以delete
x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;
delete x;
delete y;
delete Math.PI;
delete myobj.h;
delete myobj;
(3) hoisting: 在js 裡面 所有var宣告的都會被提升到最前面先宣告初始化
比如說，原本你這樣打
console.log(x === undefined);
var x = 3;
var myvar = "my value";
(function() {
console.log(myvar);
var myvar = "local value";
})();
則他在執行時會這樣做:
var x;
console.log(x === undefined);
x = 3;
var myvar = "my value";
(function() {
var myvar;
console.log(myvar);
myvar = "local value";
})();
而 let 則是沒有這個特性 所以他會直接是錯的
console.log(x);
let x = 3;
另外function 宣告也有這個特性 (function 附值則沒有)
foo();
function foo() {
console.log("bar");
}
baz();
var baz = function() {
console.log("bar2");
};
function 若是沒有return值 typeof 會是undefined 若有 typeof 則看return 是什麼型態。
