Day05-Variables

前言

在我们之前的练习都只有使用var宣告变数,其实还有其它两个宣告方式可以使用。

接下来我们会学习使用let丶const更严谨的方式来撰写程序码！

• var
• let
• const

首先我们想当然尔,在程序中由上而下,以下我们会先示范正常的情形,与容易造成错误的情形。

块级作用域会解释在最下面,若有变数概念的可以直接滑至最下方阅读"block scope"

var

• 可以未定义使用
• 内层会污染全域变数
• 可以被重复定义

var name = 'Jessica'
console.log(name) //Jessica

以上当然会正常显示Jessica

但我们先把输出变数移到定义变数之前

console.log(name)
var name = 'Jessica' //undefined

可能跟你所想的不太一样,var并不会让程序停住,而是会变成undefined也就是尚未定义的意思

跟以下情况一样

var name;
console.log(name); //undefined

重新宣告变数呢?

var name = 'Ian'
var name = 'Jessica'
console.log(name); //Jessica

是可以执行的

总结var宣告变数,使用非常宽松的规定,并且会造成难以预知的错误

这也是在ES6之後新增了let、const 可以让JavaScript避免太多这种问题

let

• 块级作用域
• 不能重复宣告
• 尚未定义无法使用

正常情况下

let name = 'Jessica'
console.log(name) //Jessica

参考错误

console.log(name) 
let name = 'Jessica' //ReferenceError: Cannot access 'name' before initialization

修改变数的值呢?

let name = 'Ian'
name = 'Jessica'
console.log(name); //Jessica

再次定义呢?

let name = 'Ian'
let name = 'Jessica'
console.log(name); //SyntaxError: Identifier 'name' has already been declared

再次宣告则不行

总结let的特性:

1. 严谨的变数宣告,
2. 避免同名变数後者覆盖前者

const

• 无法重复定义
• 未宣告无法使用

const name = 'Jessica'
name = 'Ian'
console.log(name); //TypeError: Assignment to constant variable.

再次定义覆盖呢?

const name = 'Jessica'
const name = 'Ian'
console.log(name); //TSyntaxError: Identifier 'name' has already been declared

也不行

前面先输出变数後定义也不行!!!

console.log(name) 
const name = 'Jessica' //ReferenceError: Cannot access 'name' before initialization

但...若是物件或是阵列,可以透过修改property达到修改的效果

物件

const user = {
  name: 'Ian'
}
user.name = 'Jessica'
console.log(user.name); //Jessica

阵列

const arrayTemp = [1,2,3]
arrayTemp[0] = 4
console.log(arrayTemp); //[ 4, 2, 3 ]

最後对於const的总结
若是修改值或是属性是可以的,但重新定义、或宣告都是无效。

更简单好记的方式

想像当我们用const定义好变数,相当於把变数想成101,101的地址已经申请并审核过了,而我们可以修改101里面商品的柜位、价格,但不能把它重新定义也就是移到新光三越等地方,这样是不是更容易记呢!!!

reference也就是去抓取变数的地址(也就是记忆体位置)而已

const arrayTemp = [1,2,3]
arrayTemp = [4,2,3] //TypeError: Assignment to constant variable.
console.log(arrayTemp); 

block scope

块级作用域{ }为一个区块,外层无法存取内层之变数
不同於let、const

以下程序码虽然我们是在for回圈内定义var i = 0,但当for loop结束,在外层一样可以存取到i的值为5,称之为全域污染

for(var i = 0; i < 5; i++){
  console.log(i);
}
console.log(`out of the block variable:${i}`)
/*
0
1
2
3
4
out of the block variable:5
*/

而let 与const则不同,会出现not defined

for(let i = 0; i < 5; i++){
  console.log(i);
}
console.log(`out of the block variable:${i}`)
/*
0
1
2
3
4
ReferenceError: i is not defined
*/