Ecma script 6 basic

1.Ecmascript là gì?

Ecmascript là 1 tên gọi khác của Javascript. Ecmascript phiên bản mới nhất là Ecmascript 6 ra đời vào năm 2015

ES6 ra đời vào năm 2015 nên cái tên ES2015 được lấy làm tên chính thức với nhiều tính năng mới lạ và hy vọng dần theo thời gian Javascript trở thành một ngôn ngữ lập trình hướng đối tượng.

2. Một số điểm mới trong ecmascript 6

Sau đây mình sẽ trình bày 1 số vấn đề mà mình đã trực tiếp gặp khi tham gia dự án và đã sử dụng ES6 để tối ưu hóa code của mình như thế nào. Lets go !

a) Từ khóa let

Để hiểu hơn về từ khóa này chúng ta cũng xem 2 ví dụ sau đây:

 for (var i = 0; i < 5; i++) {
   setTimeout(function(){
      console.log(i);
   }, 1000);
}
//result
5
5
5
5
5

for (let i = 0; i < 5; i++) {
   setTimeout(function(){
      console.log('Yo! ', i);
   }, 1000);
}
//result
0
1
2
3
4

Lí do tại sao lại như vậy. Đó là vì trong trường hợp thứ nhất mỗi khi loop 1 lần bộ nhớ sẽ khởi tạo i = 0, cứ sau mỗi lần loop biến i lại được khởi tạo lại và + thêm vào giá trị của nó. Sau 1 s delay, kết quả cuối cùng mà nó lưu lại của i là 5. Còn trong trường hợp thứ 2, biến let được khởi tạo mang giá trị toàn cục. Trong vòng lặp của mình nó được khởi tạo lại 1 lần nữa và mang giá trị có ý nghĩa trong function block chứa nó. Nó lưu giá trị và hủy giá trị đi khi hàm chạy xong. Ý nghĩa: đối với hệ thống việc chặt chẽ hủy giá trị sau khi gọi rất hữu ích cho việc tiết kiệm tài nguyên hệ thống. Còn trong công việc hằng ngày, khai báo chặt chẽ cách gọi biến sẽ giúp cho code trở nên trong sáng hơn, tránh được những lỗi naming vớ vẩn không đáng có

b) Default Parameters trong ES6

Đối với javascript phiên bản trước, để khai báo giá trị mặc định cho 1 tham số chúng ta thường làm như sau:

function sayHello(param)
{
    var a = param || "default value";
    return a;
}

Còn đối với ES6 mọi việc gọn gàng hơn rất nhiều

function sayHello(a = "default value")
{
    return a;
}

Ý nghĩa: Javasript càng ngày càng đảm nhận công việc của 1 ngôn ngữ lập trình chính hiệu, việc chuẩn hóa cú pháp giống như những ngôn ngữ lập trình khác sẽ khiến cho code JS trở nên trong sáng hơn rất nhiều

c) Rest Parameters trong ES6

Trong ruby on rails, ta có thể khai báo bao nhiêu tham số tùy ý khi param ở cuối là 1 hash. Và h đây thì điện cuối cùng cũng đã về bản, javascript cũng đã có thể làm được tương tự.

let functionName = function (param1, param2, ...other) {
    //
}

Ý nghĩa: Như vậy trong Javascript ES6 thì bạn thoải mái trong việc truyền tham số vào function. Tuy nhiên cái nào cũng có hai mặt của nó, nếu bạn truyền với số lượng tham số không xác định thì rất khó nâng cấp và bảo trì.

d) Sử dụng Arrow function trong ES6

Thật ra đây cũng không hẳn là 1 điểm + j vì nó chỉ đơn giản là thay đổi cú pháp cách khai báo hàm bên trong javascript

var functionName = (var1, var2) => {
    //
};

d) Lập trình hàm trong ES6

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.

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

3. Tổng kết

ES6 còn khá nhiều chức năng hay và thú vị. Mình cũng mới chỉ tìm hiểu về nó nên có nhiều cái có thể sẽ bị ngộ nhận. Hy vọng sẽ nhận được các ý kiến đóng góp của mọi người. (bow)