Examples of Arrow Functions in JS

Özge Ahras — Thu, 22 Jun 2023 07:38:42 +0000

Arrow functions offer concise and efficient syntax for writing functions, making code cleaner and more readable while avoiding issues with 'this' binding.

Basic Arrow Function

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

sayHello();

Arrow Function With a Single Parameter

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Arrow Function With Multiple Parameters

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

console.log(add(3, 4)); // Output: 7

Arrow function for Mapping an Array

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Arrow Function for Filtering an Array

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

Arrow Function With an Implicit Return

const double = num => num * 2;

console.log(double(6)); // Output: 12

Arrow Function as a Callback

const names = ["Alice", "Bob", "Charlie"];
const nameLengths = names.map(name => name.length);

console.log(nameLengths); // Output: [5, 3, 7]

Arrow Function With a Default Parameter

const greet = (name = "Anonymous") => {
  console.log(`Hello, ${name}!`);
};

greet(); // Output: Hello, Anonymous!
greet("John"); // Output: Hello, John!

Arrow Function With Destructuring Parameters

const getFullName = ({ firstName, lastName }) => `${firstName} ${lastName}`;

console.log(getFullName({ firstName: "John", lastName: "Doe" })); // Output: John Doe

Arrow Function Using The Rest Parameter

const sum = (...numbers) => numbers.reduce((acc, curr) => acc + curr);

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Arrow Function With a Ternary Operator

const isEven = num => num % 2 === 0 ? "Even" : "Odd";

console.log(isEven(6)); // Output: Even
console.log(isEven(7)); // Output: Odd

Arrow Function Used in setTimeout

setTimeout(() => {
  console.log("Delayed message");
}, 1000);

Arrow Function With a Conditional Statement

const getDiscountedPrice = (price, isPremiumMember) => {
  if (isPremiumMember) {
    return price * 0.8;
  } else {
    return price;
  }
};

console.log(getDiscountedPrice(100, true)); // Output: 80
console.log(getDiscountedPrice(100, false)); // Output: 100

DEV Community: Özge Ahras

Examples of Arrow Functions in JS

Basic Arrow Function

Arrow Function With a Single Parameter

Arrow Function With Multiple Parameters

Arrow function for Mapping an Array

Arrow Function for Filtering an Array

Arrow Function With an Implicit Return

Arrow Function as a Callback

Arrow Function With a Default Parameter

Arrow Function With Destructuring Parameters

Arrow Function Using The Rest Parameter

Arrow Function With a Ternary Operator

Arrow Function Used in setTimeout

Arrow Function With a Conditional Statement