Some awesome ES6 features

Mọi người có lẽ khá quen với cụm từ ECMAScript 6 (ES6), đây là tập hợp các kỹ thuật nâng cao của JavaScript và nó được đề xuất làm tiêu chuẩn của JavaScript. Vậy chúng ta cùng tìm hiểu xem ES6 có những gì mới. Và sắp tới ES7 có lẽ cũng sắp release và chắc sẽ có vài điểm mới như async function, observer,…

1. Block scope:

Chúng ta sẽ thấy một từ khóa khá mới đó là let để định nghĩa 1 biến/constant/function thay vì dùng từ khóa var như trước:

    const search = $('#search');
	search.on('change',function(){
        let input_search = $(this).val();
    	cate_id.on('change', function(){
            let category = this.value;
            send_request(input_search,category);
    	});
 	});

Let sẽ chỉ tồn tại trong block scope của nó. và việc khai báo 1 constant (immutable) cũng dùng trong block scope của chính nó. Như ví dụ trên nếu ta thay constant và let bằng var thì khi có 1 biến với tên tương tự sẽ gây ra lỗi (tính toán sai,…).

2. Destructing assignment:

Chúng ta có thể khởi tạo các biến từ một mảng, object maching:

    var {name, password} = $(‘body’).data();
	var list = [ 1, 2, 3 ];
	var [ a, , b ] = list;
	[ b, a ] = [ a, b ];

thay vì :

    var list = [ 1, 2, 3 ];
    var a = list[0], b = list[2];
	var tmp = a;
	a = b;
	b = tmp;

3. Default parameters:

Chúng ta sẽ có thể gán giá trị mặc định cho function parameter:

var example = function(title=’example’, page = 5) {
    // do something here
}

thay vì:

    var example = function(title, page) {
        var title = || ‘example’
		var page = || 5
		// do something
	}

4. Arrow function:

Cho phép chúng ta tạo function bằng =>. Syntax này khá giống với cách chúng ta viết ở coffeeScript.

    let event = e => e.preventDefault();

trước kia chúng ta viết:

var event = function(e){
        e.preventDefault();
    }

ví dụ khác:

nums.forEach(v => { if (v % 5 === 0) fives.push(v) });

thay vì trước kia:

nums.forEach(function (v) { if (v % 5 === 0) fives.push(v); });

5. Template String:

Trước kia khi muốn hiển thị một biến nào đó ra console.log chẳng hạn. chúng ta sẽ phải dùng cách nối string ví dụ như:

    var customer = {name: “hihi”};
	var order = {product: “jacket”, price: 70};
	var message = “Hello ”+ customer.name + “, you just bought ”+ order.product +“with ”+ order.price + “dollars”;

nhưng với ES6 chúng ta viết như sau:

    var customer = {name: “hihi”};
	var order = {product: “jacket”, price: 70};
	var message = “Hello ${customer.name}, you just bought ${order.product} with ${order.price} dollars”;

Cú pháp trên cho chúng ta sử dụng biến trong string thay vì phải nối biến như trước. Nó khá giống với Ruby, PHP

Conclusion

Trên đây là một vài tính năng nổi bật của ES6. Còn khá nhiều tính năng mới như promise, module, class, set,... mà trong bài viết này mình không thể liệt kê được hết. Chi tiết về nhưng thay đổi của bản ES6 các bạn có thể tham khảo reference dưới đây. Best!

REFERENCES

ECMAScript 6: New features