Overview ES6

CHUYỆN NGHỀ1 Comment

You Are Here:Overview ES6

Trước tiên, tản mạn 1 chút về javascript và ECMAScript. Javascript ra đời năm 1995, tức là đã hơn 20 năm phát triển và hiện giờ đang là 1 trong các “hot language” trong giới lập trình viên. Tuy vậy đây cũng là một trong số các ngôn ngữ khó học và khó hiểu bậc nhất.

Rất dễ để học nhưng rất khó để trở thành master

Javascript gần như là 1 chú ngựa đơn độc trong rất nhiều các ngôn ngữ lập trình, ẩn trong nó là hàng tá các định nghĩa khó hiểu không kém: prototype, callback function, scope, hoisting, dynamic object, invocation pattern, … Tuy vậy, với nhu cầu sử dụng ngày càng nhiều và dần trở nên quan trọng hơn đối với các website, việc code những hệ thống lớn, gồm hàng trăm module, dùng từ front end đến back end, từ web đến mobile app, desktop app mà chỉ có mỗi javascript thì gần như là quá tải, và sớm muộn gì mấy ông maintain cũng sẽ đến đốt nhà bạn. Giải pháp cho vấn đề trên nằm ngay trong bài viết này: ES6 nhằm hỗ trợ cho việc code trở nên dễ dàng và tường minh hơn. Nhưng ES6 không phải gồm 1 hay 2 technique mà gồm hàng tá kỹ thuật hỗ trợ, trong bài viết này mình sẽ  giới thiệu một số tính năng mới của ES6 và mổ xẻ so sánh nó với ES5 (Mình chỉ giới thiệu 1 số tính năng hay thôi nhé, các bạn tham khảo nguồn dưới cuối bài để tìm hiểu thêm).

1. ES6 LÀ GÌ ?

ES6 là chữ viết tắt của ECMAScript 6, đây được coi là một tập hợp các kỹ thuật nâng cao của Javascript và là phiên bản mới nhất của chuẩn ECMAScript.

Một chút về lịch sử

Khi chưa có ES thì có một đặc tả ngôn ngữ kịch bản được phát triển bởi Brendan Eich của Netscape và nó có tên là Mocha. Sau đó nó được đổi tên thành LiveScript và cuối cùng là Javascript. Vào 12-1995, Sun Microsystem và Netscape đã công bố Javascript. Tháng 3 – 1996 trình duyệt Netscape Navigator 2.0 ra đời và hỗ trợ Javascript. Sau đó, Microsoft ra mắt một ngôn ngữ tương tự tên là JScript để cạnh tranh và tránh vấn đề bản quyền. JScript được thêm vào trong Internet Explorer 3.0 và ra mắt vào tháng 8, 1996.
Netscape chuyển Javascript tới Ecma International để làm công tác chuẩn hoá và viết đặc tả, được gọi là ECMA-262, bắt đầu vào tháng 11, 1996. Và cái tên ECMAScript được hình thành từ đây bởi sự thoả thuận giữa những công ty đang tham gia vào quá trình chuẩ
ECMAScript 6 (hay còn được gọi là ES6, ES2015) là phiên bản mới nhất của chuẩn ECMAScript. Chuẩn này được phê duyệt vào tháng 6/2015. Nó là một bản nâng cấp quan trọng cho ES kể từ ES5 đã được chuẩn hoá vào năm 2009.

Điều Kiện Để Học ES6

Đối với ES6 rất dễ chơi dễ trúng thưởng. Theo mình 2 điều kiện để học ES6 :

  • Kiến thức cơ bản về javascript: Trước tiên bạn đã từng làm việc với javascript. Từ đó bạn có thể so sánh được ES6 với phiên bản cũ.
  • Trình duyệt: Một thứ không thể thiếu nữa là Browser. ES6 hỗ trợ Browser từ phiên bản 2015 trở lên nhé các bạn.
    Đao to búa lớn quá giờ chúng ta cùng xem 1 số tính năng mới của ES nhé !!!!

2.Arrow Function in ES6

Ở ES6, thay vì khai báo function như kiểu thông thường, ta đã có thể sử dụng =>. Cách khai báo này tương tự như Lambda Expression trong C#, giúp cho code tường minh và ngắn gọn hơn rất rất nhiều.
Lấy 1 ví dụ để so sánh nhé :
Đối với ES5 để viết 1 function chúng ta thường hay là như sau.

Với ES6 thì sao.

Ngoài ra, nhờ có arrow, ta không còn bị tình trạng this bị bind nhầm như trước kia nữa.

Cùng xem ES6 xử lí trường hợp này như thế nào nhé 😀

