Tìm hiểu javascript.md

Callback

Callback là việc 1 function được truyền vào 1 function khác thông qua tham số của function đó. Và được gọi khi 1 function khác đã thực thi xong.

Ví dụ:

function getName (name, alertMessage) {
    var message = 'Hello ' + name;

    return alertMessage(message);
}

getName('Tien Nguyen', function (message) {
    alert(message);
});

Tại sao phải dùng callback: vì Javascript là 1 ngôn ngữ bất đồng bộ. Tức là khi chạy từ trên xuống dưới nó sẽ không chờ đợi 1 hàm nó đó đến khi xử lý xong mà nó sẽ tiếp tục chạy sang hàm khác. Chính vì vậy mà callback sinh ra để xử lý việc này, nó sẽ được gọi khi 1 hàm nào đó xử lý xong.

Ví dụ có không có callback:

console.log('1');
console.log('2');
console.log('3');

Có callback

console.log('1');

setTimeout(function afterTwoSeconds() {
  console.log('2');
}, 2000)

console.log('3');

Promise

Promise là một cơ chế trong JavaScript giúp thực thi các tác vụ bất đồng bộ mà ko bị callback hell. Tức là đôi khi ta phải xử lý lần lượt các dữ liệu: lấy user -> lấy post -> lấy comment thì phải lồng các callback vào nhau:

api.getUser('api-url', function(err, user) {
  if (err) throw err
  api.getPostsOfUser(user, function(err, posts) {
    if (err) throw err
    api.getCommentsOfPosts(posts, function(err, comments) {
      // vân vân và mây mây...
    })
  })
})

Có thể dùng callback để lý:

api.getUser('pikalong')
  .then(user => api.getPostsOfUser(user))
  .then(posts => api.getCommentsOfPosts(posts))
  .catch(err => { throw err })

Để tạo 1 Promise:

new Promise(function(resolve, reject) {
})

Trong đó class Promise sẽ được truyền vào 1 callback có 2 tham số:

1. resolve: dùng khi tác vụ thành công
2. reject: dùng khi thất bại

Ví dụ khi dùng Promise để xử lý:

function getData () {
    return new Promise(function (resolve, reject) {
        fetch('http://api.icndb.com/jokes/random')
            .then(data => {
                resolve(data);
            })
            .catch(error => {
                reject(error);
            });
    });
}
var promise = getData();

promise.then((data) => {
    console.log(data);
}).catch((error) => {
    console.log(error);
});

Async / Await

Nó được xây dựng dựa trên Promise.

1. Async:

• khai báo một hàm bất đồng bộ
• tự động biến đổi một hàm thông thường thành một Promise.
• luôn luôn trả về 1 Promise, giá trị của resolve sẽ là giá trị mà hàm return về.

2. Await

• tạm dừng việc thực hiện các hàm async.
• chỉ có thể được sử dụng bên trong các function async.
• Async function sẽ thực thi như các function thông thường cho đến khi gặp từ khóa await. Các câu lệnh ở sau await sẽ phải đợi đến khi promise trả về kết quả.

Ví dụ thay vì khai báo 1 Promise thì ta dùng async, await:

async function getData() {
    
    var data = await fetch('http://api.icndb.com/jokes/random');

    return data;
}
getData().then(data => {
    console.log(data);
}).catch((error) => {
    console.log(error);
});

Array

Tham khảo tại đây

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elephant",
        "size": "big",
        "weight": 5000
    },
    false
]

.map

Nếu chúng ta muốn tạo ra mảng mới với cân nặng của tất cả các phần tử *2 lần

animals.map(elm => elm.weight * 2); // return array

.reduce

Nếu chúng ta muốn tỉnh tổng của các con vật

animals.reduce((weight, elm, index) => weight + elm.weight, 0); // return number 5165
animals.reduce((weight, elm, index) => weight + elm.weight, 1); // return number 5166
// Trong đó weight là giá trị ta muốn cộng dồn
// 0 hoặc 1 là giá trị khởi tạo của weight lúc đầu

.every

Muốn kiểm tra các phần tử của mảng có đúng với điều kiện hay ko

animals.every((item) => {
	return item === false; // return boolean false vì chỉ có 1 elm là false
});

animals.every((item) => {
	return item; // return boolean false vì có 1 elm là false
});

animals.every((item) => {
	return true; // return boolean true
});