Tìm hiểu về một số cú pháp ES6 trong JavaScript

JS ES6

Giới thiệu

Cú pháp ES6 hay còn được gọi là ES2015 đều là những chuẩn chung để nói về cú pháp mới trong JavaScript, kể cả sau này chúng ta cũng có thể gặp ES7 (đã ra mắt 2016) và ES8 nữa không chừng. Ngoài những cú pháp mới hỗ trợ cho các lập trình viên tận răng sức mạnh từ JavaScript, các cú pháp cũ của chúng ta cũng sẽ được thay đổi và nâng cấp theo chuẩn mới. Giúp cho mã nguồn chúng ta dễ đọc và dễ quản lý hơn.

Sơ lược về bài viết

Trong bài viết này chúng ta sẽ tìm hiểu qua các chủ đề sau:
  1. Cú pháp khởi tạo biến (Variable) hoặc hằng số (Constant)
  2. Tìm hiểu nội suy chuỗi (String Interpolation)
  3. Tìm hiểu về các giá trị mặc định (Default Values) của các tham số (Parameters) trong hàm (Function)
  4. Tìm hiểu về Arrow Functioncách viết tắt của Arrow Function

Cú pháp khởi tạo biến hoặc hằng số

Trong cú pháp ES6, các bạn có thể dùng từ khóa letconst để định nghĩa 1 biến hay hằng số. Những vấn đề này có lẽ các bạn đã từng khá quen thuộc nếu như đã từng học qua lập trình ở các ngôn ngữ khác rồi.
Ở đoạn code trên cho các bạn thấy rằng, cách thức sử dụng let  hoàn toàn không khác gì so với cách chúng ta sử dụng var  cả. Vì thế các bạn nên sử dụng let  thay vì var  trong mã nguồn để tránh gặp lại các lỗi xưa kia mà Javascript từng bị mắc phải và đã được thay thế ở cú pháp mới.

Nội suy chuỗi

Trước đây để có thể nối các chuỗi ở các biến lại với nhau, ta thường dùng phép cộng ( + ) để cộng các vế lại sẽ ra được 1 chuỗi hoàn chỉnh. Thì với cú pháp ES6 này, việc sử dụng biến hoặc hằng số trực tiếp trong chuỗi giúp đơn giản hóa việc chúng ta gõ và code nhìn cũng sạch sẽ hơn rất nhiều.
Các bạn thấy đấy để có thể nội suy một biến nào đó bên trong rất là dễ dàng đúng không? Javascript sẽ tự hiểu và thay thế hoặc gọi lại hàm mà bạn muốn bên trong dấu hiệu ${}này.

Tìm hiểu về các giá trị mặc định của các tham số trong hàm

Trước đây, để các bạn có thể định nghĩa được các tham số mặc định khi truyền vào thì cách truyền thống sẽ như thế này:

Và với cú pháp mới, Javascript đã cho phép chúng ta viết dễ dàng hơn hẳn:

Tìm hiểu về Arrow Function và cách viết tắt của Arrow Function

Arrow Function hay còn gọi là hàm mũi tên, nhưng mà tốt nhất thì các bạn đừng dịch ra vì nghe nó rất "củ chuối". Nó thừa hưởng cách viết ngắn gọn bằng cú pháp ES6 nhưng bên trong nó sẽ có nhiều điểm khác biệt so với hàm thông thường mà chúng ta được biết.
Qua đoạn code trên thì các bạn cũng sẽ được thấy 2 cách thông dụng nhất từ trước đến nay là Function thông thường và cách sử dụng Anonymous Function (Hàm vô danh - một cách khởi tạo hàm khác của hàm thông thường) để khởi tạo hàm thì nay chúng ta sẽ tạo hàm bằng cú pháp gần như tương đương với 2 cách trên.
Ngoài ra, các bạn còn được hỗ trợ thêm cho việc "lười biếng" với các cách viết tắt không kém phần khó hiểu khi sử dụng ban đầu. Vậy đâu là sự khác biệt giữa Function thông thường và Arrow Function ??? Mời đọc giả hãy đón xem ở các bài viết sau.

Source tham khảo


See the Pen Tìm hiểu cú pháp ES6 by Ân Vũ (@thienanblog) on CodePen
light

(Visited 2,079 times, 2 visits today)

Bình luận

các bình luận