Search⌘ K
AI Features
Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Functions, Arrow Functions, and Callbacks

Explore the fundamentals of JavaScript functions crucial for React programming. Understand differences between regular and arrow functions, how callbacks enable asynchronous behavior, and practice applying these concepts to manage data and events efficiently in your React components.

We'll cover the following...

Functions are instrumental in JavaScript programming and an essential concept for React development. Functions are blocks of reusable code that perform a specific task. They're necessary to write more concise and readable code, especially when creating React components.

JavaScript offers three primary types of functions:

  • Regular functions

  • Arrow functions

  • Callback (async) functions

Regular functions (standard functions)

In JavaScript, regular functions are declared using the function keyword. They can take parameters, perform operations, and return values.

Javascript (babel-node-es2024)
console.log(greet("Alice")); // Hello, Alice!
// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}
// Function expression
// An anonymous function assigned to a function expression
const add = function(a, b) { 
  return a + b;
};
console.log(add(2, 3)); // 5
// Anonymous function (without a name)
setTimeout(function() {
  console.log("This runs after 2 seconds");
}, 2000);

Note:

  • Function declarations are hoisted, so they can be called before they are defined, e.g., greet ...