Arrow functions are a concise way to write anonymous function expressions in JavaScript. They were introduced in ECMAScript 6 (ES6) and provide a more compact syntax compared to traditional function expressions. Arrow functions are especially useful for short, one-off functions and for situations where a concise syntax improves code readability.
Here’s the basic syntax of an arrow function:
// Syntax
const functionName = (parameter1, parameter2, …) => {
// function body
return result; // optional
};
The arrow function syntax consists of parameters enclosed in parentheses, followed by the arrow (=>), and then the function body enclosed in curly braces ({}). If the function body consists of a single statement, you can omit the curly braces and the return keyword for implicit return.
1. Basic Arrow Function:
// Traditional function expression
const add = function (a, b) {
return a + b;
};
// Arrow function equivalent
const addArrow = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
console.log(addArrow(2, 3)); // Output: 5
2. Arrow Function with Single Parameter:
// Traditional function expression
const square = function (x) {
return x * x;
};
// Arrow function equivalent
const squareArrow = x => x * x;
console.log(square(4)); // Output: 16
console.log(squareArrow(4)); // Output: 16
3. Arrow Function with No Parameters:
// Traditional function expression
const sayHello = function () {
console.log(‘Hello, World!’);
};
// Arrow function equivalent
const sayHelloArrow = () => console.log(‘Hello, World!’);
sayHello(); // Output: Hello, World!
sayHelloArrow(); // Output: Hello, World!
4. Implicit Return:
// Traditional function expression
const multiply = function (a, b) {
return a * b;
};
// Arrow function with implicit return
const multiplyArrow = (a, b) => a * b;
console.log(multiply(2, 3)); // Output: 6
console.log(multiplyArrow(2, 3)); // Output: 6
5. Arrow Functions in Array Methods:
Arrow functions are commonly used with array methods like map, filter, and reduce:
const numbers = [1, 2, 3, 4, 5];
// Traditional function expression with map
const squared = numbers.map(function (num) {
return num * num;
});
// Arrow function with map
const squaredArrow = numbers.map(num => num * num);
console.log(squared); // Output: [1, 4, 9, 16, 25]
console.log(squaredArrow); // Output: [1, 4, 9, 16, 25]
Arrow functions have a concise syntax and lexically bind the this value, making them particularly useful in certain situations. However, it’s important to note that they are not a direct replacement for traditional functions in all cases, especially when dealing with object methods or constructors.
Exercise 1: Basic Arrow Function
Task: Write an arrow function called greet that takes a name as a parameter and returns a greeting message.
Steps:
- Define an arrow function with the name greet and a parameter name.
- Use template literals to create a greeting message.
- Return the greeting message.
Code:
const greet = name => `Hello, ${name}!`;
console.log(greet(‘John’)); // Output: Hello, John!
Exercise 2: Square Numbers
Task: Write an arrow function called squareNumbers that takes an array of numbers and returns a new array with each number squared.
Steps:
- Define an arrow function with the name squareNumbers and a parameter numbers.
- Use the map function to square each number in the array.
- Return the new array.
Code:
const squareNumbers = numbers => numbers.map(num => num * num);
console.log(squareNumbers([1, 2, 3, 4])); // Output: [1, 4, 9, 16]
Exercise 3: Filter Even Numbers
Task: Write an arrow function called filterEvenNumbers that takes an array of numbers and returns a new array with only the even numbers.
Steps:
- Define an arrow function with the name filterEvenNumbers and a parameter numbers.
- Use the filter function to keep only the even numbers.
- Return the new array.
Code:
const filterEvenNumbers = numbers => numbers.filter(num => num % 2 === 0);
console.log(filterEvenNumbers([1, 2, 3, 4, 5])); // Output: [2, 4]
Exercise 4: Sum Array
Task: Write an arrow function called sumArray that takes an array of numbers and returns the sum of all the numbers.
Steps:
- Define an arrow function with the name sumArray and a parameter numbers.
- Use the reduce function to add up all the numbers.
- Return the sum.
Code:
const sumArray = numbers => numbers.reduce((acc, num) => acc + num, 0);
console.log(sumArray([1, 2, 3, 4])); // Output: 10
Exercise 5: Generate Power Function
Task: Write an arrow function called powerFunction that takes a base and an exponent and returns the result of raising the base to the exponent.
Steps:
- Define an arrow function with the name powerFunction and parameters base and exponent.
- Use the Math.pow method or the exponentiation operator (**) to calculate the power.
- Return the result.
Code:
const powerFunction = (base, exponent) => Math.pow(base, exponent);
console.log(powerFunction(2, 3)); // Output: 8
Exercise 6: Concatenate Strings
Task: Write an arrow function called concatenateStrings that takes an array of strings and concatenates them into a single string.
Steps:
- Define an arrow function with the name concatenateStrings and a parameter strings.
- Use the join method to concatenate the strings with a specified separator.
- Return the concatenated string.
Code:
const concatenateStrings = strings => strings.join(‘, ‘);
console.log(concatenateStrings([‘Hello’, ‘World’])); // Output: Hello, World
Exercise 7: Convert Celsius to Fahrenheit
Task: Write an arrow function called celsiusToFahrenheit that takes a temperature in Celsius and converts it to Fahrenheit.
Steps:
- Define an arrow function with the name celsiusToFahrenheit and a parameter celsius.
- Use the conversion formula: F = (C * 9/5) + 32.
- Return the temperature in Fahrenheit.
Code:
const celsiusToFahrenheit = celsius => (celsius * 9/5) + 32;
console.log(celsiusToFahrenheit(25)); // Output: 77
Exercise 8: Arrow Function with Default Parameter
Task: Write an arrow function called greetWithDefault that takes a name and a default greeting, and returns a personalized greeting.
Steps:
- Define an arrow function with the name greetWithDefault, parameters name and greeting with a default value.
- Use template literals to create the personalized greeting.
- Return the greeting.
Code:
const greetWithDefault = (name, greeting = ‘Hello’) => `${greeting}, ${name}!`;
console.log(greetWithDefault(‘Alice’)); // Output: Hello, Alice!
console.log(greetWithDefault(‘Bob’, ‘Hi’)); // Output: Hi, Bob!
Exercise 9: Arrow Function with Rest Parameter
Task: Write an arrow function called sumAll that takes any number of arguments and returns the sum of all the arguments.
Steps:
- Define an arrow function with the name sumAll and use the rest parameter (…args).
- Use the reduce function to add up all the arguments.
- Return the sum.
Code:
const sumAll = (…args) => args.reduce((acc, num) => acc + num, 0);
console.log(sumAll(1, 2, 3, 4)); // Output: 10
Exercise 10: Arrow Function and Object Method
Task: Create an object calculator with methods for addition, subtraction, multiplication, and division using arrow functions.
Steps:
- Define an object called calculator.
- Add methods add, subtract, multiply, and divide to the object using arrow functions.
- Test each method.
Code:
const calculator = {
add: (a, b) => a + b,
subtract: (a, b) => a – b,
multiply: (a, b) => a * b,
divide: (a, b) => (b !== 0) ? a / b : ‘Cannot divide by zero’,
};
console.log(calculator.add(5, 3)); // Output: 8
console.log(calculator.subtract(8, 3)); // Output: 5
console.log(calculator.multiply(4, 2)); // Output: 8
console.log(calculator.divide(9, 3)); // Output: 3
console.log(calculator.divide(7, 0)); // Output: Cannot divide by zero
These exercises cover various use cases of arrow functions in JavaScript. Working through them will help you become more familiar with the syntax and capabilities of arrow functions.
Quiz Questions:
Question: What is the main purpose of arrow functions in JavaScript?
A) To improve code readability
B) To replace traditional functions
C) To add new features to the language
D) To enforce strict typing
Answer: A) To improve code readability
Question: In arrow functions, what symbol separates the list of parameters from the function body?
A) ::
B) =>
C) ->
D) :::
Answer: B) =>
Question: Which of the following is a valid arrow function for adding two numbers?
A) const sum = (a, b) => {a + b};
B) const sum = (a, b) => a + b;
C) const sum = a, b => a + b;
D) function sum(a, b) => a + b;
Answer: B) const sum = (a, b) => a + b;
Question: What does the map function do when used with an arrow function?
A) Filters elements in an array
B) Sums all elements in an array
C) Squares each element in an array
D) Concatenates strings in an array
Answer: C) Squares each element in an array
Question: How is the this value handled in arrow functions compared to traditional functions?
A) Arrow functions do not have a this value
B) Arrow functions inherit this from the calling scope
C) Arrow functions create a new this context
D) this in arrow functions always refers to the global object
Answer: B) Arrow functions inherit this from the calling scope
Question: Which array method is commonly used with arrow functions to filter elements based on a condition?
A) reduce
B) filter
C) map
D) forEach
Answer: B) filter
Question: What is the purpose of the reduce function when used with an arrow function?
A) To filter elements in an array
B) To add up all elements in an array
C) To square each element in an array
D) To concatenate strings in an array
Answer: B) To add up all elements in an array
Question: How can you provide a default value for a parameter in an arrow function?
A) Using the default keyword
B) Using the default attribute
C) Using the = syntax
D) Arrow functions do not support default parameters
Answer: C) Using the = syntax
Question: What is the purpose of the rest parameter (…args) in an arrow function?
A) To create an array of arguments
B) To spread the arguments into individual parameters
C) To ignore certain arguments
D) Arrow functions do not support rest parameters
Answer: B) To spread the arguments into individual parameters
Question: How can you create an arrow function to calculate the power of a number (base to the exponent)?
A) const power = (base, exponent) => base ^ exponent;
B) const power = (base, exponent) => base ** exponent;
C) const power = (base, exponent) => Math.pow(base, exponent);
D) const power = (base, exponent) => base * exponent;
Answer: C) const power = (base, exponent) => Math.pow(base, exponent);