9 tính năng trong ES6 mà lập trình viên JavaScript thừa biết

Thứ Bảy, 21/11/2020

Tram Ho

ES6 mang lại rất nhiều tính năng hay cho Javascript. Trong bài viết này hãy cùng mình tìm hiểu những tính năng có thể giúp chúng ta viết code hiệu quả hơn. Bài viết dành cho những người đang tìm hiểu JS như mình.

ECMAScript, hay ES6, được xuất bản vào tháng 6 năm 2015. Sau đó nó được đổi tên thành ECMAScript 2015.

1. Const và let

Trước khi có ES6, để khai báo biến chúng ta sử dụng từ khóa var.
Tuy nhiên nó lại gặp vấn đề liên quan tới scope. Vì var không có block scope cho nên dẫn tới trường hợp không như mong muốn, ví dụ:

<span class="token keyword">var</span> company <span class="token operator">=</span> <span class="token string">'Sun Asterisk'</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> company <span class="token operator">=</span> <span class="token string">'Framgia'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>company<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Framgia</span>

var company = 'Sun Asterisk';

if (true) {

var company = 'Framgia';

}

console.log(company); // Framgia

Chúng ta sẽ gặp vấn đề trong những dự án lớn với hàng ngàn dòng code, chúng ta không biết company đã được khai báo trước đó, do đó nếu khai báo lại biến cùng tên đó trong câu lệnh if thì không may sẽ dẫn tới việc thay đổi giá trị của biến company trong global scope.

Đó là lý do mà chúng ta sẽ thay thế bằng let và const, ví dụ trên sẽ hoạt động đúng như sau:

<span class="token keyword">let</span> company <span class="token operator">=</span> <span class="token string">'Sun Asterisk'</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> company <span class="token operator">=</span> <span class="token string">'Framgia'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>company<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Sun Asterisk</span>

let company = 'Sun Asterisk';

if (true) {

let company = 'Framgia';

}

Bây giờ nếu định nghĩa cùng tên biến thì cũng không gặp vấn đề gì vì company đã ở trong 2 scope khác nhau.

2. Arrow function

Ngày nay, các ngôn ngữ lập trình hiện đại đều có xu hướng đơn giản hóa cách viết nhưng vẫn đáp ứng được nhiệm vụ. Arrow function ra đời cũng giúp việc viết code ngắn gọn hơn.
Trước khi có arrow function, chúng ta thường viết như sau:

<span class="token keyword">function</span> <span class="token function">sayGreeting</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">sayGreeting</span><span class="token punctuation">(</span><span class="token string">'Sunner'</span><span class="token punctuation">)</span>

function sayGreeting(name) {

console.log('Hello ' + name)

}

sayGreeting('Sunner')

Với arrow function:

<span class="token keyword">function</span> <span class="token function-variable function">sayGreeting</span> <span class="token operator">=</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span>

<span class="token function">sayGreeting</span><span class="token punctuation">(</span><span class="token string">'Sunner'</span><span class="token punctuation">)</span>

function sayGreeting = name => console.log('Hello ' + name)

sayGreeting('Sunner')

3. Tham số “Rest”

Cùng xem ví dụ sau:

<span class="token keyword">function</span> <span class="token function">something</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> <span class="token operator">...</span> numbers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a: "</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"b: "</span><span class="token punctuation">,</span> b<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"numbers: "</span><span class="token punctuation">,</span> numbers<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">something</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span>
<span class="token comment">// a:  1</span>
<span class="token comment">// b:  2</span>
<span class="token comment">// numbers:  [3, 5]</span>

function something(a, b, ... numbers) {

console.log("a: ", a)

console.log("b: ", b)

console.log("numbers: ", numbers)

}

something(1, 2, 3, 5)

// a: 1

// b: 2

// numbers: [3, 5]

Có thể thấy tiền tố … của tham số cuối cùng sẽ được chứa trong một mảng, numbers được gọi là rest parameter

4. Template literals

Template literals là chuỗi mà bạn có thể ngắt dòng và sử dụng với interpolated expression (tạm dịch: biểu thức nội suy), kiểu ${variable_name}.
Để tạo template literals chúng ta dùng dấu (thay vì ” hay “” như string thông thường)

Ví dụ:

<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"Sunner"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">We are </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sunner<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>

const name = "Sunner"

console.log(`We are ${sunner}`)

5. Promises

Promises cho phép bạn dừng lại một hàm này cho tới khi các hàm trước đó được thực hiện xong, được sử dụng khi chúng ta xử lý một chuỗi các hành động theo trình tự.
Khi chưa có Promise thì chúng ta sử dụng callback nhưng callback có nhiều hạn chế nên không ai ưa dùng.

Ví dụ:

<span class="token comment">// add two numbers remotely using observable</span>

<span class="token keyword">let</span> resultA<span class="token punctuation">,</span> resultB<span class="token punctuation">,</span> resultC<span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">addAsync</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// use ES6 fetch API, which return a promise</span>
    <span class="token comment">// What is .json()? https://developer.mozilla.org/en-US/docs/Web/API/Body/json</span>
    <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://www.example.com?num1=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;num2=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">addAsync</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        resultA <span class="token operator">=</span> success<span class="token punctuation">;</span>
        <span class="token keyword">return</span> resultA<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token function">addAsync</span><span class="token punctuation">(</span>success<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        resultB <span class="token operator">=</span> success<span class="token punctuation">;</span>
        <span class="token keyword">return</span> resultB<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token function">addAsync</span><span class="token punctuation">(</span>success<span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        resultC <span class="token operator">=</span> success<span class="token punctuation">;</span>
        <span class="token keyword">return</span> resultC<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">success</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'total: '</span> <span class="token operator">+</span> success<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>resultA<span class="token punctuation">,</span> resultB<span class="token punctuation">,</span> resultC<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// add two numbers remotely using observable

