ES6 - Biến

A variable, theo định nghĩa, là "một không gian được đặt tên trong bộ nhớ" để lưu trữ các giá trị. Nói cách khác, nó hoạt động như một vùng chứa các giá trị trong một chương trình. Tên biến được gọi làidentifiers. Sau đây là các quy tắc đặt tên cho một số nhận dạng:

  • Số nhận dạng không được là từ khóa.

  • Số nhận dạng có thể chứa bảng chữ cái và số.

  • Số nhận dạng không được chứa khoảng trắng và ký tự đặc biệt, ngoại trừ dấu gạch dưới (_) và ký hiệu đô la ($).

  • Tên biến không được bắt đầu bằng số.

Nhập cú pháp

Một biến phải được khai báo trước khi nó được sử dụng. Cú pháp ES5 sử dụngvartừ khóa để đạt được như nhau. Cú pháp ES5 để khai báo một biến như sau.

//Declaration using var keyword 
var  variable_name

ES6 giới thiệu cú pháp khai báo biến sau:

  • Sử dụng cho phép.
  • Sử dụng hằng số.

Variable initializationđề cập đến quá trình lưu trữ một giá trị trong biến. Một biến có thể được khởi tạo tại thời điểm khai báo hoặc tại thời điểm sau đó.

Cú pháp kiểu ES5 truyền thống để khai báo và khởi tạo một biến như sau:

//Declaration using var keyword 
var variable_name = value

Ví dụ: Sử dụng các biến

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

Ví dụ trên khai báo một biến và in ra giá trị của nó.

Kết quả sau được hiển thị khi thực hiện thành công.

The value in the variable is Tom

JavaScript và Nhập động

JavaScript là một ngôn ngữ không được đánh máy. Điều này có nghĩa là một biến JavaScript có thể giữ một giá trị của bất kỳ kiểu dữ liệu nào. Không giống như nhiều ngôn ngữ khác, bạn không cần phải cho JavaScript biết trong khi khai báo biến loại giá trị nào mà biến đó sẽ giữ. Kiểu giá trị của một biến có thể thay đổi trong quá trình thực thi chương trình và JavaScript sẽ tự động xử lý nó. Tính năng này được gọi làdynamic typing.

JavaScriptVariable Phạm vi

Phạm vi của một biến là vùng chương trình của bạn mà nó được xác định. Theo truyền thống, JavaScript chỉ định nghĩa hai phạm vi-toàn cầu và cục bộ.

  • Global Scope - Một biến có phạm vi toàn cầu có thể được truy cập từ bất kỳ phần nào của mã JavaScript.

  • Local Scope - Một biến có phạm vi cục bộ có thể được truy cập từ bên trong một hàm mà nó được khai báo.

Ví dụ: Biến toàn cục so với Biến cục bộ

Ví dụ sau khai báo hai biến theo tên num - một bên ngoài chức năng (phạm vi toàn cục) và một bên trong chức năng (phạm vi cục bộ).

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()

Biến khi được tham chiếu trong hàm sẽ hiển thị giá trị của biến có phạm vi cục bộ. Tuy nhiên, biếnnum khi được truy cập bên ngoài hàm trả về cá thể có phạm vi toàn cục.

Kết quả sau được hiển thị khi thực hiện thành công.

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

ES6 định nghĩa một phạm vi biến mới - Phạm vi khối.

Phạm vi Let và Block

Phạm vi khối hạn chế quyền truy cập của một biến vào khối mà nó được khai báo. Cácvartừ khóa gán phạm vi chức năng cho biến. Không giống như từ khóa var,let từ khóa cho phép tập lệnh giới hạn quyền truy cập vào biến đối với khối bao quanh gần nhất.

"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()

Tập lệnh khai báo một biến numtrong phạm vi cục bộ của một hàm và khai báo lại nó trong một khối bằng cách sử dụng từ khóa let. Giá trị của biến phạm vi cục bộ được in khi biến được truy cập bên ngoài khối bên trong, trong khi biến phạm vi khối được tham chiếu trong khối bên trong.

Note - Chế độ nghiêm ngặt là một cách để chọn tham gia vào một biến thể JavaScript bị hạn chế.

Kết quả sau được hiển thị khi thực hiện thành công.

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

Ví dụ: let v / s var

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

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

20

Hãy để chúng tôi viết lại mã tương tự bằng cách sử dụng let từ khóa.

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

Đoạn mã trên sẽ xuất hiện một lỗi: Mã định danh 'không' đã được khai báo. Bất kỳ biến nào được khai báo bằng từ khóa let sẽ được gán phạm vi khối.

