JavaScript Anonymous and Arrow Functions

Anonymous Functions

An anonymous function is a function that doesn’t have a name. Instead of writing a named function like function greet(), you create the function and assign it directly to a variable. This is useful when you want to use a function once, or pass it as a value (for example, into another function).

const sayHi = function() {
  console.log("Hi there!");
};
sayHi();

const sayHi = function() {
  console.log("Hi there!");
};
sayHi();

Breaking it down:

• function() {...}: This creates a function, but without giving it a name — that’s why it’s called “anonymous”.
• const sayHi : The function is stored inside a variable named sayHi. You can now call it using that variable name.
• sayHi();: This runs (or “calls”) the function and prints Hi there! in the console.

Anonymous functions are commonly used when you want to create a function quickly and don’t plan to reuse it elsewhere. For example, when working with timers or event listeners.

Arrow Functions

An arrow function is a shorter and more modern way to write a function in JavaScript. It's called an “arrow” function because it uses the => arrow syntax.

const sayHi = () => {
  console.log("Hi there!");
};
sayHi();

const sayHi = () => {
  console.log("Hi there!");
};
sayHi();

Let’s break this down:

• () => {...}: This is the arrow function syntax. The empty ()
• const sayHi : The arrow function is stored in a variable called sayHi.
• sayHi() : This calls the function, and it prints Hi there! to the console.

If your arrow function only has one line that returns something, you can make it even shorter by skipping the {}:

const multiply = (a, b) => a * b;
console.log(multiply(2, 5)); // Output: 10

const multiply = (a, b) => a * b;
console.log(multiply(2, 5)); // Output: 10

Arrow functions are popular because they’re shorter and easier to read, especially when writing small functions. However, they work a bit differently from regular functions when it comes to things like this, which you’ll learn about later.

Example 1: Basic Anonymous Function

Here is a basic example of an anonymous function that adds two numbers:

const add = function(x, y) {
  return x + y;
};
console.log(add(5, 3));

const add = function(x, y) {
  return x + y;
};
console.log(add(5, 3));

How It Works:

• function(x, y): Creates a function with no name that takes two parameters: x and y.
• return x + y;: This returns the result of adding x and y.
• const add = ...: The anonymous function is stored in a variable called add, so you can use that variable to call the function.
• add(5, 3): This calls the function with 5 and 3 as inputs and returns 8.

Output

8

8

Example 2: Arrow Function with Parameters

Here's an arrow function that multiplies two numbers and returns the result:

const multiply = (a, b) => {
  return a * b;
};
console.log(multiply(4, 5));

const multiply = (a, b) => {
  return a * b;
};
console.log(multiply(4, 5));

How It Works:

• (a, b) => { ... }: This defines an arrow function that takes two parameters: a and b.
• return a * b;: The function multiplies a and b, and returns the result.
• const multiply = ...: The function is assigned to the variable multiply, which you use to call it.
• multiply(4, 5): This calls the function with 4 and 5, and prints the result (20).

Output

20

20

Example 3: Single-Line Arrow Function

Arrow functions become even shorter when your function only contains a single return statement. You can skip the {} and the return keyword completely.

Here's an arrow function that squares a number — all in one line:

const square = x => x * x;
console.log(square(6));

const square = x => x * x;
console.log(square(6));

How It Works:

• x => x * x: This defines a function that takes one parameter x and returns the result of x * x.
• No need for return or curly braces {} — it's implied because there's only one expression.
• square(6): This calls the function with the number 6 and prints the result (36).

Output

36

36

Exercises

Try these exercises to get comfortable with anonymous and arrow functions.

const message = function() {
  console.log("This is an anonymous function!");
};
message();

const message = function() {
  console.log("This is an anonymous function!");
};
message();

const message = () => {
  console.log("This is an arrow function!");
};
message();

const message = () => {
  console.log("This is an arrow function!");
};
message();

const square = (num) => num * num;
console.log(square(5));

const square = (num) => num * num;
console.log(square(5));

Frequently Asked Questions