ES6 - 變數

根據定義，變數是“記憶體中命名的空間”，用於儲存值。換句話說，它充當程式中值的容器。變數名稱稱為識別符號。以下是識別符號的命名規則：

識別符號不能是關鍵字。
識別符號可以包含字母和數字。
識別符號不能包含空格和特殊字元，除了下劃線 (_) 和美元符號 ($) 之外。
變數名不能以數字開頭。

型別語法

必須在使用變數之前宣告它。ES5 語法使用var關鍵字來實現相同的功能。宣告變數的 ES5 語法如下所示。

//Declaration using var keyword 
var  variable_name

ES6 引入了以下變數宣告語法：

使用 let。
使用 const。

變數初始化是指將值儲存到變數中的過程。變數可以在宣告時初始化，也可以在以後的某個時間點初始化。

宣告和初始化變數的傳統 ES5 型別語法如下：

//Declaration using var keyword 
var variable_name = value

示例：使用變數

var name = "Tom" 
console.log("The value in the variable is: "+name)

以上示例聲明瞭一個變數並列印其值。

成功執行後將顯示以下輸出。

The value in the variable is Tom

JavaScript 和動態型別

JavaScript 是一種無型別語言。這意味著 JavaScript 變數可以儲存任何資料型別的值。與許多其他語言不同，您不必在宣告變數時告訴 JavaScript 該變數將儲存哪種型別的值。變數的值型別可以在程式執行期間更改，JavaScript 會自動處理它。此功能稱為動態型別。

JavaScript 變數作用域

變數的作用域是指定義它的程式區域。傳統上，JavaScript 僅定義了兩個作用域：全域性作用域和區域性作用域。

全域性作用域 - 可以在 JavaScript 程式碼的任何部分訪問具有全域性作用域的變數。
區域性作用域 - 可以在宣告它的函式內部訪問具有區域性作用域的變數。

示例：全域性變數與區域性變數

以下示例聲明瞭兩個名為num的變數 - 一個在函式外部（全域性作用域），另一個在函式內部（區域性作用域）。

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

在函式內部引用變數時，它將顯示區域性作用域變數的值。但是，在函式外部訪問變數num時，將返回全域性作用域例項。

成功執行後將顯示以下輸出。

value of num outside test() 10
value of num in test() 100

ES6 定義了一個新的變數作用域 - 塊作用域。

Let 和塊作用域

塊作用域將變數的訪問限制在宣告它的塊中。var關鍵字為變數分配函式作用域。與var關鍵字不同，let關鍵字允許指令碼將變數的訪問限制到最近的封閉塊。

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

指令碼在函式的區域性作用域內聲明瞭一個變數num，並在使用let關鍵字的塊內重新宣告它。當在內部塊外部訪問變數時，將列印區域性作用域變數的值，而當在內部塊內引用塊作用域變數時。

注意 - 嚴格模式是選擇使用 JavaScript 受限變體的一種方式。

成功執行後將顯示以下輸出。

value of num in test() 100 
Inner Block begins 
value of num : 200

示例：let 與 var

var no = 10; 
var no = 20; 
console.log(no);

成功執行上述程式碼後將顯示以下輸出。

讓我們使用let關鍵字重寫相同的程式碼。

let no = 10; 
let no = 20; 
console.log(no);

以上程式碼將丟擲錯誤：識別符號“no”已宣告。使用let關鍵字宣告的任何變數都分配了塊作用域。

let 和塊級安全性

如果我們嘗試在同一個塊中兩次宣告一個let變數，它將丟擲一個錯誤。請考慮以下示例：

<script>
   let balance = 5000 // number type
   console.log(typeof balance)
   let balance = {message:"hello"} // changing number to object type
   console.log(typeof balance)
</script>

以上程式碼將導致以下錯誤：

Uncaught SyntaxError: Identifier 'balance' has already been declared

let 和多個塊

但是，相同的let變數可以在不同的塊級作用域中使用，而不會出現任何語法錯誤。

示例

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
      //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
   //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
      //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

以上程式碼的輸出如下：

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

Const

const宣告建立對值的只讀引用。這並不意味著它儲存的值是不可變的，只是變數識別符號不能重新賦值。常量具有塊作用域，就像使用let語句定義的變數一樣。常量的值不能透過重新賦值更改，也不能重新宣告。

使用const關鍵字宣告的變數適用以下規則：

常量不能重新賦值。
常量不能重新宣告。
常量需要初始化程式。這意味著必須在宣告期間初始化常量。
分配給const變數的值是可變的。

示例

const x = 10
x = 12 // will result in an error!!

以上程式碼將返回錯誤，因為常量不能重新賦值。常量變數是不可變的。

常量是不可變的

與使用let關鍵字宣告的變數不同，常量是不可變的。這意味著它的值不能更改。例如，如果我們嘗試更改常量變數的值，則會顯示錯誤。

<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000 // mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

以上程式碼的輸出如下：

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

Const 和陣列

以下示例顯示瞭如何建立不可變陣列。可以向陣列新增新元素。但是，重新初始化陣列將導致錯誤，如下所示：

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
   //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

以上程式碼的輸出如下所示：

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

Var 關鍵字

在 ES6 之前，var關鍵字用於在 JavaScript 中宣告變數。使用var宣告的變數不支援塊級作用域。這意味著如果在迴圈或if 塊中聲明瞭一個變數，則可以在迴圈或if 塊外部訪問它。這是因為使用var關鍵字宣告的變數支援提升。

Var 和提升

變數提升允許在 JavaScript 程式中使用變數，即使在宣告它之前也是如此。此類變數預設初始化為undefined。JavaScript 執行時將掃描變數宣告並將它們放在函式或指令碼的頂部。使用var關鍵字宣告的變數將提升到頂部。請考慮以下示例：

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company); // using variable before declaring
   var company = "TutorialsPoint"; // declare and initialized here
   console.log(company);
</script>

以上程式碼的輸出如下所示：

undefined
TutorialsPoint

Var 和塊作用域

塊作用域將變數的訪問限制在宣告它的塊中。var關鍵字為變數分配函式作用域。使用var關鍵字宣告的變數沒有塊作用域。請考慮以下示例：

<script>
   //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

以上程式碼的輸出如下：

1
2
3
4
5
after the loop i value is 6

變數i在 for 迴圈內使用var關鍵字宣告。可以在迴圈外部訪問變數 i。但是，有時可能需要限制變數在塊內的訪問。在這種情況下，我們不能使用var關鍵字。ES6 引入了let關鍵字來克服此限制。

Var 和塊級安全性

如果我們使用var 關鍵字在塊內兩次宣告相同的變數，編譯器將不會丟擲錯誤。但是，這可能會導致執行時出現意外的邏輯錯誤。

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

以上程式碼的輸出如下所示：

number
object

列印頁面