ES6 - The Good Part (Phần 1)

ES6 hay ECMAScript 2015, ES2015 là tập hợp các kỹ thuật nhằm code javascript clean and clear hơn. Nghe khái niệm này có vẻ hơi khó hiểu, tại sao 1 ngôn ngữ lại cần 1 cái chuẩn để viết được code (??). Mình sẽ giải thích qua một chút về vấn đề này trước khi đi sâu hơn vào 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. Mình có thể khẳng định điều này vì mình đã học nó chục lần rồi =)) . 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ẽ chỉ đề cập đến những phần nào mình thấy hữu ích nhất qua quá trình tìm hiểu và sử dụng trong các project. Đồng thời cũng chỉ ra luôn điểm lợi, điểm hại, tips and trick khi sử dụng ES6.

Bài viết sẽ bao gồm các nội dung sau:

• const vs let vs var
• import/export
• arrow function
• template string
• destructuring
• for of vs for in
• Array methods
• spread operator
• class

const vs let vs var

var ở trong javascript thì có lẽ ai cũng biết. var đứng đằng trước nhằm khai báo cho variable, tương tự với const và let. Nếu giống nhau thế thì tại sao ES6 lại sinh ra thêm 2 thanh niên kia để làm gì. Có 2 điều cần lưu ý ở đây, thứ nhất, var là function scope, còn const và let là block scope. function scope tức là miễn bạn khai báo biến ở trong một function, bạn có thể dùng nó ở bất cứ đâu trong function đó.

function run() {
    var m = 100;
    echo "you ran " + m + "meters";
    if (m > 20) {
        console.log(m,  "meters !!");
    }
}
run(); //you ran 100 meters;
          //100meters !! 
console.log(m); //undefined

Nhưng ở đây sẽ nảy sinh một vấn đề, hãy nhìn vào đoạn code dưới đây:

function run() {
    if (100 > 20) {
        var m = 100;
        console.log(m, "meters !!");
    }
    console.log("you ran ", m, "meters");
}
run();  //100meters !! 
            //you ran 100 meters;

Tôi đã đảo thứ tự khai báo variable m đi một chút, nhưng function run() vẫn hoạt động êm ru, sao lại thế? Bởi var là function scope, nên dù khai báo bên trong mệnh đề if nó vẫn được vô tư sử dụng bên ngoài, miễn là còn nằm trong function (không thể hư cấu hơn