DEV Community: Nguyen-Xuan-Son

Pure function in JS

Nguyen-Xuan-Son — Wed, 23 Jun 2021 17:16:48 +0000

Hôm nay nhân ngày mát trời, chúng ta sẽ quay lại với JS nhé các bạn (Liên quan vc ^^ ). Thực ra gần đây mình không viết nhiều về JS lên lần này cố tình quay lại với nó nhé. Kì này chúng ta sẽ nói về Pure function, một cách viết function rất hữu hiệu để các bạn base code dự án nhé.

1. Mở đầu

Gần đây mình tình cờ đọc được một khái niệm, đó chính là Pure function. Thực ra Pure function không hề mới, mình chắc là nếu bạn đi làm 1-2-... năm đã từng làm qua rồi, đặc biệt nếu bạn nào đã xây base dự án thì có lẽ bạn sẽ phải nghĩ ra những phần Until để cho member trong team dùng lại. Những hàm dùng chung cho toàn bộ dự án đó chính là Pure function, một Function thuần túy, rất thuần túy. Còn sao lại cần Pure (Thuần túy), điều kiện như thế nào thì được coi là Pure function thì các bạn hãy xem tiếp ở phần sau nhé.

Thực ra đây là một khái niệm về Pure function, nó không phải chỉ cho JS nhé, mà nó là áp dụng chung cho các ngôn ngữ. Nó đặc biệt hữu hiệu đối với bạn nào xây base dự án hoặc thích code những hàm dùng chung cho dự án.

https://i.pinimg.com/originals/9d/50/d3/9d50d3c1284cf6eccbd9437945b1a88d.jpg

Gần đây mình có nhận được phản hồi là bài viết cần cho thêm hình để dễ hình dung hơn, lên từ giờ mình sẽ cố gắng tìm hình mô tả thêm có các bạn dễ nhớ nhé. (Hình trên nó cũng chưa dễ nhớ lắm ^^ - thôi kệ - nhìn nó fun fun là được).

Ok, LET GOOOOOOO!

2. Chi tiết

Trước khi vào phần giải thích mình muốn các bạn xem 2 function này và so sánh xem chúng khác nhau ở điểm nào nhé.

const add = (x, y) => x + y;

add(2, 4); // 6

let x = 2;

const add = y => {
  x += y;
};

add(4); // x === 6 (the first time)

Pure function là gì?

Như các bạn có thể thấy ở trên thì Pure không hề phụ thuộc vào các biến bên ngoài. Nhưng để cụ thể hơn, hãy đọc khái niệm của nó đã nhé:

The function always returns the same result if the same arguments are passed in. It does not depend on any state, or data, change during a program’s execution. It must only depend on its input arguments.
The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.

Mình xin phép được dịch vắn tắt nó ra như thế này:

Function luôn luôn return ra cùng một giá trị nếu nó được truyền vào tham số là các giá trị giống nhau. Nó không phụ thuộc vào bất kì trạng thái nào, dữ liệu nào khi mà nó thực thi, nó chỉ phụ thuộc duy nhất vào tham số truyền vào function.
Kiểu function này không tạo ra bất kì thay đổi nào liên quan đến network request, input and output devices hay thay đổi data.

Đối với khái niệm 1: Các bạn có thể hiểu là 1 function luôn phụ thuộc vào tham số nó được truyền vào, nó không bao giờ được phụ thuộc dù là nhỏ nhất biến từ bên ngoài. Một Pure function luôn được return ra giá trị - điều này là tất nhiên vì nó đã không được change data bên ngoài thì nó phải return ra gì đó chứ. Và như vậy một Pure function sẽ cho ra cùng MỘT kết quả với N lần (N đến dương vô cùng) truyền tham số vào function. (Đấy - dễ hiểu đúng không nào các bạn ^^)

Đối với khái niệm 2: Có thể hiểu là Pure function không được làm cho data bên ngoài thay đổi, khi chạy Pure function không được làm cho app có hiện tượng gì ảnh hưởng đến các phần khác của hệ thống, hay nói cách khác là không được tạo ra các Side effects.