Các bạn thử copy code rồi mở trình duyệt console lên test thử nhé :v
Đẹp trai hẳn đúng không các bạn 😀

3. Default parameter spread

Default Parameter là giá trị mặc định của tham số khi truyền vào các function. Đối với Javascript thì có nhiều bạn chưa biết chức năng này mặc dù trong ES5 đã cung cấp săn cho chúng ta, tuy nhiên người ta cảm thấy cách tạo giá trị mặc định trong ES5 vẫn không hay nên họ đã bổ sung một cách khác mới hơn và đơn giản hơn rất nhiều trong ES6.
Tiếp tục lấy ví dụ để so sánh sự khác biệt giữa ES5 và ES6 nhé
Với ES5 chúng ta thường khai báo default parameter như sau.


Với ES6 thì sao ?

4. Cải tiến syntax class và object

Có lẽ đây là điều mình thích nhất ở ES6. Mình rất ghét phải sử dụng prototype.Có lẽ do ảnh hưởng của lập trình hướng đối tượng. Thật may trong ES6, class có hỗ trợ constructor, get/set, việc kế thừa cũng rất dễ thực hiện bằng từ khóa extends.
Việc viết code dễ đọc dễ hiểu hơn rất nhiều.

Với cách khai báo object mới, ta có thể viết code một cách ngắn gọn và rõ ràng hơn nhiều

5. Iterator

Ngày xưa, để duyệt qua từng phần tử trong một mảng, ta phải sử dụng hàm for, chạy index từ 0 tới cuối mảng. Về sau đỡ hơn, ta có thể sử dụng hàm forEach. Tuy nhiên nhiều người lại thấy cú pháp hàm forEach hơi lạ, không được tự nhiên cho lắm. Trong ES6, ta đã có thêm for… of để duyệt từng phần tử trong một mảng (Đừng nhầm với for…in, để duyệt các trường trong 1 object nhé).

6. Template String

Chức năng này khá giống chức năng string interpolation trong C# 6.0. Trước đây, JavaScript không có string.format, do đó ta phải cộng chuỗi bằng tay rất cực. Giờ đây, sử dụng template string, ta không cần phải mất công cộng chuỗi nữa, code rõ ràng hơn nhiều.

7. Multi-line String in ES6

Tiện đây nhắc luôn về multi-line. Multi-Line có nghĩa là nhiều dòng. Khi bạn code một đoạn nào đấy các bạn không thể để 1 dòng code quá dài phải không ! nó rất là xấu và khi có sếp review code chắc chắn sẽ comment là convention luôn đấy :upside_down: Trong ES5 mọi người hay làm như thế này phải không


Với ES6 không cần nhiều nháy đơn đến thế ^^

8. Promise

Như chúng ta đã biết Javascript là đơn luồng nghĩa là một đoạn mã xử lý một nhiệm vụ sẽ chỉ chạy một lần duy nhất và nếu có lần thứ hai thì nó phải chờ lần thứ nhất kết thúc, điều này tuân thủ theo nguyên tắt hoạt động đồng bộ và hoạt động này đã gây ra phiền toái cho một số trường hợp.
Nói đến đây nhiều bạn lại chửi mình bảo thằng này nói liên thiên vì vẫn sử dụng javascript cụ thể là ajax để xử lí bất đồng bộ.

Xin thưa sự kiện trong Javascript đã giải quyết vấn đề đa luồng, một hành động sẽ xảy ra khi một sự kiện được kích hoạt. Bạn viết một chương trình gửi mail và bạn gán nó vào sự kiện click vào button, mình click hai lần liên tiếp thì chương trình sẽ xử lý gửi mail 2 lần cùng một thời điểm, tuy nhiên sẽ rất khó để biết được bên nào sẽ xử lý xong trước.
Khi đó Promise xuất hiện giúp cho việc viết code asynchonous (bất đồng bộ) dễ dàng hơn. Promise được sử dụng trong rất nhiều thư viện như jQuery AngularJS.
Lấy ví dụ nhé:

Trong đoạn code trên resolve là một hàm callback xử lý cho hành động thành công. reject là một hàm callback xử lý cho hành động thất bại.

9. Lời kết

ES6 còn rất nhiều tính năng hay và lạ nhưng trong bài viết  này mình đã giới thiệu cho các bạn một số tính năng nổi bật nhất của ES6 thôi nhé.
Khi bạn làm chủ được ES6 rồi thì bạn có thể tự tin học về React, Angular, Vue. . .
Cảm ơn mọi người đã theo dõi bài viết của mình ^^

About the author:

Top