Arrow Function កំណែចាវ៉ាស្ក្រីបត៍ ES6

Arrow Function ឫ Fat Arrow Function ជារបៀបសរសេរ Function មួយបែបក្នុងភាសាចាវ៉ាស្ក្រីបត៍ដែលត្រូវបានបញ្ចេញក្នុងកំណែ ES6។ ចំណុចពិសេសរបស់វាគឺ ខ្លីងាយស្រួលសរសេរ ហើយវាមិនមាន Bindings ផ្ទាល់ខ្លួនរបស់វាទេ។ ពេលប្រើ Arrow Function យើងនឹងមិនអាចហៅ this, arguments, super ឫ new.target បានទេព្រោះវាអត់មានរបស់ទាំងអស់នេះក្នុងខ្លួនវាទេ។

• this ជា keyword មួយដែលជាទូទៅយើងប្រើសម្រាប់ហៅ Key ឫ Property របស់ Object ឫ Class។ តែសម្រាប់ Arrow Function វានឹងហៅ this របស់ Function, Closure ឫ Class មេវិញ។
• arguments ជា Variable មួយដែលជា Array នៅក្នុង Function មួយដែលអាចឲ្យយើងហៅ Arguments របស់ Function នោះបាន។
• super ជា keyword មួយដែលយើងប្រើសម្រាប់ហៅ​ constructor របស់ Parent Class។ Arrow Function មិនអាចប្រើជា constructor function បាននោះទេ ហើយវាក៏មិនមាន keyword នេះក្នុងខ្លួនវាដែរ។
• new.target ជា pseudo-property មួយដែលអាចឲ្យយើងចាប់ដឹងថា Function ឫ Constructor ត្រូវបានហៅដោយប្រើ new ដែរឫទេ។ យើងមិនអាចហៅ property នេះបានទេក្នុង Arrow Function។

/**
 * Arrow vs Normal Function
 */
const arrowFunc = () => 'Arrow Function'
console.log(arrowFunc()) // Arrow Function

// VS.

function normalFunc() {
  return 'Normal Function'
}
console.log(normalFunc()) // Normal Function

ប្រការល្អដែលគួរធ្វើពេលប្រើ Arrow Function

ខាងក្រោមនេះជាចំណុចមួយចំនួនដែលអាចជួយឲ្យការប្រើប្រាស់ Arrow Function បានប្រសើរបាន៖

1. បើអាចសរសេរវាត្រឹមមួយបន្ទាត់

const array = [1, 2, 3]
array.map((number) => {
  return number * 2
})

យើងអាចសរសេរបែបនេះវិញ

const array = [1, 2, 3]
array.map((number) => number * 2)

ធ្វើបបែបនេះ កូដយើងខ្លីជាងមុន ហើយក៏ងាយស្រួលអានដែរ។

2. ពេលត្រូវប្រើធៀប <, >, >= ជាពិសេស <= ដែលវាអាចធ្វើឲ្យយើងពិបាកអាន យើងគួរតែប្រើឃ្នាប ()

ឧទាហរណ៍៖

const negativeToZero = (number) => (number <= 0 ? 0 : number)

យើងអាចសរសេរបែបនេះវិញ

const negativeToZero = (number) => (number <= 0 ? 0 : number)

3. បើ nested ច្រើនជាន់

ឧទាហរណ៍៖

myButton.addEventListener('click', () => {
  fetch('/items.json')
    .then((response) => response.json())
    .then((json) => {
      json.forEach((item) => {
        console.log(item.name)
      })
    })
})

យើងអាចសរសេរបែបនេះវិញ

const readItemsJson = (json) => {
  json.forEach((item) => console.log(item.name))
}

const handleButtonClick = () => {
  fetch('/items.json')
    .then((response) => response.json())
    .then(readItemsJson)
}

myButton.addEventListener('click', handleButtonClick)

កាលដែលយើងសរសេរបែបនេះ ខ្ញុំថាវាងាយស្រួលអានជាង។ ហើយមួយទៀតនោះ បើយើង debug ក្នុង devtools ក្នុង​ browser យើងនឹងឃើញឈ្មោះ function ជាជាង anonymous ដែលវាជួយឲ្យយើងងាយយល់ដែរ។

4. របៀប return object

កូដខាងក្រោមនេះមិនអាចរាន់បានទេ ព្រោះ interpreter គិតថា {} ជារបស់ Arrow Function មិនមែន Object ទេ។

const array = [1, 2, 3];
// throws SyntaxError!
array.map(number => { 'number': number });

អ៊ីចឹងហើយ យើងត្រូចសរសេរបែននេះវិញ

const array = [1, 2, 3]
// Works!
array.map((number) => ({ number: number }))

សម្រាប់ Arrow Fucntion ខ្ញុំមានប៉ុណ្ណឹងឯងចង់ណែនាំ។ អ្នកទាំងអស់គ្នាយល់យ៉ាងណាដែរ ហើយមានអ្វីបន្ថែបពីលើនេះទេ? កុំភ្លេចខំមិននៅខាងក្រោម។ Happy Coding!