Mình sẽ trình bày rõ hai khái niệm này ở phần tiếp nhé. :v

Impure function là gì?

Các bạn đã biết Pure function là gì rồi, thì cũng chắc cần biết thêm Impure là gì. Impure là những function làm thay đổi data bên ngoài như ví dụ thứ 2 mình đã lấy ở bên trên nhé, khi bạn thay đổi giá trị của giá trị truyền vào function thì sẽ làm cho đầu ra của chúng ta thay đổi theo vì hàm này có phụ thuộc vào giá trị bên ngoài.

Side effects là gì?

Side effects là tất cả các sự tương tác với bên ngoài function từ bên trong nó. Nó có nghĩa là change data, call một hàm khác bên trong function (ở đây có nghĩa nếu một pure function call một Impure function thì nó không được coi là một Pure function, nhưng nếu một Pure function call một Pure function thì nó vẫn là Pure function).

Ở đây mình chỉ muốn các bạn phân biệt thật rõ 2 loại Pure function và Impure function để tránh nhầm lẫn về sau thôi nhé, chứ thực ra mỗi loại lại có chức năng riêng, nó không sinh ra để thay thế nhau, mà nó sinh ra là để hỗ trợ chúng ta viết code linh hoạt hơn thôi nhé.

Side effects có thể bao gồm một số phần mình liệt kê ở đây, nhưng hãy nhớ khái niệm bên trên mình trình bày nhé, nó là main nhất đó: Tạo một request, thay đổi data, hàm số có dùng Math.random(), lấy một cái thời gian không cố định nào đó ra, ....

Pure function dùng trong trường hợp nào?

Đây có lẽ là câu hỏi rất hay, Pure function được dùng trong trường hợp chúng ta muốn tạo ra các common code, ví dụ như là tính toán ngày chuyển nó sang một loại format khác, tính toán cộng một cái string nào đó để format con số, ..... tùy trường hợp mà chúng ta sẽ dùng như thế nào.

Nhưng dù có như thế nào thì hãy nhớ là chỉ truyền tham số và return ra giá trị thôi nhé. Bạn có thể làm gì đó với tham số tùy bạn, nhưng hãy luôn nhận thức mình đang viết một hàm dùng chung, dùng lại rất nhiều lần lên không được dùng bất kì thứ gì có liên quan đến Side effects và sau cùng hãy return giá trị đã tính toán đó ra nhé.

Tại sao Pure function là rất quan trọng?

Pure function để viết các hàm common nên có lẽ bạn đã ý thức được sự quan trọng của nó. Nó sẽ làm cho code của bạn linh hoạt hơn, có khả năng dùng lại nhiều hơn, thơm hơn (à, cái này thì còn tùy vào mũi của bạn và tâm trạng leader ngày hôm đó review code cho bạn ^^) hay là nếu các bạn muốn chỉnh common phần logic nào đó thì chỉ cần chỉnh trong Pure function nó không bao giờ gây lỗi cho phần khác ^^ ( ......... AMAZING ......... ).

3. Kết luận

Đó là tất cả những gì mình đã tìm hiểu được về Pure function, mong rằng nó có thể giúp các bạn hiểu được một phần nào đó về Pure function. Một thứ nghe có vẻ mới lạ nhưng lại được dùng rất nhiều trong các ngôn ngữ nói chung và các bạn ít nhiều cũng đã dùng nó.

SAU TẤT CẢ - Cám ơn các bạn đã luôn ủng hộ mình nhé.

4. Tham khảo

# JavaScript: What Are Pure Functions And Why Use Them?
# Master the JavaScript Interview: What is a Pure Function?
# What Is a Pure Function in JavaScript?
# Understanding Javascript Mutation and Pure Functions

IIFE in JS

Nguyen-Xuan-Son — Tue, 22 Jun 2021 16:06:23 +0000

