Closure និង Higher-Order Functions

I. Closure

ការសរសេរ closure គឺមានសភាពបែបនេះ៖

1. Variable គឺស្ថិតនៅក្នុង Function
2. Variable អាចប្រើបានតែនៅខាងក្នុង Function តែប៉ុណ្ណោះ
3. Variable អាចបង្កើតនៅខាងក្រៅ Function បានដោយមិនមានទំនាក់ទំនងជាមួយ Variable នៅក្នុង Function ឡើយ។

ដែល Code មានរូបរាងបែបនេះ៖

const foo = () => {
  let count = 0;
  return () => {
    count++;
    return count;
  };
};

ដូចដែលយើងបានឃើញគឺ Variable រស់នៅក្នុង Function ប៉ុន្តែ Function បាន return Function មកវិញ ដូច្នេះយើងហៅ Function foo យកមកប្រើ ដោយរក្សាទុកក្នុង Variable។

const bar = foo();

ហើយសាកហៅ bar យកមកប្រើ ថាតើវានឹងមានអ្វីកើតឡើង។

console.log(bar()); // ទិន្នផល: 1
console.log(bar()); // ទិន្នផល: 2

ដូចដែលបានឃើញគឺថា count variable នៅតែមានតម្លៃត។ នេះហើយគឹជា closure ដែលវារក្សា Variable ប៉ុន្តែការសរសេរ closure បែបនេះគឺយើងមិនសូវឃើញទេ ដូច្នេះ closure ដែលយើងឃើញច្រើននោះគឺ៖

<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
<button class="btn">Button 4</button>
<button class="btn">Button 5</button>

const btns = document.querySelectorAll(".btn");

btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    let text = btn.innerText;
    console.log(text);
  });
});

គ្រប់ Button ដែលត្រូវបានដាក់ event គ្រប់នៅក្នុង for loop គឺ text មានតម្លៃខុសគ្នាទាំងអស់។

II. Higher-Order Functions (HOF)

បើនិយាយទៅ Higher-Order Functions (HOF) ក៏ប្រើប្រាស់ closure ដែលប៉ុន្តែមានសភាពខុសគ្នាបន្តិចគឺ៖

1. Variable ដែលរស់នៅក្នុង wrapper function គឺមានសភាពដូចនឹង constant
2. Wrapper function នឹងធ្វើការបោះ properties តាមរយះ function

ដែល code មានសភាពបែបនេះ៖

function foo(fn) {
  const bar = "Hello World";
  return fn(bar);
}

foo((props) => {
  console.log(props);
});

ដូចដែលយើងបានឃើញអញ្ចឹងគឺថា function foo គឺត្រូវការ argument មួយ ដែលមានរូបរាងជា function ហើយយើងអាចយក props មកប្រើប្រាស់បានតាមរយៈ parameter ក្នុង function នោះបាន។

ដែល HOF ច្រើនប្រើប្រាស់នៅក្នុង ReactJS ដែលហៅថា Higher-Order Component (HOC) ភាគច្រើន HOC function ឈ្មោះចាប់ផ្តើមដោយពាក្យ 'with'។

// -- Path: /Hoc.jsx
import { useState } from "react";

function withFoo(WrappedComponent) {
  function Foo(props) {
    const [count, setCount] = useState(0);
    const bar = "Hello World";

    const increase = () => {
      setCount(count + 1);
    };

    return (
      <WrappedComponent
        {...props}
        bar={bar}
        count={count}
        increase={increase}
      />
    );
  }

  return Foo;
}

function MyComponent(props) {
  return (
    <>
      <h1>{props.bar}</h1>
      <button onClick={props.increase}>{props.count}</button>
    </>
  );
}

export default withFoo(MyComponent);

// -- Path: /app.jsx
import MyComponentWithFoo from "./Hoc";
import "./App.css";

function App() {
  return <MyComponentWithFoo />;
}

export default App;

ដូចដែលយើងបានឃើញ គឺមានការប្រើប្រាស់ទៅលើ HOF ប៉ុន្តែនៅក្នុង ReactJS គឺប្រើប្រាស់ Component ដូច្នេះទើបមានឈ្មោះ HOC ដែលជា Topic នឹងមានឱកាសជាសំនួរនៅក្នុង interview របស់ ReactJS position.