Pure function in JS
Tags: javascript, chamdev, pure
Published: 2021-06-23 17:16:48

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é.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ijmpxdzhnzewwygjbvp.png)
<!-- wp:heading -->
<h2>1. Mở đầu</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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é.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1962,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://chamdev.com/wp-content/uploads/2020/05/9d50d3c1284cf6eccbd9437945b1a88d.jpg" alt="" class="wp-image-1962"/><figcaption>https://i.pinimg.com/originals/9d/50/d3/9d50d3c1284cf6eccbd9437945b1a88d.jpg</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ok, LET GOOOOOOO!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2. Chi tiết</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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é.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre title="pure-function.js" class="wp-block-code"><code lang="javascript" class="language-javascript">const add = (x, y) => x + y;

add(2, 4); // 6</code></pre>
<!-- /wp:code -->

<!-- wp:code -->
<pre title="impure-function.js" class="wp-block-code"><code lang="javascript" class="language-javascript">let x = 2;

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

add(4); // x === 6 (the first time)</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":4} -->
<h4><strong>Pure function là gì?</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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é:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><em>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.</em></li><li><em>The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.</em></li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Mình xin phép được dịch vắn tắt nó ra như thế này:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><em>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.</em></li><li><em>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.</em></li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><span style="text-decoration: underline;">Đối với khái niệm 1:</span> 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 <strong>MỘT</strong> kết quả với <strong>N lần</strong> (<strong>N</strong> đế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 ^^)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span style="text-decoration: underline;">Đối với khái niệm 2:</span> 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 <strong>Side effects</strong>.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":4} -->
<h4><strong>Impure function là gì?</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Side effects là gì?</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ở đâ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é.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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, ....</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Pure function dùng trong trường hợp nào?</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Đây có lẽ là câu hỏi rất hay, <strong>Pure function</strong> đượ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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <strong>Side effects</strong> và sau cùng hãy return giá trị đã tính toán đó ra nhé.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Tại sao Pure function là rất quan trọng?</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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, <strong>thơm hơn</strong> (à, 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 ......... ).</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3. Kết luận</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Đó 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ó.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>SAU TẤT CẢ - Cám ơn các bạn đã luôn ủng hộ mình nhé.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4. Tham khảo</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://medium.com/@jamesjefferyuk/javascript-what-are-pure-functions-4d4d5392d49c"># JavaScript: What Are Pure Functions And Why Use Them?</a><br><a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976"># Master the JavaScript Interview: What is a Pure Function?</a><br><a href="https://www.freecodecamp.org/news/what-is-a-pure-function-in-javascript-acb887375dfe/"># What Is a Pure Function in JavaScript?</a><br><a href="https://blog.bitsrc.io/understanding-javascript-mutation-and-pure-functions-7231cc2180d3"># Understanding Javascript Mutation and Pure Functions</a></p>
<!-- /wp:paragraph -->