Video học lập trình mỗi ngày

ES6 được biết đến là ECMAScript 2015. Thật sự có rất nhiều tính năng được giới thiệu trong ECMAScript 6, nhưng với tôi thì tôi sẽ chỉ học những tính năng dưới đây mà thôi.

Giới thiệu về ES6

Đối với bất kỳ developers javascript (Devjs) nào cũng phải học ES6, nên học chúng. Bởi vì thật sự ES6 ra đời với nhiều sự thay đổi tích cực với javascript. Sự khác biệt đó làm thay đổi con người, ứng dụng, cuộc sống... của mỗi Devjs. Nhưng không phải ai trong mỗi chúng ta đều có thể hấp thụ được nhiều tính năng đến như vậy, chính vì vậy, theo kinh nghiệm của tôi, và cũng có tham khảo một số tài liệu mà tôi đã bỏ dưới cuối bài viết, thì hy vọng rằng bạn sẽ rút ngắn được thời gian để tiếp cận es6. 

Nếu thật sự bạn là một người muốn khám phá tận gốc ES6 thì trong blog javascript này đã cung cấp nhiều bài viết về giới thiệu những tính năng javascript es6, thế nhưng tôi biết nó là chưa đủ để bạn cảm thấy hài lòng. Vì vậy tôi sẽ cố gắng viết một series - Học ECMAScript như tôi đã từng viết về Mẹo viết javascript. Còn ở đây tôi đã tóm gọn lại những tính năng, và bạn chỉ cẩn tập trung vào học chúng, vậy là đủ có một nền tảng cao hơn sự căn bản. 

Chú ý nhé, đây không phải là kiến thức căn bản, đó là kiến thức đầy đủ tôi chỉ loại bớt một số tính năng ít được dùng đến khi làm việc mới ES6 mà thôi. Bây giờ tôi sẽ giới thiệu từng tính năng, và những bài viết tham khảo sẽ được giới thiệu ở dưới, nếu đọc kỹ hơn các bạn có thể đọc tại đó.

Khai báo biến trong ES6

Để cái nhìn tổng thể thì tôi có mượn tạm hình của digitalOcean. Để nói về Variables, Scope, and Hoisting trong JavaScript mà tôi đã giải thích kỹ trong những bài viết trước kia. ES6 giới thiệu let, và const để giúp chúng ta có thể sử dụng trong một phạm vi, thay vì khai báo var như một global.

//ES5 
var x = 0;

//ES6 
let x = 0; 
const X = 0; // nhớ theo quy ước là viết hoa

Reference:
Trời sinh ra var, tại sao sinh ra let và const

Sự khác nhau giữa var, let và const phiên bản dành cho người lười đọc

Arrow functions

Việc sử dụng Arrow functions giúp anh em chúng ta viết code ngắn gọn hơn trong việc khai báo một biết thức hàm. Nhưng hãy chú ý, vì khi sử dụng Arrow functions thì ở đó this không hoạt động, không có prototypes, không thể sử dụng constructors. Xin hãy nhớ là như vậy.

// ES5
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression
// ES6
let func = a => {} // không cần mở ngoặc khi chỉ có một tham số.
let func = (a, b, c) => {} // ngược lại cần đóng mở ngoặc khi có nhiều tham số.

Mở rộng thêm đó là việc hỗ trợ "Implicit returns". Có nghĩa là bỏ qua việc sử dụng return nếu như không có phần thân, khó giải thích vãi.

// ES5
function func(a, b, c) {
  return a + b + c
}
// ES6
let func = (a, b, c) => a + b + c // curly brackets must be omitted

Reference:
Sự khác nhau giữa Regular và arrow functions

Arrow functions cheatsheet

Template literals

Có lẽ đây là một tính năng được sử dụng rộng rãi và nhiều nhất, đi đâu cũng thấy!

// ES5
var str = 'Release date: ' + date
// ES6
let str = `Release Date: ${date}`

Mở rộng hơn nữa là chúng ta có thể sử dụng template literal syntax để xuống nhiều dòng mà không cần nối như trước kia.

// ES5
var str = 'This text ' + 'is on ' + 'multiple lines'
// ES6
let str = `This text
           is on
           multiple lines`

MDN Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Expression_interpolation

Key/property shorthand

ES6 giới thiệu một ký hiệu ngắn hơn để gán thuộc tính cho các biến có cùng tên. Như ví dụ dưới đây:

// ES5
var obj = {
  a: a,
  b: b,
}
// ES6
let obj = {
  a,
  b,
}

Reference: Mẹo viết code ngắn gọn và hiệu quả trong ES6

Method definition shorthand

Việc bỏ qua keywork function là một tính năng quá hay, có thể nói là rất hay.

// ES5
var obj = {
  a: function (c, d) {},
  b: function (e, f) {},
}
// ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}
//
obj.a() // call method a

Destructuring

Nếu đến đây mà không kể đến một tính năng vô cùng tiện lợi thì quả là đáng tiếc. Cùng với việc sử dụng Destructuring bao gồm object và array giúp chúng ta có một code nhanh gọn và đẹp hơn rất nhiều.

var obj = { a: 1, b: 2, c: 3 }

// ES5
var a = obj.a
var b = obj.b
var c = obj.c

// ES6
let { a, b, c } = obj

Reference: Sự hiệu quả của Destructuring trong ES6

Array iteration (looping)

Một cú pháp khác được giới thiệu để lặp qua một array hay một object như sau:

var arr = ['a', 'b', 'c']

// ES5
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

// ES6
for (let i of arr) {
  console.log(i)
}

Reference: Sử dụng for...of khác với for...in thế nào? Cẩn thận

Default parameters

Tính năng tham số mặc định thì có thể không cần bàn nữa, vì nó đã được các anh em sử dụng từ lâu rồi.

// ES5
var func = function (a, b) {
  b = b === undefined ? 2 : b
  return a + b
}

// ES6
let func = (a, b = 2) => {
  return a + b
}
func(10) // returns 12
func(10, 5) // returns 15

Reference: Default params trong ES6

Spread syntax

Cú pháp Spread có thể được sử dụng để mở rộng một mảng.

// ES6
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

Cú pháp Spread có thể được sử dụng cho các function arguments.

// ES6
let arr1 = [1, 2, 3];
let func = (a, b, c) => a + b + c;

console.log(func(...arr1);); // 6

Reference: Với 5 cách sử dụng Spread thì bạn sẽ nâng tầm cao mới 

Promises/Callbacks

Đây là điều mà các anh em lập trình mong chờ nhất kể từ khi ES thông báo sẽ support điều này. Chứ hồi xưa mà dùng Callbacks thì chỉ có chết trong đó mà thôi. Việc triển khai bất đồng bộ có thể hiểu trong đoạn code dưới đây, ở đây tôi khuyên các anh em nên đọc thêm về chủ đề "promise javascript" bởi vì có còn nhiều đàn em mà anh em chưa biết tới.

// ES5 callback
function doSecond() {
  console.log('Do second.')
}

function doFirst(callback) {
  setTimeout(function () {
    console.log('Do first.')

    callback()
  }, 500)
}

doFirst(doSecond)
// ES6 Promise
let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')

    resolve()
  }, 500)
})

doFirst.then(doSecond)

Reference: 14 bài viết giúp bạn khởi động tay nghề với Promise 

Modules - export/import

Kể ra những anh em nào làm ở Node.js nhiều rồi thì không cần quan tâm đến tính năng này nữa.

// export.js
let func = a => a + a
let obj = {}
let x = 0

export { func, obj, x }
// import.js
import { func, obj, x } from './export.js'

console.log(func(3), obj, x)

Classes/constructor functions

Dựa trên ES5 thì class ES6 cho ra đời "based constructor function".

// ES5
function Func(a, b) {
  this.a = a
  this.b = b
}

Func.prototype.getSum = function () {
  return this.a + this.b
}

var x = new Func(3, 4)
// ES6
class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)
x.getSum() // returns 7

Kết luận

Anh em nhớ đọc cho kỹ và hiểu cho đúng. Đây là những tính năng là ES6 hay ECMAScript 15 giới thiệu, kể từ đó cứ mỗi năm một lần chúng ta lại được thưởng thức những tính năng mới của các phiên bản khác nhau. 

Chứ đừng có vơ vào hết đây. Và một điều quan trọng nữa đó là những link Reference được kiệt kê ở dưới mỗi mục thì nên đọc đi hén. Ở đó sẽ giải thích cho việc sử dụng cũng như những điều nên tránh. Hy vọng anh em có ý kiến gì thì nên comments cho vui vẻ.

Ref: taniarascia