Javascript ES6 – Đôi điều thú vị có thể bạn chưa biết

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Mang tiếng là FE Developer, chính chiến khắp nơi, nào là Vuejs, ReactJs, Angular, nhưng đôi khi lại quên mất những điều đặc biệt ở Javascript ES6. Chà, tắc trách quá!

Hãy cùng Kieblog điểm qua một số điều thú vị đôi khi ta quên mất là chỉ có ở ES6. Cùng bắt đầu nha!

ES6 được xem như bước ngoặt lớn trong quá trình phát triển của ECMA Script

1. Default parameter

Rõ ràng mà nói, từ xưa tới nay vẫn luôn dùng || để set giá trị default cho argument trong trường hợp không được truyền vào

var kieblog = function (author, article, url) {
var author = author || 'Kien nguyen'
var article = article || 'Javascript ES6'
var url = url || 'https://kieblog.vn'
...
}

Tuy nhiên, ở Javascript ES6, ta có thể set giá trị default của argument ngay khi khai báo function. Đơn giản như sau:

var kieblog = function(author = 'Kien nguyen', article = 'Javascript ES6', url = 'https://kieblog.vn') {
...
}

Viết kiểu này vừa gọn, vừa tiện lại không làm source trở nên quá dài. Trông ra cũng giống Ruby đấy chứ!

Việc làm Javascript lương cao

2. Template Literals

Trước đây, khi muốn concat string các giá trị lấy theo chuỗi, ta sử dụng +. Tuy nhiên, với một hai cái thì không sao, tới chừng 5,6 cái thì thật sự là hoa cả mắt. Không ổn không ổn.

// Chỉ 2 cái thì okie, không sao hết
// Mặc dù nhìn hơi củ chuối, nhưng vẫn chấp nhận được!
var aboutme = 'My name is ' + first + ' ' + last + '.'

May mắn thay, ở Javascript ES6 ta có thể sử dụng syntax ${NAME} để bind các value vào String. Easy for ence như sau:

// Bind một phát,nhìn vừa gọn vừa chuyên nghiệp
var name = `My name is ${first} ${last}.`

3. Arrow Functions

Nhắc tới Javascript ES6 mà bỏ qua Arrow function thì thật sự là thiếu sót to lớn rồi. Dùng hằng ngày, viết hằng ngày thì tất nhiên phải nhớ có mặt ở ES6. Phải không nào?

// Với ES5, trước đây phải viến function(event)
var _this = this
$('.btn').click(function(event){
_this.doButtonThing()
})

Qua ES6, chỉ với Arrow function, đơn giản chỉ cần viết

// Với ES5, trước đây phải viến function(event)
var _this = this
$('.btn').click(function(event){
_this.doButtonThing()
})

// Với ES6
(argument) => {
thing want to do
})

4. Block-Scoped trong Javascript ES6

Ở ES5, var có scope ở cả function, thành ra đôi khi có mấy cái bug bi hài nếu dùng chung variable name. Mặc dù đã khai báo var các kiểu con đà điều, nhưng giá trị vẫn không đổi

// Với ES6
function theFunnyThingWithES5(es5) {
var es5Value = 99
if (es5) {
var es5Value = 100
}
{ // Cứ có block thì var sai
var es5Value = 101
{
var es5Value = 999
}
} 
return es5Value
}
// Console ở đây log ra là 999 -> funny thing
console.log(theFunnyThingWithES5(true))

function theFunnyThingWithES6(es6) {
var es6Value = 99 
if (es6) {
let es6Value = 100 // first es6Value is still 99
} 
{ // more crazy blocks!
let es6Value = 101 // first es6Value is still 99
{
let es6Value = 999 // first es6Value is still 99
}
} 
return es6Value
}

5. Promises trong ES6

Trước khi Javascript ES6 release, ta có thể viết một function promises như sau:

setTimeout(function(){
console.log('KieBlog!')
}, 1000)

Với ES6 promise, ta có thể viết như sau.

var kieblogPromise = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('KieBlog!')
})

Trời, nhìn phức tạp hơn chứ có đơn giản tí tẹo nào đâu. Vậy mục đích của cái Promises này là gì?

Đây đây, lúc mà có tới hơn 2,3 xử lý trong setTimeOut thì nó mới phát huy tác dụng

// Có chừng 3,4 cái xử lý phức tạp lồng nhau thôi là toang
setTimeout(function(){
console.log('Kieblog 1!')
setTimeout(function(){
console.log('Kieblog 2!')
}, 1000)
}, 1000)

Lúc này thằng Promises phát huy tác dụng ngay

// Có chừng 3,4 cái xử lý phức tạp lồng nhau thôi là toang
var kieblogPromise = ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)})

// Cứ .then tiếp tục nếu có nhiều, dễ nhìn dễ hiểu
kieblogPromise()
.then(function() {
console.log('Kieblog 1!')
return wait1000()
})
.then(function() {
console.log('Kieblog 2!')
})

6. Tham khảo

• ECMAScript 6 – W3Schools
• ES6 Tutorial – Javascript Tutorial

Bài viết gốc được đăng tải tại kieblog.vn

Tham khảo tuyển dụng it hấp dẫn trên TopDev