JavaScript Arrow Functions Practice Questions with Solutions

Introductions

Arrow functions provide a shorter way to write functions in JavaScript. They are especially useful for small functions, calculations, array methods, and modern JavaScript code. In this chapter, you will practice arrow functions from the basics, including parameters, return values, multiple parameters, default parameters, and arrow functions with arrays. JavaScript Arrow Functions Practice Questions with Solutions help to build concepts.

Question 1: Create a Basic Arrow Function

Problem

Create an arrow function named greet that displays "Hello JavaScript!".

Solution

const greet = () => {
    console.log("Hello JavaScript!");
};

greet();

Output

Hello JavaScript!

Step-by-step Explanation

1. const greet stores the function.
2. () represents the function parameters.
3. => is the arrow function symbol.
4. The code inside {} is the function body.
5. greet() calls the function.
6. The message is displayed.

Question 2: Arrow Function with One Parameter

Problem

Create an arrow function that accepts a person’s name and displays a greeting.

Solution

const greetUser = (name) => {
    console.log("Hello, " + name);
};

greetUser("Rahul");

Output

Hello, Rahul

Step-by-step Explanation

1. name is the parameter.
2. "Rahul" is passed when the function is called.
3. The function receives "Rahul" in the name parameter.
4. The message is created using string concatenation.
5. The message is displayed.

For one parameter, parentheses can also be omitted:

const greetUser = name => {
    console.log("Hello, " + name);
};

Question 3: Arrow Function with Two Parameters

Problem

Create an arrow function that accepts two numbers and displays their sum.

Solution

const add = (a, b) => {
    console.log(a + b);
};

add(10, 20);

Output

30

Step-by-step Explanation

1. The function has two parameters: a and b.
2. 10 is passed to a.
3. 20 is passed to b.
4. The function calculates a + b.
5. 10 + 20 equals 30.
6. The result is displayed.

Question 4: Return a Value from an Arrow Function

Problem

Create an arrow function that accepts two numbers and returns their multiplication.

Solution

const multiply = (a, b) => {
    return a * b;
};

let result = multiply(5, 6);

console.log(result);

Output

30

Step-by-step Explanation

1. multiply stores the arrow function.
2. The function receives 5 and 6.
3. a * b calculates the multiplication.
4. return sends the result back.
5. 5 × 6 equals 30.
6. The returned value is stored in result.

Question 5: Use an Implicit Return

Problem

Create an arrow function that returns the square of a number using a single expression.

Solution

const square = number => number * number;

console.log(square(7));

Output

49

Step-by-step Explanation

1. The function accepts number.
2. There are no curly brackets because the function contains one expression.
3. number * number is automatically returned.
4. 7 × 7 equals 49.
5. The result is displayed.

This is called an implicit return.

The longer version would be:

const square = number => {
    return number * number;
};

Question 6: Arrow Function with a Default Parameter

Problem

Create an arrow function that displays a welcome message. If no name is provided, use "Guest".

Solution

const welcome = (name = "Guest") => {
    console.log("Welcome, " + name);
};

welcome();
welcome("Aman");

Output

Welcome, Guest
Welcome, Aman

Step-by-step Explanation

1. name = "Guest" creates a default parameter.
2. The first function call does not provide a name.
3. Therefore, JavaScript uses "Guest".
4. The second call provides "Aman".
5. The provided value replaces the default value.

Question 7: Check Whether a Number is Even

Problem

Create an arrow function that accepts a number and returns true if it is even and false if it is odd.

Solution

const isEven = number => number % 2 === 0;

console.log(isEven(10));
console.log(isEven(7));

Output

true
false

Step-by-step Explanation

1. The function accepts a number.
2. % finds the remainder after division.
3. An even number has a remainder of 0 when divided by 2.
4. 10 % 2 === 0 is true.
5. 7 % 2 === 0 is false.
6. The function returns the Boolean result.

Question 8: Calculate the Total Price

Problem

Create an arrow function that accepts a product price and quantity and returns the total price.

Solution

const calculateTotal = (price, quantity) => price * quantity;

let total = calculateTotal(500, 3);

console.log(total);

Output

1500

Step-by-step Explanation

1. The function accepts price and quantity.
2. The price is 500.
3. The quantity is 3.
4. The function multiplies the two values.
5. 500 × 3 equals 1500.
6. The result is automatically returned.
7. The returned value is stored in total.

Question 9: Use an Arrow Function with an Array

Problem

Create an array of numbers and use an arrow function with forEach() to display every number.

Solution

const numbers = [10, 20, 30, 40];

numbers.forEach(number => {
    console.log(number);
});

Output

10
20
30
40

Step-by-step Explanation

1. The numbers array contains four values.
2. forEach() runs a function for every array element.
3. The arrow function receives the current element in number.
4. The current number is displayed.
5. The process repeats for all four elements.

Question 10: Use an Arrow Function with map()

Problem

Create an array of numbers and use map() with an arrow function to create a new array containing the squares of those numbers.

Solution

const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(number => number * number);

console.log(squares);

Output

[1, 4, 9, 16, 25]

Step-by-step Explanation

1. The numbers array contains 1 to 5.
2. map() processes every element.
3. The arrow function receives each number.
4. Each number is multiplied by itself.
5. map() creates a new array with the returned values.
6. The resulting array contains the squares.

The calculations are:

1 × 1 = 1
2 × 2 = 4
3 × 3 = 9
4 × 4 = 16
5 × 5 = 25

Key Takeaways

• Arrow functions provide a shorter way to write functions.
• The => symbol identifies an arrow function.
• Arrow functions can have zero, one, or multiple parameters.
• Parentheses can be omitted when there is exactly one parameter.
• Arrow functions can use explicit return.
• A single-expression arrow function can use implicit return.
• Default parameters also work with arrow functions.
• Arrow functions are commonly used with array methods.
• forEach() can execute an arrow function for every array element.
• map() can create a new array by transforming each element.
• Arrow functions are an important part of modern JavaScript.

FAQs

1. What is an arrow function in JavaScript?

An arrow function is a shorter syntax for creating a function.

const add = (a, b) => {
    return a + b;
};

2. How is an arrow function different from a normal function?

A normal function can be written as:

function add(a, b) {
    return a + b;
}

The same function can be written as:

const add = (a, b) => a + b;

The arrow function is shorter and is commonly used in modern JavaScript.

3. Can an arrow function have multiple parameters?

Yes.

const add = (a, b, c) => a + b + c;

4. Can an arrow function have no parameters?

Yes. Empty parentheses are used.

const greet = () => {
    console.log("Hello");
};

5. Can I omit parentheses around a parameter?

Yes, when the arrow function has exactly one parameter.

const square = number => number * number;

With multiple parameters, parentheses are required:

const add = (a, b) => a + b;

6. What is an implicit return?

When an arrow function contains a single expression without curly brackets, the result is automatically returned.

const double = number => number * 2;

You do not need to write return.

7. Can arrow functions be used with array methods?

Yes. Arrow functions are frequently used with methods such as forEach(), map(), filter(), and find().

const numbers = [1, 2, 3];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar