Khái quát JavaScript

Trần Đức Lĩnh

Values & Type.

  • Primitive types:

    • String (Trả về kiểu chuỗi).

      var str = "string"
    • Number (Trả về kiểu số).

      var num = 100
    • Boolean (Trả về kiểu đúng sai).

      var bool = true;
      var boole = false;
  • Special types:

    • null (Trả về kiểu rỗng).

      • Nhưng trả về là một Object.

        var nul = null;
    • undefined (Khi biến không có giá trị (value) thì mặc định sẽ là undefiend).

      • Trả về kiểu không xác định
      var unde = undefined;
    • NaN (Trả về kiểu không phải số).

      var nan = NaN;
  • Reference types:

    • object
    • array
    • symbol (ES6)
    • Trong đó kiểu dữ liệu có dạng object & array có thể dùng Properties được truy xuất bằng Object:

      • Not notation
      const obj = {
      like: "orange"
      }
      // obj.like
      • Bracket notation
      const obj = Object;
      obj['like'] = 'red';
      // obj['like']

Coercion.

  • Explicit.

    • Ép kiểu một giá trị theo cách mình muốn, dễ dàng nhận biết và chủ động biết được kết quả.
  • Implicit

    • Dạng ép kiểu ngầm đinh bên trong JS, không thể kiểm soát được những thay đổi đó.

Variable.

  • var (Là một function-scope)

Scope.

  • Global Scope:

    • Là một biến bên ngoài, phạm vi là rất lớn.
    const glo = 100;
  • Local Scope (Nested Scope):

    • Phạm vi nằm bên trong dấu ngoặc nhọn
    { let i = 0 }
  • Function Scope:

    • Mỗi Function đều có phạm vi riêng, chỉ truy xuất được những biến bên trong phạm vi đó.
    function funC () {
    let a = 200;
    }
  • Lexical Scope:

    • Phạm vi của một function bên trong function khác.
    function FunC (x) {
        return function (y) {
            return x + y
        }
    }
    
    const a = FunC (50);
    a(50);
    // 100
  • Scope Chain:

    • Thiết lập cho mỗi scope một function nhất định, mỗi function lại có một Nested Scope riêng. Mỗi function được định nghĩa bên trong function khác đều là Local Scope được liên kết với function bên ngoài.
    function funC () {
        let a = 200;
        return function () {
            console.log(a);
        }
    }
    
    let my_var = funC();
    my_var();
  • Closures: Có liên quan đến Lexical Scope, bên trong scope có thể truy cập mọi thứ đã khai báo ở scope cha

    function funC  (x) {
       const a = x;
        return function () {
            return a + 1;
        }
    }
    
    const my_var = funC(100);
    // 101

Hoistings.

Hành động mặc định của JS, không thể thực thi dòng lệnh khi đưa chúng lên trên biến đã khai trước đó, function thì không có vấn đề gì.

console.log(x);
x = 'Hoisting';
// ReferenceError: x is not defined;
func("Hoisting");

function func(x) {
    console.log(x);
    // Hoisting
};

Equality.

  • == (So sánh giá trị)
  • === (So sánh giá trị và kiểu dữ liệu)

Strict mode.

  • Kiểm tra cú pháp ở chế độ nghiêm ngặt.

    • Không dùng với biến undefined.
    • Không đặt tên trùng từ khóa.
    • Không đặt 2 thuộc tính trùng nhau trong 1 object.
    • Không truyền 2 tham số cùng tên nhau trong 1 function.
    • Không định nghĩa trên cơ số 8.
    • Không được dùng câu lệnh with. Gán giá trị trong một thuộc tính read-only đối tượng.
    • Thay đổi đối số trong object.
    • EVAL không được phép tạo biến.

Polyfill.

Trình duyệt cũ không hỗ trợ các phương thức mới, sử dụng các đoạn mã thuần để thay thế các phương thức đó.

JSON.

  • JavaScript Object Notation.

    • Là một định dạng dữ liệu.

      • Chuyển đổi từ dạng JavaScript type -> JSON

        • JSON.Stringify()
      • Chuyển đổi từ dạng JSON -> JavaScript type

        • JSON.Parse()

ECMA (ES6).

  • Variable:

    • let (Tầm vực hoạt động chỉ bên trong chứa nó)
    • const (Tầm vực hoạt động chỉ bên trong chứa nó. Nhưng const không thể gán giá trị mới sau lần tiếp theo, ngoại trừ array và object)
  • Arrow Functions

    • Là một loại function đặc biệt, viết ngắn gọn hơn, được sử dụng chung với this. thay thế cho .bind()
  • Template Strings

    • Dùng để ghép chuỗi trong JS
  • Object literals

    • Cho phép khai báo tắt các thuộc tính của object cùng với tên.
  • Destructurings

    • Tách biến từ các đối tượng, chuỗi hoặc mảng.
  • Rest parameters

    • Có liên quan đến Destructuring, sử dụng (...) để nhận nhiều tham số
  • Spread operator

    • Dùng (...) để gọp tất cả các phần tử của mảng
  • Default value in parameter

    • Tham số mặc định khi không có giá trị truyền vào
  • Class

    • Class Inheritance
    • Sử dung OOP thông qua từ khóa class()
  • Promise

    • Xử lý bất đồng bộ
  • Multiline String in ES6

    • Trong giống như Template Strings nhưng được thể hiện qua nhiều dòng
  • Module

    • Phân tách các file .js ra thành nhiều module (Được sử dụng nhiều trong Reactjs)

Functions.

  • Function Statement/Declarations.

    • Khai báo tên nằm sau từ khóa function có tham số truyền vào.
    function func(x) {
        // code
    };
  • Function Expressions.

    • Named Function Expressions (Kiểu khai báo có tên và được gán cho biến, là một điển hình của Function Expressions).
    const a = function func(x) {
        // code
    }
    • Anonymous Functions (Là một hàm ẩn danh, khi khai báo một hàm, được tạo ra và khi biên dịch và xử lý tới vị trí của nó).
    const func = function(x) {
    // code
    }
  • Function Constructor.

    • Function được khai báo với từ khóa New
    const func = new Function('x', 'return ++x');
  • Special Functions.

    • Arrow Functions ((ES6) là một cách viết từ phiên bản 2015).
    const func = (x) => {
        // code
    }
    • Genertor functions (Yield) (Có khả năng tạm ngừng thực thi trước khi hàm kết thúc, có thể tiếp tục chạy ở 1 thời điểm khác).
    function* func(x) {
        // code
    }
  • Currying Function.

    • Là cách viết tách một function nhận nhiều tham số truyền vào, tách function đó ra thành nhều function con, mỗi function nhận 1 tham số truyền vào.

      • Cách viết function.

        • Thông thường.
        const sum = (a, b) => a + b;
        • Tối ưu.

          • Viết bằng function.
          const curriedSum = function (a) {
              return function (b) {
                  return (a + b)
              }
          }
          
          curriedSum(4)(5);
          • Viết bằng Arrow function.
          const curriedSum = a => b => a + b
          
          curriedSum(4)(5)	
  • Immediately Invoked Function Expressions (IIEs) / Self-Invoking Functions.

    • Là một function sẽ thực thi ngay tức khắc, IIEs có scope riêng, việc khai báo trùng biến bên ngoài cũng không có vấn đề gì.
    (function funC() {
        // code
    })();
  • Higher-Order Function

    • Rỗng.

Object prototype.

  • Các object kế thừa các tính năng từ một object khác. Tất cả các object trong JS đều có một prototype.
  • Các object đều kế thừa properties và methods từ prototype của chính nó.
  • Có thể thêm một thuộc tính hoặc phương thức bên ngoài hàm tạo.
  • Tất cả các properties và methods thông qua prototype qua một hàm tạo đều nằm trong (proto) : Object

Callback function.

  • Truyền một hàm vào bên trong hàm khác với tư cách là một tham số, kho đó hàm đưuọc truyền vào được gọi là một callback

      1. Là hàm
      1. Được truyền qua đối số
      1. Được gọi lại
    function my_func (param) {
        if (typeof param === 'function') {
            param("hello");
        }
    };
    
    function my_call (value) {
        console.log(value);
    };
    
    my_func(my_call);

Promise.

  • Sync (Đồng bộ).
  • Async (Bất đồng bộ).

    • Callback sẽ xử lý các trường hợp bất đồng bộ.
    • setTimeout, etInterval, fetch, XMLHttpRequest, file reading...
    • ^ Giải quyết vấn đề phía trên.

      • Callback hell
      • Pyraid of dom

Chi tiết hơn về Promise.

  • Tạo một Promise.

    • Sử dụng Object Constructors để xây dựng Promise.
    • Truyền vào Object Constructor một Executor Function.
    • Bên trong Excutor Function có 2 tham số dạng hàm.

      • resolve() (Sẽ trả về khi thành công).
      • reject() (Sẽ trả về khi thất bại).
    • Các phương thức trong Promise

      • .then(callback) : Sẽ được thực thi khi Promise được resolve()
      • .cat(callback) : Sẽ được thực thi khi Promise được reject()
      • .finally(callback) : Sẽ được thực thi cho dù Promise trả về bất cứ phương thức gì.
      const prom = new Promise (
      function(resolve, reject) {
          resolve('Done!!!');
          // reject('Error!!!')
          }
      )
      
      prom
          .then(
              function(x) {
                  console.log(x);
              }
          )
          .catch(
              function(x) {
                  console.log(x);
              }
          )

Trạng thái Promise.

  • Trạng thái Promise

    • Pendding: Chờ đợi trạng thái xảy ra.
    • Fulfilled: Trạng thái khi đã thành công (resolve).
    • Rejected: Trạng thái khi thất bại (reject).

Promise Chain.

.then() được nối tiếp với nhau, phụ thuộc vào nhau, tham số .then() thứ nhất sẽ truyền vào .then() thứ hai...khi được return()

const promise = new Promise (
    function(resolve, reject) {
        resolve();
    }
)

promise.then(function() {
    return 1;
})
.then(function(x) {
    console.log(x);
    return 2;
})
.then (function(x) {
    console.log(x);
    return 3;
})
.then (function(x) {
    console.log(x);
})
  • Các trường hợp return Promise.

    • Nếu .then() thứ nhất không return ra một Promise thì sẽ thực thi các .then() tiếp theo.
    const promise = new Promise (
        function(resolve) {
            resolve()
        }
    )
    
    promise
    .then(function() {
    
    })
    .then(function() {
        return 2;
    })
    .then(function(x){
        console.log(x);
        return ++x;
    })
    .then(function(x) {
        console.log(x);
    })
  • Nếu retrun ra Promise, .then() tiếp theo phải đợi .then() trước đó thực thi xong.
const promise = new Promise (
    function (resolve) {
        resolve();
    }
)

promise
.then(function() {
    return new Promise (function (resolve) {
            setTimeout(function() {
                resolve("Done")
            }, 3000);
        })
})

.then(
    function(x) {
        console.log(x);
    }
)

Promise method.

  • Promise.resolve() (Luôn luôn trả về resolve())
const promise = Promise.resolve("Done!!!");
promise
    .then(
        function(result) {
            console.log(result);
        }
    )
  • Promise.reject() (Luôn luôn trả về reject())
const promise = Promise.reject("Error...");

promise
    .catch(
        function(result) {
            console.log(result);
        }
    )
  • Promise.all() (Xử lý đồng thời nhiều Promise, bất đồng bộ và không phụ thuộc vào nhau, có thể sử dụng dữ liệu của nhiều Promise để kết hợp vào nhau)
const promise_1 = new Promise(
    function (resolve) {
        setTimeout(function () {
            resolve([1])
        }, 2000);
    }
);

const promise_2 = new Promise(
    function (resolve) {
        setTimeout(function () {
            resolve([2, 3])
        }, 4000);
    }
);


Promise.all([promise_1, promise_2])
    .then(
        function (result) {
            const result_ = result[0].concat(result[1]);
            console.log(result_);
        }
    )

Fetch.

  • Lấy nội dung từ API từ phía back-end, sau khi có được URL. Sau khi fetch kết quả nhận được một JSON/XML, tiếp theo sẽ sử dụng JSON.parser để nhận về kiểu dữ liệu trong JavaScript và Render ra giao diện HTML.

    • HTML
    <div id="render"></div>
    • JavaScript
    const fetchAPI = 'https://jsonplaceholder.typicode.com/comments';
    
    fetch(fetchAPI)
        .then (
            response =>{
                return response.json('')
            }
        )
    
        .then (
            datas => {
                const htmls = datas.map (
                    data => (`<li>${data.body}</li>`)
                )
                const html = htmls.join('');
                console.log(typeof html);
                document.getElementById('render').innerHTML = html
            }
        )

Mock API.

  • CRUD (- REST API).

    • Create (POST).
    • Read (GET).
    • Update (PUT/PATCH).
    • Delete (DELETE).
  • npm i json-server.
  • Application Postman.

Object.

  • Object Method (Object Literal).

    • Là một phương thức của Object, có chứa function bên trong.
    const obj = {
        color: 'red',
        hex: function(x) {
            console.log(x);
        }
    };
    
    obj.hex('#000');
  • Object Constructors (Contructor Function).

    • Xây dựng một đối tượng nhanh hơn so với Object Method. Sử dụng cú pháp New để tạo đối tượng.
    function People (height, sex) {
        this.height = height;
        this.sex = sex;
    }
    
    const woman = new People ('1m6', 'female');
    
    console.log(woman);