Tìm hiểu nhanh ES6 qua Tips và Best practice

Tìm hiểu nhanh ES6 qua Tips và Best practice

Chào các bạn!

Hôm nay mình sẽ giới thiệu về ES6 và chia sẻ cách mà mình hay học một ngôn ngữ mới, hay một bản update của ngôn ngữ một cách nhanh chóng và hiệu quả. Sự thay đổi và cải thiện là cần thiết ở mọi thứ, nhưng tốc độ thay đổi các ngôn ngữ lập trình là rất nhanh đòi hỏi mọi người phải nắm vững căn bản và update hằng ngày.

Riêng mình lại không thích đọc hết toàn bộ docs của nhà phát hành vì có khi nó quá dài mà mình không đủ thời gian và công lực để đọc nên mình luôn chọn shortcut để đi. Và các từ khóa mình chọn sẽ là “best practice”, “tip”, “cheatsheet” + {vấn đề cần tìm}, đây là những bài viết những nội dung đã được tóm tắt và rất dễ đọc dễ hiểu hơn. Và đương nhiên bạn cũng không thể bỏ qua hoàn toàn docs của nhà phát hành nhưng hãy đụng đến nó khi bạn gặp vấn đề phức tạp cần hiểu sâu về cơ chế của mình.

Và sau đây là cách mình tìm hiểu ES6 Vậy trước tiên hãy biết ES6 là gì ES6 là từ viết tắt cuả ECMAScript6 nó là một scripting language ở đời thứ 6 và ra đời năm 2015. Thực tế thì ES6 và javascript là như nhau các bạn có thể sử dụng nó thay thế cho nhau.

1. var, let và const

Bên cạnh bé var huyền thoại và độc nhất es6 đã sinh ra 2 bé mới để mọi người có thể chứa giá trị là let và const. Không giống như bé var, scope của let và const không dựa vào top của {} Sử dụng var

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // undefined
Code language: JavaScript (javascript)

đổi var thành let trong ES6

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // 'Meow Mix'
Code language: JavaScript (javascript)

Sự thay đổi ở behavior này chỉ ra là bạn cần phải thật cẩn thận khi refactor lại code mà sử dụng var. Một cách mù quáng mà replace tất cả biến var thành let sẽ quăng ra lỗi Note: let và const là block scoped. Vì thế khi bạn tham chiếu đến nó trước khi nó được định nghĩa sẽ quăng ra lỗi.

console.log(x); // ReferenceError: x is not defined

let x = 'hi';
Code language: JavaScript (javascript)

Best Practice:
Hãy để tất cả biến var ở trong các đoạn “di sản” code để chỉ ra nó cần cẩn thận khi refactor. Và với es6 thì hãy quên var đi và dùng let thay thế cho var khi biến đó có thể đổi giá trị nhiều lần và const cho biến hằng.

2. Strings

Trong Es6 đã hỗ trợ thêm cho chúng ta đó là 2 hàm includes() và repeat() cho chuỗi .includes( )

const string = 'food';
const substring = 'foo';

console.log(string.includes(substring)); // true
Code language: JavaScript (javascript)

.repeat( )

// String.repeat(numberOfRepetitions)
'meow'.repeat(3); // 'meowmeowmeow'
Code language: JavaScript (javascript)

Template Literals Sử dụng Template Literals, chúng ta có thể nhập một string với các kí tự đặc biệt một cách dễ dàng hơn không cần thông qua kí tự escape
ES5

var text = "This string contains \"double quotes\" which are escaped.";
Code language: JavaScript (javascript)

ES6

let text = `This string contains "double quotes" which don't need to be escaped anymore.`;
Code language: JavaScript (javascript)

Template Literals hỗ trợ chúng ta dễ dàng cộng chuỗi với biến giá trị hơn ES5

var name = 'Tiger';
var age = 13;
console.log('My cat is named ' + name + ' and is ' + age + ' years old.');
Code language: JavaScript (javascript)

ES6:

const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);
Code language: JavaScript (javascript)

Ở ES5, chúng ta phải làm như sau để xuống hàng

var text = (
    'cat\n' +
    'dog\n' +
    'nickelodeon'
);
Code language: JavaScript (javascript)

hoặc:

var text = [
    'cat',
    'dog',
    'nickelodeon'
].join('\n');
Code language: JavaScript (javascript)