let resultA, resultB, resultC;

function addAsync(num1, num2) {

// use ES6 fetch API, which return a promise

// What is .json()? https://developer.mozilla.org/en-US/docs/Web/API/Body/json

return fetch(`http://www.example.com?num1=${num1}&num2=${num2}`)

.then(x => x.json());

}

addAsync(1, 2)

resultA = success;

return resultA;

})

.then(success => addAsync(success, 3))

resultB = success;

return resultB;

})

.then(success => addAsync(success, 4))

resultC = success;

return resultC;

})

console.log('total: ' + success)

console.log(resultA, resultB, resultC)

});

Xem thêm tại đây:

6. Tham số mặc định

Tham số mặc định trong Javascript cho phép chúng ta khởi tạo giá trị ban đầu cho tham số đầu vào của hàm nếu chúng ta gọi hàm đó mà không truyền đối số hoặc undefined.

Ví dụ nếu chúng ta không truyền đối số cho hàm sayGreeting, nó sẽ undefined

<span class="token keyword">function</span> <span class="token function-variable function">sayGreeting</span> <span class="token operator">=</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span>

<span class="token function">sayGreeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Hello undefined</span>

sayGreeting() // Hello undefined

Với ES6 chúng ta có thể đặt giá trị mặc định cho tham số đầu vào như thế này:

<span class="token keyword">function</span> sayGreeting <span class="token operator">=</span> <span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"Sunner"</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span>

<span class="token function">sayGreeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Hello Sunner</span>

function sayGreeting = (name = "Sunner") => console.log('Hello ' + name)

sayGreeting() // Hello Sunner

7. Modules

Khi viết code chúng ta thường có những hàm với chức năng/mục đích cụ thể, những hàm liên quan này chúng ta tách ra … được gọi là module.
Ví dụ chúng ta có module tính toán với các hàm cộng, trừ chẳng hạn, ví dụ:

<span class="token comment">// calculation.js</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">sub</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// calculation.js

export function add(a, b) {

return a + b;

}

export function sub(a, b) {

return a - b;

}

Chúng ta sử dụng từ khóa export để “chìa ra” cho các file khác có thể import vào để sử dụng, ví dụ:

<span class="token comment">// main.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> add<span class="token punctuation">,</span> sub <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./calculation.js'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token function">sub</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>

// main.js

import { add, sub } from './calculation.js';

let a = add(1, 2); // 3

let b = sub(2, 1); // 1

8. Destructuring

Xem qua ví dụ dưới cùng mình nha:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'Sunner'</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span>
    address<span class="token operator">:</span> <span class="token string">'16 Ly Thuong Kiet St'</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> name <span class="token operator">=</span> user<span class="token punctuation">.</span>name
<span class="token keyword">let</span> age <span class="token operator">=</span> user<span class="token punctuation">.</span>age
<span class="token keyword">let</span> address <span class="token operator">=</span> user<span class="token punctuation">.</span>address

let user = {

name: 'Sunner',

age: 19,

address: '16 Ly Thuong Kiet St'

}

let name = user.name

let age = user.age

let address = user.address

Có thể thấy là với object user ở trên và mình muốn tạo biến để lưu từng giá trị ở trong đó thì phải viết lại user. khá mất thời gian.

Với destructuring thì chúng ta có thể làm như sau:

<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> address <span class="token punctuation">}</span> <span class="token operator">=</span> user

1 2	<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> address <span class="token punctuation">}</span> <span class="token operator">=</span> user

Nếu muốn đổi tên biến name thành username, chúng ta làm như sau:

<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> username<span class="token punctuation">,</span> age<span class="token punctuation">,</span> address <span class="token punctuation">}</span> <span class="token operator">=</span> user

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span> <span class="token comment">// Sunner</span>

let { name: username, age, address } = user

console.log(username) // Sunner

Đơn giản hơn đúng không.
Destructuring cho phép chúng ta trích xuất các phần của object hoặc array.

9. Class

Trước ES6, JS không có class nên chúng ta thường dùng hàm kiểu thế này.

<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">introduce</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">My name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Dot'</span><span class="token punctuation">)</span>
person<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

function Person(name) {

this.name = name;

}

Person.prototype.introduce = function () {

console.log(`My name is ${this.name}`)

}

let person = new Person('Dot')

person.introduce();

Với ES6, chúng ta có thể viết rõ ràng hơn, dễ hiểu hơn cho những ai đã biết các ngôn ngữ như C#, Java …

<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token function">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">My name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span>‘Dot’<span class="token punctuation">)</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

class Person {

constructor(name) {

this.name = name;

}

introduce() {

console.log(`My name is ${this.name}`)

}

let person = new Person(‘Dot’);

Ngoài ra còn thêm các tính năng hay ho của ES6 nữa như Proxy, Symbol … bạn có thể tìm hiểu thêm ở đây https://github.com/lukehoban/es6features

Trên đây không phải là tất cả tính năng của ES6 mà chỉ là một số tính năng hay và hữu ích đối với mình. Nếu bạn biết tính năng nào hay thì comment cho mình học hỏi thêm với nhea
Cảm ơn bạn đã dành thời gian đọc bài.

Nguồn nè: https://medium.com/javascript-in-plain-english/9-es6-features-every-javascript-developer-should-know-b1f2915e7add

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo