ES6 hay là Javascript 2015

Bạn có biết Javascript, - ngôn ngữ lập trình web mà chúng ta vẫn sử dụng còn có một tên gọi khác là ECMAScript ? ECMAScript hiện nay không phải là phiên bản đầu tiên. Dưới đây là các mốc thời gian của ECMAScript

• ECMAScript 1:(ES1) ra đời năm*1997*
• ECMAScript 2:(ES2) được giới thiệu năm 1998
• ECMAScript 3:(ES3) được giới thiệu năm 1999
• ECMAScript 4:(ES4) được giới thiệu năm 2000
  • jQuery ra đời năm 2006
  • NodeJS ra đời năm 2009
• ECMAScript 5:(ES5) ra đời năm 2011
• ECMAScript 6:(ES6) tháng 6 năm 2015

Bây giờ đã đang là tháng 6 năm 2015, vậy bạn đã biết gì về ES6 chưa :)

ES6 cung cấp một loạt các API rất hữu dụng với cấu trúc Array. Các xử lý cũng linh hoạt lên rất nhiều, trong đó nổi bật nhất phải kể đến Array Comprehension. Dưới đây là cách viết hàm bình phương cho ES5 và ES6:

// ES5
[1, 2, 3].map(function (i) { return i * i }); // [1, 4, 9]
// ES6
[for (i of [1, 2, 3]) i * i]; // [1, 4, 9]

Một ví dụ nữa với hàm lọc (filter)

// ES5
[1, 2, 3].filter(function (i) { return i < 3 }); 
// ES6
[for (i of [1, 2, 3]) if (i < 3) i ];

Nếu kết hợp 2 vòng for thì ta sẽ còn viết được nhiều xử lý hơn trong 1 dòng duy nhất

[for (x of 'abc'.split(')) for (y of '123'.split(')) (x+y)];
// ["a1", "a2", "a3", "b1", "b2", "b3", "c1", "c2", "c3"]

Với những sức mạnh kể trên thì bạn sẽ cảm thấy ES6 cũng "mạnh mẽ" chẳng kém gì Python, Haskell hay Scala !

ES6 giới thiệu một từ khóa mới để định nghĩa biến: let. Vậy so với var thì let có những khác biệt nào ?

var có hiệu lực đến hàm gần nhất, trong khi let có hiệu lực đến dấu đóng mở ngoặc gần nhất (thường sẽ nhỏ hơn phạm vi của hàm gần nhất)

Sự khác biệt sẽ thể hiện rõ khi chạy một vòng loop qua một biến khai báo bằng var và let

var arr = [];
for (var i=0; i<3; i++){ 
  arr[i] = function(){ 
    console.log(i); 
  }
};
arr[0](); // 3
arr[1](); // 3
arr[2](); // 3

Ở trên là đoạn code của ES5, biến i là biến chung trong cả function, vì vậy ở thời điểm gọi arr[0](), arr[1](), arr[2]() thì i đã nhận giá trị 3, dẫn đến mọi ouput đều trờ thành 3. Dưới đây chúng ta sẽ thử với let của ES6

let arr = [];
for(let i=0; i<3; i++) {
  arr[i] = function() {
    console.log(i);
  }
};
arr[0](); //0
arr[1](); //1
arr[2](); //2

Biến i chỉ nhận giá trị trong vòng for, vì vậy sẽ lần lượt mang giá trị 0,1,2 với 3 lần gọi ở cuối cùng.

Mình định viết về Arrow function, nhưng thấy đã có bài này rất chi tiết và đầy đủ :) Vì vậy các bạn xem bài viết trên nhé.

Babel.js là tool cuối cùng mình muốn giới thiệu với mọi người. Trong thời gian ES6 vẫn chưa chính thức ra mắt và được các browser support, thì các bạn có thể viết code ES6 và dùng Repl của BabelJS để dịch lại sang mã ES5 chạy được trên browser. BabelJS mang lại khả năng phát triển và sử dụng các tính năng của ES6 ngay tại thời điểm này và chỉ cần thêm một thao tác compile là code sẽ chạy được trên các browser bình thường.

Nhân tiện, dưới đây là đoạn code được BabelJS dịch ra với cách dùng hàm let bên trên. Bạn có thể thấy biến i được wrap trong một function mới.

var arr = [];
var _loop = function (i) {
  arr[i] = function () {
    console.log(i);
  };
};
for (var i = 0; i < 3; i++) {
  _loop(i);
};
arr[0]();
arr[1]();
arr[2]();

Vậy đã có bạn nào code bằng ES6 chưa :)