Template literals có thể xuống hàng mà không cần ‘\n’ rất tốt

let text = ( `cat
dog
nickelodeon`
);
Code language: JavaScript (javascript)

Template Literals có thể chấp nhận expressions

let today = new Date();
let text = `The time and date is ${today.toLocaleString()}`;
Code language: JavaScript (javascript)

3. Classes

Class của JavaScript ngày xưa

function Person(name, age, gender) {
    this.name   = name;
    this.age    = age;
    this.gender = gender;
}

Person.prototype.incrementAge = function () {
    return this.age += 1;
};
Code language: JavaScript (javascript)

Class của ES6 bây giờ đã rất giống với các ngôn ngữ lập trình kahsc

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }

    incrementAge() {
      this.age += 1;
    }
}
Code language: JavaScript (javascript)

và bạn còn có thể dụng extends keyword:

class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
        super(name, age, gender);
        this.occupation = occupation;
        this.hobby = hobby;
    }

    incrementAge() {
        super.incrementAge();
        this.age += 20;
        console.log(this.age);
    }
}
Code language: JavaScript (javascript)

4. Parameters

Chúng ta có rất nhiều dạng parameter truyền vào function như là default values, indefinite arguments, và named parameters. ES6 Default Parameters

function addTwoNumbers(x=0, y=0) {
    return x + y;
}
Code language: JavaScript (javascript)

Rest Parameters Ở ES5,

function logArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
Code language: JavaScript (javascript)

ES6 thông qua rest operator chúng ta có thể đưa một số params không biết trước vào

function logArguments(...args) {
    for (let arg of args) {
        console.log(arg);
    }
}
Code language: JavaScript (javascript)

Named Parameters ES5 xử lý named parameters thông qua options object

function initializeCanvas(options) {
    var height = options.height || 600;
    var width  = options.width  || 400;
    var lineStroke = options.lineStroke || 'black';
}
Code language: JavaScript (javascript)

Và ở ES6 chúng ta có thể làm điều đó ngắn gọn hơn rất nhiều

function initializeCanvas(
    { height=600, width=400, lineStroke='black'}) {
        // Use variables height, width, lineStroke here
    }
Code language: JavaScript (javascript)

5. Maps

Maps là một kiểu dữ liệu rất cầnt thiết trong Javascript. ES6, Bạn có thể tạo ra hash maps qua Object

var map = new Object();
map[key1] = 'value1';
map[key2] = 'value2';
Code language: JavaScript (javascript)

Maps hỗ trợ chúng ta các hàm như set, get, search

let map = new Map();
> map.set('name', 'david');
> map.get('name'); // david
> map.has('name'); // true
Code language: JavaScript (javascript)

Và điều ngon nhất là nó không còn chỉ giới hạn string mà mình có thể sử dụng tất cả kiểu ở key và sẽ không bị chuyển(type-cast) thành string

let map = new Map([
    ['name', 'david'],
    [true, 'false'],
    [1, 'one'],
    [{}, 'object'],
    Code language: JavaScript (javascript)

[function () {}, 'function']]);
for (let key of map.keys()) {
   console.log(typeof key); // > string, boolean, number, object, function
}Code language: JavaScript (javascript)

Note: Bạn sẽ không dùng map.get được ở các kiểu dữ liệu phức tạp như object và function. Bạn có thể dùng vòng lặp với map qua .entries()

for (let [key, value] of map.entries()) {
    console.log(key, value);
}
Code language: JavaScript (javascript)

6. Getter and setter functions

ES6 đã bắt đầu hỗ trợ cho chúng ta getter và setter cùng với class

class Employee {

    constructor(name) {
        this._name = name;
    }

    get name() {
      if(this._name) {
        return 'Mr. ' + this._name.toUpperCase();  
      } else {
        return undefined;
      }  
    }

    set name(newName) {
      if (newName == this._name) {
        console.log('I already have this name.');
      } else if (newName) {
        this._name = newName;
      } else {
        return false;
      }
    }
}

var emp = new Employee("James Bond");

// uses the get method in the background
if (emp.name) {
  console.log(emp.name);  // Mr. JAMES BOND
}

// uses the setter in the background
emp.name = "Bond 007";
console.log(emp.name);Code language: JavaScript (javascript)

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.