Nếu các bạn có cơ hội đọc những code rất cũ hoặc đã từng maintain dự án dùng JS thuần thì chắc có lẽ đã gặp IIFE (Immediately Invoked Function Expression) và đã chắc đã có lần đặt câu hỏi tại sao lại dùng nó, nó được dùng với tác dụng gì??? Trong phần này chúng ta sẽ cùng tìm hiểu IIFE nhé.

Tuần vừa rồi mình vướng một số chuyện lên không có time viết bài, nhưng thật ra là mình lười ^^, về quê thì toàn chơi thôi - thế cho nhẹ đầu. Nhưng từ tuần này mình lại ra bài đều nhé, cập nhật tình hình thời tiết là hôm nay nóng lắm 38 - 40 độ, không có điều hòa chắc không sống được mất.

1. Mở đầu

IIFE là viết tắt của Immediately Invoked Function Expression, nó là một dạng viết Function trong JS và nó sẽ được chạy ngay sau khi nó được khởi tạo.

Dạng function này có rất nhiều lợi ích như: Sẽ làm block các biến global, đỡ tốn bộ nhớ (Vì khởi tạo cái là chạy luôn, sau đó sẽ được clean khỏi memory), sẽ không cần khởi tạo Function global tránh polluted (Ô nhiễm) Global namespace.

2. Chi tiết

Syntax

Trước khi nói đến IIFE chúng ta hãy xem một function bình thường được định nghĩa và được exucute như thế nào nhé.

function func() {
    // Do something
}

func();

Và như vậy khi chúng ta khai báo function đồng thời lại vô tình gắn nó vào memory sau đó gọi lại, nó sẽ là rất hay nếu như chúng ta gọi lại hàm này và coi nó như một hàm Common, gọi đi gọi lại nhiều lần. Khi đó cách khai báo function như trên là rất hợp lý, tuy nhiên hãy giả sử trường hợp là chúng ta chỉ cần gọi hàm đó 1 lần và ngay sau khi mà window được load xong chẳng hạn thì sẽ cần bỏ hàm đó vào trong $(document).ready() hoặc window.onload trong hợp như này thì nên dùng IIFE để memory được nhẹ, cùng như window object tránh ô nhiễm. Tại sao mình lại nói đến 2 vấn đề này thì các bạn hãy theo dõi tiếp nhé.

Còn bây giờ hãy nhìn syntax của IIFE nhé.

// 1
(function(params) {
    // Do something
})(paramsInput);

// 2
((params) => {
    // Do something
})(paramsInput);

// 3
;(function(params) {
    // Do something
})(paramsInput);

// 4
;((params) => {
    // Do something
})(paramsInput);

// 5
(function nameFunc(params) {
    // Do something
})(paramsInput);

Như các bạn đã thấy ở trên chúng ta có một số cách để khai báo IIFE. Nhưng mình chia làm 2 loại chính, một loại có tên function và loại còn lại không có tên function.

IIFE có thể viết mà không có tên function vì nó chỉ được chạy có một lần, tuy nhiên cũng có thể viết tên function trong trường hợp các bạn muốn đặt tên tường mình ra chút (more meaning). Và hãy để ý là không thể đặt tên cho Arrow function viết theo kiểu IIFE nhé. Và kiểu viết tên thì cũng không thể call lại được, nó cũng chỉ chạy 1 lần thôi, nó không thể gắn vào Window Object được.

Bên trên mình có viết kiểu 3 và 4 có bạn hỏi tại sao lại viết vậy, liệu có viết nhầm không? Mình xin trả lời là không nhé, vì trong trường hợp bạn nối 2 file lại với nhau (Dùng package với Grunt, Gulp, Webpack, ....) thì có thể file trước và file sau nó sẽ như thế này:

function func() {
    // Do something
}

(function func() {
    // Do something
})()

Sau khi chạy lệnh, concat các file js thành 1 dòng nó sẽ lỗi:

function func(){}(function func() {})()

Nên mới có trường hợp để tránh lỗi này nên chúng ta sẽ add thêm ; vào đăng trước IIFE.

function func() {
    // Do something
}

;(function func() {
    // Do something
})()

// =>

function func(){};(function func() {})()

Tương tự đối với việc dùng arrow function nhé.

