# [Block scoping](https://babeljs.cn/docs/plugins/transform-es2015-block-scoping)
就是塊級作用域，在 ES6 中可以使用 let 創建塊級作用域，可以使用 `babel-plugin-transform-es2015-block-scoping` 進行語法轉換。
```
npm install --save-dev babel-plugin-transform-es2015-block-scoping
```
## .babelrc 配置
```json
{
"plugins": ["transform-es2015-block-scoping"]
}
```
## 使用
### 循環輸出
我們最熟悉的 var 并不存在塊級作用域，比如:
```js
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000);
}
```
現象是間隔一秒后，連續輸出5次5
而 let 的出現正好解決了這一問題:
in
```js
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000);
}
```
out
```js
"use strict";
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
_loop(i);
}
```
實際上，編譯出來的代碼實際上是一個立即執行函數，可以簡寫為:
```js
"use strict";
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 1000);
})(i)
}
```
現象是間隔一秒后，連續輸出 0, 1, 2, 3, 4
### 控制流程
var 并不存在塊級作用域:
```js
if (true) {
var a = 0
}
console.log(a) // 0
```
let 卻存在塊級作用域:
in
```js
if (true) {
let b = 1
}
console.log(b) // ERROR: b is not defined
```
out
```js
"use strict";
if (true) {
var _b = 1;
}
console.log(b); // b is not defined
```
可以看到，編譯出的代碼實際上是使用 `_` 替換了原變量，因此在外部訪問不到對應變量，以達到塊級作用域的效果。
