ECMAScript 之 Const

使用 const 讓變數不會被 reassign

const 也是 ECMAScript 2015+ 的代表 keyword，應盡量使用 const 避免 Side Effect，除非真的要修改變數。

Version

ECMAScript 2015

Definition

宣告常數於 block {} 內。

與 let 差異只有 let 是 變數，而 const 是 常數，且都是 block level

Scope

scope01.js

1
2
3
4
5
6
7
8
9
10
11
12
13
function constTest() {
  const x = 1;

  if (true) {
    x = 2;
    console.log(x);
  }

  console.log(x);
}

constTest();
// SyntaxError

與 let 一樣都是 block level，由於 x = 2 修改 x ，因此 SyntaxError。

scope02.js

1
2
3
4
const x = 'global';

console.log(window.x);
// undefined

在 global level 使用 const，也不會污染 DOM 的 window object。

Initialization

initialization01.js

1
2
3
4
5
const x;
x = 1;

console.log(x);
// SyntaxError

let 可先宣告，然後再給值，但 const 一定要 宣告同時給值。

只能寫成

1
2
3
4
const x = 1;

console.log(x);
// 1

因為 const 強調不能被 reassign，因此 宣告同時給值 合理

Not Immutable

not-immutable.js

1
2
3
4
5
6
7
const data = {
  name: 'Sam'
};

data.name = 'Kevin';
console.log(data.name);
// Kevin

const 並不代表 data 是 Immutable，只代表變數不能被 reassign。

Define Function

define-function.js

1
2
3
const f = (x, y) => x + y;

console.log(f(1, 1));

理論上也可以使用 let 定義 function，但因為 function 經過定義後就不會被 reassign，所以實務上都是使用 const。

Conclusion

  • 應優先使用 const 避免 Side Effect，也同時養成 Declarative Programming 習慣，盡量避免 Imperative 方式一直修改變數
  • const 並不是 Immutable，僅是變數不能被 reassign
  • 實務上建議使用 const 定義 function

Sample Code

完整的範例可以在我的 GitHub 上找到

Reference

MDN JavaScript, const

2018-09-30
▲