Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • icon picker
          Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
Arrow Function

Arrow Function

Arrow Function là gì?

Là cú pháp rút gọn để khai báo function, được giới thiệu từ ES6 (2015).
Viết ngắn hơn function() { ... }.
Dùng nhiều trong callback (.then, .map, .filter, …).
Ví dụ:
⁠

Khai báo Arrow Function

Function bình thường

Arrow Function

Arrow Function rút gọn hơn, nếu chỉ có 1 lệnh return

⁠

Dùng Arrow Function như callback (không cần khai báo)

Dùng Fn bình thường

Dùng Arrow Fn

Dùng Arrow Fn rút gọn nhất

⁠

Function lồng Function

⁠

Lưu ý

Arrow Fn giúp code gọn hơn, đặc biệt khi viết callback.
Giống fn bình thường với những hạn chế:
Phải viết trước khi sử dụng
// arrow fn KHÔNG ĐƯỢC lưu vào memory như 'var' hay fn bình thường
// arrow fn được thực thi theo thứ tự sau khi init, nên phải đứng trước khi gọi
regular();
arrow();

function regular() {
console.log('Regular');
}

const arrow = () => console.log('arrow');
không access được ‘this’, không tồn tại
// With normal functions, the `this` variable is created which references the objects that call them. Arrow functions do not create their own `this` binding.
const person = {
name: 'Brad',
sayHelloRegular: function () {
console.log('Regular:', this.name); // Regular Brad
},
sayHelloArrow: () => {
console.log('Arrow:', this.name); // undefined 'name'
},
};
Run the code and you get:
the ‘person’ object for the regular function
Because the arrow function does not automatically create a `this` variable, any reference to this would point to what this was before the function was created:
In Node with ES Modules, it's an empty object
in the browser, it's the `window` object.

Arrow Function là gì?
Khai báo Arrow Function
Function bình thường
Arrow Function
Arrow Function rút gọn hơn, nếu chỉ có 1 lệnh return
Dùng Arrow Function như callback (không cần khai báo)
Dùng Fn bình thường
Dùng Arrow Fn
Dùng Arrow Fn rút gọn nhất
Function lồng Function
Lưu ý
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.