cho phép và chặn mức an toàn

Nếu chúng ta cố gắng khai báo một letbiến hai lần trong cùng một khối, nó sẽ báo lỗi. Hãy xem xét ví dụ sau:

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

Đoạn mã trên sẽ dẫn đến lỗi sau:

Uncaught SyntaxError: Identifier 'balance' has already been declared

cho và nhiều khối

Tuy nhiên, cùng let biến có thể được sử dụng trong các phạm vi cấp khối khác nhau mà không có bất kỳ lỗi cú pháp nào.

Thí dụ

<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>

Đầu ra của đoạn mã trên sẽ như sau:

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

Các constkhai báo tạo một tham chiếu chỉ đọc đến một giá trị. Điều đó không có nghĩa là giá trị mà nó giữ là không thay đổi, chỉ là không thể gán lại mã định danh biến. Hằng số là phạm vi khối, giống như các biến được định nghĩa bằng cách sử dụng câu lệnh let. Giá trị của một hằng số không thể thay đổi thông qua việc gán lại và nó không thể được khai báo lại.

Các quy tắc sau đây đúng với một biến được khai báo bằng cách sử dụng const từ khóa -

  • Các hằng số không thể được gán lại một giá trị.
  • Một hằng số không thể được khai báo lại.
  • Một hằng số yêu cầu một bộ khởi tạo. Điều này có nghĩa là các hằng số phải được khởi tạo trong khi khai báo nó.
  • Giá trị được gán cho một const biến có thể thay đổi.

Thí dụ

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

Đoạn mã trên sẽ trả về một lỗi vì các hằng số không thể được gán lại một giá trị. Biến hằng số là bất biến.

Hằng số là bất biến

Không giống như các biến được khai báo bằng let từ khóa, constantslà bất biến. Điều này có nghĩa là giá trị của nó không thể thay đổi. Ví dụ, nếu chúng tôi cố gắng thay đổi giá trị của biến hằng số, một lỗi sẽ được hiển thị.

<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>

Đầu ra của đoạn mã trên sẽ như sau:

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

const và mảng

Ví dụ sau đây cho thấy cách tạo một mảng bất biến. Các phần tử mới có thể được thêm vào mảng. Tuy nhiên, khởi động lại mảng sẽ dẫn đến lỗi như hình dưới đây:

<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>

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

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

Từ khóa var

Trước ES6, vartừ khóa được sử dụng để khai báo một biến trong JavaScript. Các biến được khai báo bằng cách sử dụngvarkhông hỗ trợ phạm vi mức khối. Điều này có nghĩa là nếu một biến được khai báo trong một vòng lặp hoặcif block nó có thể được truy cập bên ngoài vòng lặp hoặc if block. Điều này là do các biến được khai báo bằng cách sử dụngvar hỗ trợ từ khóa nâng cấp.

var và cẩu

Variable hoistingcho phép sử dụng một biến trong chương trình JavaScript, ngay cả trước khi nó được khai báo. Các biến như vậy sẽ được khởi tạo thànhundefinedtheo mặc định. JavaScript runtime sẽ quét các khai báo biến và đưa chúng lên đầu hàm hoặc tập lệnh. Các biến được khai báo vớivartừ khóa được nâng lên đầu. Hãy xem xét ví dụ sau:

<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>

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

undefined
TutorialsPoint

var và phạm vi khối

Các block scopehạn chế quyền truy cập của một biến vào khối mà nó được khai báo. Cácvartừ khóa gán phạm vi chức năng cho biến. Các biến được khai báo bằng cách sử dụngvartừ khóa không có phạm vi khối. Hãy xem xét ví dụ sau:

<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>

Đầu ra của đoạn mã trên sẽ như sau:

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

Biến i được khai báo bên trong vòng lặp for bằng cách sử dụng vartừ khóa. Biến i có thể truy cập bên ngoài vòng lặp. Tuy nhiên, đôi khi, có thể cần phải hạn chế quyền truy cập của một biến trong một khối. Chúng tôi không thể sử dụngvartừ khóa trong trường hợp này. ES6 giới thiệulet từ khóa để khắc phục hạn chế này.

var và mức độ an toàn của khối

Nếu chúng tôi khai báo giống nhau variable hai lần sử dụng var keywordtrong một khối, trình biên dịch sẽ không báo lỗi. Tuy nhiên, điều này có thể dẫn đến lỗi logic không mong muốn trong thời gian chạy.

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

Đầu ra của đoạn mã trên như hình dưới đây:

number
object