Important knowledge about ES6

es6.md

ES Important notes

let, const

let

• có thể sử dụng để tạo các biến global, local.
• nếu được định nghĩa trong 1 scope cụ thể {} khi ra ngoài khỏi scope em sẽ không thể access được biến đó.

Ví dụ 1:

    for(let i = 0; i < 10; i++) {
        // biến i có thể được sử dụng ở đây
    }
    // biến i không thể sử dụng ở đây - lỗi undefined

Ví dụ 2:

    if(true){
        let name = "Emma";
    }
    // biến name không thể sử dụng ở đây - lỗi undefined

• Một biến đã được khai báo với let sẽ không thể được khai báo lại

    let name = "Huyen"
    // ....
    // ....
    let name = "Emma" // Lỗi: SyntaxError: Identifier "name" has already been declared

const

• Sử dụng để định nghĩa các biến không được thay đổi (constant)

const PI = 3.14

Arrow function

• Arrow function giúp cho việc khởi tạo hàm ngắn gọn hơn.

Ví dụ:

    // Cú pháp cũ:
    function addTwoNumer(numb1, numb2) {
      return numb1 + numb2;
    }

    // Sử dụng Arrow function:
    var addTwoNumbner = (numb1, numb2) => { return numb1 + numb2; }

Default param value

• Là cách gán giá trị mặc định cho tham số của hàm nếu không có giá trị nào được truyền khi gọi hàm
• Lưu ý: trong khi xử lí một hàm, nếu một tham số không đươc truyền giá trị thì có sẽ được gán là undefined.

Ví dụ

    // Không dùng default param value:
    function greet(name) {
      if(typeof name == undefined) {
        name = "Emma";
      }
    }

    // Sử dụng default param value:
    function greet(name="Emma") {
        // code
    }

• Em có thể đặt giá trị mặc định của param ở bất cứ vị trí nào ( nhưng thường thì dồn về phía bên phải)

    function test(a = 10, b, c =100 , d) {
        console.table(a, b, c, d);
    }
    test(undefined, 10); // 10,10,100,undefined
    test(100); // 100, undefined, 100 , undefined
    test(); // 10, undefined, 100, undefined

Destructuring assigment

• Destructuring object:

    let user = {name: "Emma", age: 18};

    // không dùng destructuring assigment
    let name = user.name; // name = Emma
    let age = user.age; // age = 18

    // destructuring assigment
    let name, age  = user; // name = Emma, age = 18

• Destructuring array:

    let numberArray = [1, 2, 3, 4];
    let [numb1, numb2, numb3, numb4] = numberArray; // numb1 = 1, numb2 = 2, numb3 = 3, numb4 = 4

Define string using backtick character.

• Giúp cho việc chèn biến vào chuỗi được đơn giản và khoa học hơn

    // style cũ:
    
    let name = "Emma";
    let hello = "Hello " + name; // Hello Emma

    // style mới sử dụng backtick:
    
    let name = "Emma";
    let hello = `Hello ${name}` // Hello Emma

Conditional expression

• Sử dụng để rút ngắn cấu trúc if..else đơn giản.
• Format: <boolean-expression> ? <expression-1> : <expression-2>

    // sử dụng if..else
    let hello = "";
    let name = "Emma";
    if(name == "Emma") {
        hello = "Hello Emma";
    } else {
        hello = "Hello friend";
    }

    // sử dụng conditional expression
    let name = "Emma"
    let hello = name == "Emma" ? "Hello Emma" : "Hello friend" // hello = "Hello Emma"

Callback

• Callback có thể hiểu đơn gỉan là một function được thực thi sau khi một function khác kết thúc.
• Trong JS, function cũng được coi là một object và một function có thể nhận một function như một tham số.

Tại sao lại cần phải có callback??

• Javascript là ngôn ngữ "hướng sự kiện" ( event driven language ), thay vì đợi phản hồi trước khi chuyển sang event ( câu lệnh tiếp theo), JS sẽ tiếp tục thực hiện các event (câu lệnh) khác sau đó.

Check ví dụ dưới:

    function first(){
      console.log("Nấu cơm");
    }
    
    function second(){
      console.log("Ăn cơm");
    }
    
    first();
    second();

Function first() sẽ được thực hiện trước function second(). Màn hình sẽ hiển thị kết quả như sau:

// "Nấu cơm"
// "Ăn cơm"

Nhưng điều gì sẽ xảy ra nếu trong function first() có chứa một số logic và phải mất 0.5s để có thể xử lí xong? Ví dụ như function first() sẽ phải gọi lên một API nào đó để lấy dữ liệu ... Để mô phỏng việc này, anh sẽ dùng một function có sẵn của js là setTimeOut, function setTimeOut sẽ gọi đến một hàm sau một khoảng thời gian.

    function first(){
      // mô phỏng việc function first delay 0.5s
      setTimeout( function(){
        console.log("Nấu cơm");
      }, 500 );
    }
    
    function second(){
      console.log("Ăn cơm");
    }
    
    first();
    second();

Khi thực thi đoạn code trên em sẽ thấy output như sau:

// "Ăn cơm"
// "Nấu cơm"

Mặc dù first() được gọi trước second() nhưng output vẫn là "Ăn cơm" rồi mới tới "Nấu cơm". \

Điều này không có nghĩa là JS không thực hiện các hàm đúng thứ tự được khai báo mà JS không chờ function first() thực hiện xong rồi mới chuyển tới function second()

Vấn đề trên có thể được giải quyết bằng việc dùng callback.

    function first(callback){
      // mô phỏng việc function first delay 0.5s
      setTimeout( function(){
        console.log("Nấu cơm");
        callback();
      }, 500 );
    }
    
    function second(){
      console.log("Ăn cơm");
    }
    
    first(second);

Ví dụ thực tế khác em xem ở đây nhé:

https://gist.github.com/DonerKebab/2937a33b4bcba81a857d92bd16dfbd11