10 Arrow Functions Interview Questions and Answers

Arrow functions, introduced in ECMAScript 6, have become a staple in modern JavaScript development. They offer a concise syntax for writing functions and come with several benefits, such as lexical scoping of the this keyword, which can simplify code and reduce common errors. Arrow functions are particularly useful in functional programming paradigms and are widely used in frameworks and libraries like React and Node.js.

This article provides a curated selection of interview questions focused on arrow functions. By exploring these questions and their detailed answers, you will gain a deeper understanding of how to effectively use arrow functions in various scenarios, enhancing your readiness for technical interviews.

Arrow Functions Interview Questions and Answers

1. Explain the syntax of an arrow function and how it differs from a traditional function declaration.

Arrow functions, introduced in ES6, offer a concise syntax for writing functions in JavaScript. They differ from traditional function declarations in several ways:

• Syntax: Arrow functions use the => syntax.
• this Binding: They inherit this from the surrounding lexical context.
• Implicit Return: If the function body contains a single expression, the curly braces {} and return keyword can be omitted.

Example:

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

// Arrow function
const add = (a, b) => a + b;

In the example above, the arrow function provides a more concise way to write the same functionality as the traditional function declaration.

Another key difference is how this is handled:

// Traditional function
function Person() {
    this.age = 0;

    setInterval(function growUp() {
        this.age++;
    }, 1000);
}

// Arrow function
function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
    }, 1000);
}

In the traditional function example, this inside growUp does not refer to the Person instance, which can lead to unexpected behavior. In the arrow function example, this correctly refers to the Person instance because arrow functions do not have their own this context.

2. Write an arrow function that takes two parameters and returns their sum.

Arrow functions provide a concise syntax for simple operations, enhancing code readability. Here’s an example that takes two parameters and returns their sum:

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

console.log(sum(3, 4)); // 7
console.log(sum(10, 20)); // 30

3. Convert the following traditional function to an arrow function: function multiply(a, b) { return a * b; }

Arrow functions offer a shorter syntax compared to traditional function expressions. They are useful for writing small, concise functions. Here is the conversion of a traditional function to an arrow function:

Traditional function:

function multiply(a, b) {
    return a * b;
}

Arrow function:

const multiply = (a, b) => a * b;

4. Write an arrow function that returns the square of its parameter.

Arrow functions are particularly useful for simple operations. Here is an example that returns the square of its parameter:

const square = (x) => x * x;

console.log(square(5)); // 25

5. Create an arrow function that filters out even numbers from an array.

To filter out even numbers from an array using an arrow function, you can use the filter method:

const filterEvenNumbers = (arr) => arr.filter(num => num % 2 !== 0);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddNumbers = filterEvenNumbers(numbers);

console.log(oddNumbers); // [1, 3, 5, 7, 9]

6. Write an arrow function that uses the reduce method to sum all elements in an array.

The reduce method is used to accumulate values in an array. Combining it with an arrow function can make the code more readable:

const sumArray = (arr) => arr.reduce((acc, curr) => acc + curr, 0);

const numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // Output: 15

7. How do default parameters work in arrow functions? Provide an example.

Default parameters in arrow functions work similarly to those in regular functions. You can assign default values directly in the function signature:

const greet = (name = 'Guest') => `Hello, ${name}!`;

console.log(greet()); // Output: Hello, Guest!
console.log(greet('Alice')); // Output: Hello, Alice!

In this example, the arrow function greet has a default parameter name set to ‘Guest’. If no argument is passed, it will use ‘Guest’ as the default value.

8. Write an arrow function that returns another arrow function which adds a given number to its argument.

Arrow functions are useful in functional programming paradigms where functions can return other functions. Here is an example that returns another arrow function which adds a given number to its argument:

const addNumber = (num) => (x) => x + num;

const addFive = addNumber(5);
console.log(addFive(10)); // 15

9. Write an arrow function that destructures an object parameter and returns one of its properties.

Destructuring allows you to extract properties from objects into distinct variables. Combining this with arrow functions can make your code more readable:

const getProperty = ({ property }) => property;

const obj = { property: 'value', otherProperty: 'otherValue' };
console.log(getProperty(obj)); // Output: 'value'

In this example, the arrow function getProperty takes an object as a parameter and uses destructuring to extract the property key.

10. Explain the concept of implicit return in arrow functions and provide an example.

One of the features of arrow functions is the implicit return, which allows the function to return a value without explicitly using the return keyword. This is useful for simple functions that consist of a single expression:

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

In this example, the arrow function (a, b) => a + b implicitly returns the result of the expression a + b. There is no need to use the return keyword, making the code more concise.

Implicit return can only be used when the function body consists of a single expression. If the function body contains multiple statements, curly braces {} must be used, and an explicit return statement is required:

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