Những tính năng mới nổi bật của ES6 (phần 1)

Bài đăng này đã không được cập nhật trong 2 năm

1. ES6 là gì?

ES6 là chữ viết tắt của ECMAScript 6, đây được coi là một tập hợp các kỹ thuật nâng cao của Javascript và là phiên bản mới nhất của chuẩn ECMAScript. ES6 ra đời vào năm 2015 nên ES2015 được lấy làm tên chính thức của chuẩn này.

2. Những tính năng mới của ES6

Dưới đây là top 10 điểm mới nổi bật nhất của ES6

Default Parameters
Template Literals
Multi-line Strings
Destructuring Assignment
Enhanced Object Literals
Arrow Functions
Promises
Block-Scoped Constructs Let and Const
Classes
Modules

Trong phần 1 này chúng ta sẽ cùng tìm hiểu 5 tính năng đầu tiên trong danh sách trên. Ok, let’s go!

2.1. Default Parameters

Với ES5 để set default parameters cho hàm ta thường làm như sau

function createSinger (name, age, address, salary) {
  return {
   name = name || 'NA',
   age = age || 0,
   address = address || 'NA',
   salary = salary || 500
  }
}

Vấn đề của việc code như trên là sẽ xảy ra trường hợp khi ta muốn truyền giá trị 0 cho "salary" và giá trị 0 này luôn được coi falsy trong Javascript cho nên thay vì nhận giá trị mong muốn là 0, "salary" sẽ nhận giá trị mặc định là 500.

Với ES6, ta có thể giải quyết vấn đề này bằng việc gán giá trị mặc định cho parameter với syntax như sau

function createSinger (name='NA', age=0, address='NA', salary=500) {
  return {
   name,
   age,
   address,
   salary
  }
}

2.2. Template Literals

Template Literal là cách chúng ta ghép giá trị của biến vào trong string. Với ES5 ta thường dùng dấu "+" để cộng string. Ví dụ

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

Với ES6 ta có một cách diễn đạt "nature" hơn bằng việc đặt ${ten_bien} để phân biệt biến khi đặt xen kẽ bên trong string.

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

2.3. Multi-line Strings

Với ES5 khi muốn xuống dòng syntax "\n\t" dường như đã quá quen thuộc với chúng ta. Ví dụ

var ppap = 'I have a pen,\n\t'
         + 'I have an apple, \n\t'
         + 'Uh! Apple-Pen… \n\t'

Với ES6, ta có thể quên nó đi và hãy cứ xuống dòng như ta muốn

var ppap = `I have a pen,
            I have an apple,
            Uh! Apple-Pen…`

2.4. Destructuring Assignment

Giả dụ bạn có một array của những key-value pair elements

var singer = {
                name: 'Kazuhito Kosaka',
                stage_name : 'Piko-Taro',
                age: 53,
                home_town: 'Chiba, Japan'
            }

Destructuring Assignment là khả năng assign giá trị của element cho biến có tên match với key của element đó. Để thực hiện điều này với ES5 ta thường code như sau

var name = singer.name
var stage_name = singer.stage_name
var age = singer.age
var home_town = singer.home_town

Với ES6 chúng ta có thể thay đoạn code trên bằng dòng code sau

var {name, stage_name, age, home_town} = singer

2.5. Enhanced Object Literals in ES6

ES6 mang lại khả năng mô tả object một cách gọn gàng hơn. Xét ví dụ sau

function createSinger (name, age, address, salary) {
  return {
   name,
   age,
   address,
   salary,
   ['salaryOf' + name] : salary,
   doubleSalary (){
     this.salary += salary;
   }
  }
}

- Property value shorthand: ES6 mặc định gán giá trị cho property khi property có tên match với tên của biến. Với ES5

function createSinger (name, age, address, salary) {
  return {
   name : name,
   age : age,
   address : address,
   salary : salary,
   ...
   }
}

Tương đương với code ES6

function createSinger (name, age, address, salary) {
  return {
   name,
   age,
   address,
   salary,
   ...
  }
}

- Computed property key: Với khả năng này ta có thể set tên của property một cách linh hoạt hơn. Ví dụ với ES5

function createSinger (name, age, address, salary) {
  var singer = {};
  singer['salaryOf' + name] = salary;
  return singer;
}

Tương đương với code ES6

function createSinger (name, age, address, salary) {
  return {
    ['salaryOf' + name] : salary,
  }
}

- Method definition shorthand: Tương tự với Property value shorthand việc define method cũng trở nên ngắn gọn hơn với việc lược bỏ dấu ":" và key word "function". Nếu như trước đây với ES5 ta cần phải mô tả hàm như sau

function createSinger (name, age, address, salary) {
  return {
   doubleSalary : function (){
     this.salary += salary;
   }
  }
}

Thì nay với ES6 sẽ được rút gọn thành:

function createSinger (name, age, address, salary) {
  return {
   doubleSalary (){
     this.salary += salary;
   }
  }
}

Điểm qua 5 tính năng mới đầu tiên của ES6 chúng ta có thể thấy rằng chuẩn mới này của Javascript cung cấp cho chúng ta khả năng code gọn gàng, dễ đọc, dễ hiểu hơn so với chuẩn cũ ES5. Chúng ta sẽ tiếp tục điểm qua 5 điểm nổi bật khác của ES6 trong phần tiếp theo.

Tham khảo

http://www.benmvp.com/learning-es6-enhanced-object-literals/

https://webapplog.com/es6/