JavaScript/TypeScript项目中var, let和const的区别

最近在整理codecheck代码检查一个JS/TS项目的时候，其中有一条规则是“规则3.1 声明变量时要防止暴露到全局作用域”。
规则描述如下：

一言以蔽之，就是如果有一个变量，那么就需要给它声明类型，否则变量就会暴露在全局作用域（window）中。多嘴一句，这里也可能会有误报，就是类名/接口名也可能被扫描成变量名，这时候就需要人工去申请屏蔽了。

而JS/TS随着ES2015（ES6）在2015年的推出和标准化，变量的类型可以是var/let/const，那么这三者都有什么区别吗？首先在ES6之前，变量类型只有一个var；ES6附带了let和const，为什么要多加两个类型呢？

注：感兴趣我们代码插件的小伙伴们，可以试试使用我们的CodeCheck代码检查插件：>>>CodeCheck代码检查插件；当前支持本地VSCode和华为线上CloudIDE上运行，并支持C/C++/JAVA三种语言（更多语言的支持功能正在开发中…）。
华为云CodeCheck代码检查插件使用指南：>>>链接点这里

var

var可以在全局范围声明或函数/局部范围内声明，即其声明的变量的作用范围取决于是在哪声明的。

• 当在最外层函数的外部声明var变量时，作用域是全局的；这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。
• 当在函数中声明var时，作用域是局部的；这意味着它只能在函数内访问。

比如下面这段代码，变量hi作用在全局，变量hello就只作用在函数内：

var hi = 'hey hi';

function newFunction() {
    var hello = 'say hello';
}

console.log(hi);
console.log(hello);

上面的console.log(hi);会打印出"hey hi"；而console.log(hello);只会显示Error: hello is not defined。

因此这样就容易让用户在没注意的情况下，对同一个变量进行重新声明，比如下面这段代码：

var hi = "hey hi";
var changeVal = 4;

if (changeVal != 3) {
    var hi = "say Hello instead";
}

console.log(hi); 

因为变量changeVal数值不是3，因此会对hi变量进行重新声明，作用域更新为局部只能在函数内部被访问。那么上述代码片段输出的结果就会变为"say Hello instead"。
如果用户是在一个大项目里，忘记先前定义了hi这个变量过，那么就会导致代码中出现错误。

let

而let变量作为var的改进，基本已经取代了var。let明确是块级作用域的，即只在{}块界定的范围内有效。
还是以下面的代码为例：

let hi = "hey hi";
let changeVal = 4;

if (changeVal != 3) {
    let hello = "say Hello";
}

console.log(hello); 

这时候只会返回“hello is not defined”，因为在代码块{}之外，hello是没被定义的。

let还有一个特点就是在作用范围内，可以被修改但是不能被重新声明。
可以被修改的代码例子：

if (changeVal != 3) {
   let hello = "say Hello";
   hello = "say hi instead";
}

不可以被重新声明的代码例子：

if (changeVal != 3) {
   let hello = "say Hello";
   let hello = "say hi instead";
}

但如果是在不同的作用域中，定义了相同的变量，则不会有错误；因为粮食实例的作用域不同，两者会被视为不同的变量：

let hi = "hey hi";
let changeVal = 4;

if (changeVal != 3) {
    let hi = "say Hello";
    console.log(hi); 
}

console.log(hi); 

{}之内的hi会输出"say Hello"，而{}之外的hi变量会输出"hey hi"。

const

const声明必须给常量，且常量必须一开始就做了初始化。
const声明的常量只能在声明它们的块级作用域中访问；且其声明的常量不能被修改并且不能被重新声明。

不能被修改的代码例子，运行得到的错误是“Error: Assignment to constant variable.”：

const hi = 'say Hi';
hi = 'say Hello instead'; 

不能被重新声明的代码例子，运行得到的错误是“Error: Identifier ‘hi’ has already been declared”：

const hi = 'say Hi';
const hi = 'say Hello instead'; 

虽然我们不能改变const常量，但是对于其属性却可以改变。比如我们先声明一个const对象：

const hi = {
    message: 'say Hi',
    value: 1,
};

我们可以修改其中的message信息：
greeting.message = 'say Hello instead';

这样会更新greeting.message的值，而不会返回错误。