Nhẹ Memory và tránh gây ô nhiễm cho window object.

Ở đây 2 ý này là một nhé, vì khi chúng ta khai báo một function thì chính function cũng đã được add vào Window Object, như vậy thì khai báo càng nhiều thì sẽ càng làm cho đối tượng này bị phình to ra và như vậy sẽ rất khó kiểm soát.

function func() {
    console.log("func");
}

window.func(); // func

Tại sao lên dùng IIFE.

Với các đặc tính ở bên trên thì IIFE đang tỏ hết sức mạnh mẽ trong một số trường hợp với các phần logic mà chúng ta chỉ cần chạy 1 lần. Tuy nhiên cũng chính vì vậy nên nó không thể dùng lại ở những phần khác.

3. Kết luận

Đây là một dạng viết function không phải là mới, tuy nhiên các bạn có lẽ sẽ ít gặp và sẽ gặp nhiều hơn khi mà làm các dự án maintain hoặc những dự án code JS thuần.

Còn khi làm dự án mới hoặc có Framework thì có lẽ các bạn sẽ không thấy nó nữa, tuy nhiên cũng lên biết để hiểu thêm về JS, để nhỡ như có gặp nó thì cũng không bỡ ngỡ với nó.

4. Tham khảo

# JavaScript Immediately Invoked Function Expression
# IIFE
# What is an IIFE in JavaScript?
# JavaScript Immediately-invoked Function Expressions (IIFE)

Callback function in Javascript

Nguyen-Xuan-Son — Mon, 21 Jun 2021 12:12:04 +0000

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về callback trong JS, nó là dễ học, dễ hiểu. Nhưng khi đi phỏng vấn mình thấy nhiều bạn vẫn còn lơ mơ về khái niệm này, nên trong phần này mình sẽ chia sẻ một cách đầy đủ nhất về khái niệm callback này nhé.

1. Mở đầu

Trong JS, function còn được gọi là first-class objects, điều này có nghĩa là function cũng giống như các object bình thường khác. Ta có thể gắn object vào 1 argument trong function thì cũng có thể gắn 1 function vào argument của 1 hàm, hàm này được gọi ở 1 thời điểm nào đó bên trong hàm mà nó gắn và như vậy hàm được truyền vào qua argument của 1 hàm được gọi là callback function.

Ở đây chúng ta phải phân biệt rõ ràng được trong trường hợp 1 hàm được gọi bên trong 1 hàm thì hàm này không được gọi là hàm callback mà nó phải truyền thông qua argument của function mà nó được gọi.

2. Chi tiết.

Như khái niệm mình đã cắt nghĩa ở bên trên, thì đây chính là khái niệm trên w3shool:

"I will call back later!"

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Một ví dụ cơ bản nhất mà mình tin chắc rằng bạn sẽ hình dung ra callback trong Js là như thế nào:

// A function
function fn() {
  console.log('Just a function');
}

// A function that takes another function as an argument
function higherOrderFunction(callback) {
  // When you call a function that is passed as an argument, it is referred to as a callback
  callback();
}

// Passing a function
higherOrderFunction(fn);

Dưới đây sẽ là một số ví dụ mà bạn có thể làm với callback function:

Dùng để hanlde khi gắn event:

function callback(e) {
    alert(e.target.innerText);
}

document.getElementById("name").addEventListener("click", callback);

Mình nghĩ là phần lớn các bạn đọc bài viết này sẽ không gắn sự kiện vào thẻ kiểu như thế này nữa. Nhưng có lẽ đây là phần cơ bản nhất cũng như khá là dễ hiểu về một ứng dụng của callback mà có lẽ các bạn đã dùng rồi mà lại không ý thức được là mình đã dùng nó. Ở đây hàm callback sẽ được gọi lại mỗi khi chúng ta click vào thẻ có id là name.

Dùng để hanlde xử lí 1 tác vụ bất đồng bộ:

