Bài viết này sẽ giới thiệu nhanh về ES6. Nó là phiên bản mới của Javascript. Nếu bạn là một developer về javascript thì bạn hãy tiếp tục đọc để tìm hiểu 10 tính năng tốt nhất của thế hệ mới của ngôn ngữ lập trình phổ biến nhất Javascript Dưới đây là danh sách 10 tính năng tốt nhất của ES6

1. Default Parameters in ES6
2. Template Literals in ES6
3. Multi-line String in ES6
4. Destructuring Assignment in ES6
5. Enhanced Object Literals in ES6
6. Arrow Function in ES6
7. Promises in ES6
8. Block-Scoped Constructs Let and Const
9. Classes in ES6
10. Modules in ES6

Danh sách trên được sắp xếp một cách ngẫu nhiên, trong ES6 còn rất nhiều tính năng khác, các bạn tham khảo http://es6-features.org Bây giờ chúng ta tiến hành xem xét code

1. Default Parameters in ES6

Chúng ta có các câu lệnh để khai báo các tham số mặc định

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://viblo.asia'
    ...
}

Mọi thứ vẫn ổn cho đến khi giá trị là 0 bởi vì trong javascript 0 là false, vì thế chúng ta phải sử dụng cách khác, Trong ES6, chúng ta có thể đặt các giá trị mặc định khi khai báo tham số như thế này

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

=> Cú pháp mới tương tự php, ruby

2. Template Literals in ES6

Template Literals hay interpolation trong các ngôn ngữ khác là một cách hiển thị các biến trong chuỗi. Trong ES5 chúng ta làm như thế này

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

Nhưng trong ES6 chúng ta có thể sử dụng cú pháp mới ${NAME} bên trong chuỗi

var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

Rất tiện lợi, trong các ngôn ngữ swift và php đều có cách viết như trên, nhưng cú pháp hơi khác 1 chút

3. Multi-line String in ES6

Một chuỗi có nhiều dòng. Trong ES5, chúng ta sử dụng chuỗi có nhiều dòng như sau

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

Trong ES6 chỉ cần sử dụng dấu `` (backticks)

var roadPoem = Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

4. Destructuring Assignment in ES6

Destructuring có thể là một khái niệm khó hiểu, hãy xem phép gán đơn giản này nơi các khóa house và mouse là các biến house và mouse:

var data = $('body').data(), // data has properties house and mouse
  house = data.house,
  mouse = data.mouse

Trong ES6, chúng ta có thể thay thế code ES5 với các câu lệnh

var {house, mouse} = $('body').data() // we'll get house and mouse variables

Giống với cú pháp sử dụng hàm list trong php, rất tiện lợi nếu muốn tạo 1 danh sách các biển với value khác nhau mà chỉ trong 1 dòng code

5. Enhanced Object Literals in ES6

Cách viết JS ở trong ES6 cho phép các thuộc tính literals có thể sử dụng làm biểu thức

function getCar(make, model, value) {
	var car = {};

	// in ES3/ES5 the only way to use a
	// computed property key was in a
	// separate assignment statement
	car['make' + make] = true;

	return car;
}

Trong ES6

function getCar(make, model, value) {
	return {
		// computed values now work with
		// object literals
		['make' + make]: true
	};
}

Có rất nhiều cải tiến ở trong ES6, bạn có thể tham khảo ở đây giúp cho code trở nên ngắn gọn hơn rất nhiều http://www.benmvp.com/learning-es6-enhanced-object-literals/

6. Arrow Functions in ES6

Đây là tính năng viết hàm kiểu coffeescript, tôi đã làm việc với coffeescript, việc viết code trong coffee thì ngắn gọn, hàm function được tối giản cú pháp. Trong Es6 Các bạn có thể tham khảo cú pháp ở đây https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions Việc viết function trở nên ngẵn gọn hơn trước rất nhiều và không cần phải binding con trỏ this

Trong ES5

function Person() {
  var that = this; // Cần phải binding this
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}

Trong ES6

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0;

  setInterval(function growUp() {
    // In non-strict mode, the growUp() function defines `this` 
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    this.age++; // vẫn gọi được giống như this ở trong Java
  }, 1000);
}

var p = new Person();

7. Promises trong ES6

Promise là chủ đề gây tranh cãi, có nhiều phiên bản promise với một chút khác biệt về cú pháp: Q, Bluebird, deferred.js, avow, jquery deferred là một vài ví dụ. Một số người nói không cần promise và chỉ cần sử dụng async, generators, callbacks, ...May mắn là hiện tại đã có sẵn một chuẩn Promise trong ES6. Tôi cũng chưa dùng nhiều nên không biết được là nó có hàm đồng bộ của các promise với nhau không giống như ở Bluebird, ở bài viết tới tôi sẽ xem xét tiếp

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000)
}).then(()=> {
  console.log('Yay!')
})

8. Block-Scoped Constructs Let and Const

Let cho phép chúng ta khai báo biến trong phạm vi các khối lệnh. Các khối lệnh được định nghĩa bởi cặp ngoặc nhọn {}. Trong ES5, các khối không giới hạn phạm vi của các biến:

Trong ES5

function calculateTotalAmount (vip) {
  var amount = 0
  if (vip) {
    var amount = 1
  }
  { // more crazy blocks!
    var amount = 100
    {
      var amount = 1000
      }
  }  
  return amount
}
console.log(calculateTotalAmount(true)); // result: 100

Trong ES6

function calculateTotalAmount (vip) {
  var amount = 0 // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1 // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100 // first amount is still 0
    {
      let amount = 1000 // first amount is still 0
      }
  }  
  return amount
}

console.log(calculateTotalAmount(true)); // result: 0

Có vẻ thêm cái let này ko hiệu quả lắm, không được như bên swift cũng có if let

9. Classes trong ES6

Ngon rồi, nếu bạn chuyên code lập trình hướng đối tượng thì giờ đây đã có class để thực hiện, đỡ được phần nào khi sử dụng prototype Các bạn có thể tham khảo https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area);

Có đầy đủ nhưng các ngôn ngữ lập trình OOP, quá ngon

10. Modules in ES6

Chúng ta có 1 file tool.js

function generateRandom() {
    return Math.random();
}

function sum(a, b) {
    return a + b;
}

export { generateRandom, sum }

Ờ file js khác app.js, chúng ta có thể import module đã export ở trên

import { generateRandom, sum } from 'utility';

console.log(generateRandom()); //logs a random number
console.log(sum(1, 2)); //3

Tôi thấy việc này cũng khá tốt, mình có thể gọi các phương thức từ các file js khác nhau một cách đơn giản.

Tổng kết

Việc nâng cấp lên ES6 tôi thấy ngoài viết kiểu function mới và có thêm classes là có ý nghĩa, nhưng thật sự là chưa cần thiết lắm ở ES5 là đã đủ để dùng rồi, việc nâng cấp này đối với những người chuyên lập trình OOP khi thao tác sẽ dễ dàng hơn, tu duy logic giải quyết vấn đề đỡ bị thay đổi nhiều khi code javascript!