JS là ngôn ngữ chạy đồng bộ và single thread, nghĩa là nó sẽ chạy từ trên xuống dưới (Sau khi hoisting). Như vậy nếu trong trường hợp có một tiến trình nào đó bất đồng bộ hoặc hiểu theo cách khác là chúng ta đang handle một tiến trình nào đó khá nặng mà lại cần những kết quả của nó để có thể làm tiếp việc khác thì sau khi handle xong chúng ta vẫn cần callback function.

Dưới đây là ví dụ mà bạn có thể tham khảo thêm nhé:

function handleLog(posts) {
    console.log(JSON.stringify(posts));
}

const fetchData = (handleLog) => {
    fetch("http://localhost:3000/posts")
        .then(res => res.json())
        .then(posts => handleLog(posts));
};

fetchData(handleLog);

Như vậy bạn có thể thấy được là handleLog function cũng chính là một callback function, nó sẽ được gọi sau khi mà bạn đã call api và nó đã reponse về. (Ở đây mình đang dùng json-server để fake api và cho nó delay 5s).

This trong callback function:

Đây là một phần khá nhiều trường hợp ngoại lệ, nên có lẽ mình sẽ nói tóm gọn nhất có thể nhé.

- Đây có lẽ là đoạn code đơn giản nhất, nhưng KHOAN hãy Đoán Xem đoạn code này sẽ chạy ra gì nào ^^:

function callback() {
    console.log("this => callback function", this);
};

function handleThis(callback) {
    this.address = "thaibinh";
    console.log("this => internal function", this);
    callback();
};

handleThis(callback);

Okay, nó sẽ log ra this của 2 thằng kia đều là window. Và tiếp tục đoán tiếp xem đoạn này nó chạy ra gì nào ^^:

function callback() {
    console.log("this => callback function", this);
};

function handleThis(callback) {
    const obj = {
        name: "chamdev.com",
        callbackObj = callback(),
    };
    console.log("this => internal function", this);
    obj.callbackObj();
};

handleThis(callback);

Có thể nhiều bạn đã đoán đúng rồi đúng không nào, internal sẽ là window còn this callback ở đây lại là obj Object.

Tiếp tục nào (Keep going....). Đoạn call này nó sẽ log ra cái gì nào???

function callback() {
    console.log("this => callback function", this);
};

function handleThis(callback) {
    new callback();
};

handleThis(callback);

Mình cá là nhiều bạn đoán sai, nếu bán chạy thử kết quả sẽ là chính cái callback function đó nhé. Như vậy ở phần này mình muốn trình bày với các bạn một số cách để có thể gắn lại context vào callback function, trong một số trường hợp oái oăm nào đó mà bạn cần dùng đến context của nó.

Callback HELL và cách khắc phục:

Ví dụ callback hell:

const makeBurger = nextStep => {
  getBeef(function (beef) {
    cookBeef(beef, function (cookedBeef) {
      getBuns(function (buns) {
        putBeefBetweenBuns(buns, beef, function(burger) {
          nextStep(burger);
        });
      });
    });
  });
};

Đầu tiên chúng ta cần hiểu HELL ở đây là như thế nào?
=> HELL nghĩa là rối rắm, khó debbug, khó maintain về sau có check lại đoạn code cũng sẽ thấy rất ngại.

Để giải quyết vấn đề Callback hell như trên chúng ta có thể comment code, đặt lại tên hàm cho tách biệt ra - viết sao cho nó trở nên ngắn gọn. Hoặc bạn có thể chuyển hẳn sang Promise hoặc asyn-await. Nhưng suy cho cùng HELL hay không là tại bạn thôi ;)))) - Solutions mình nêu ở trên chỉ là cho sự hell trở nên đỡ hơn.

3, Tham khảo.

# JavaScript Callbacks
# How to deal with nested callbacks and avoid “callback hell”

4. Kết luận.

Hiểu callback là truyền 1 hàm vào tham số của 1 hàm khác, ở 1 thời điểm nào đó thì hàm callback sẽ được gọi trong hàm này.

Callback phải là 1 function.

This trong callback mặc định chính là window, nếu muốn dùng context của đối tượng nào đó thì phải gắn lại.