1. No Parameters
This function is named greet. It takes no parameters. When invoked, it simply returns the string "Hello!".
const greet = () => "Hello!";
The function's primary purpose is to always provide a greeting. Since there are no parameters, every time it's called, it will consistently return the same greeting message.
2. Single Parameter
If there's only one parameter, parentheses are optional.
const square = x => x * x;
console.log(square(4)); // Outputs: 16
This function is named square. It takes a single parameter x and returns the result of multiplying x by itself.
The function calculates the square of a number. If you provide 4 as an argument, it will return 16 because 4 multiplied by 4 equals 16.
3. Multiple Parameters
For more than one parameter, parentheses are required.
const add = (a, b) => a + b;
console.log(add(2, 3)); // Outputs: 5
This function is named add. It takes two parameters, a and b, and returns their sum.
This function can be used for adding two numbers together. For instance, invoking add(2, 3) would return 5.
4. Function Body with Multiple Statements
If the function body has more than one statement, you need to use curly braces and specify the return
keyword (if you want to return something).
const greetPerson = name => {
const greeting = "Hello, " + name + "!";
return greeting;
}
console.log(greetPerson("Alice")); // Outputs: Hello, Alice!
This function is named greetPerson. It accepts a single parameter name. Inside its body, it constructs a personalized greeting message and then returns that message.
This function's purpose is to provide a personalized greeting based on the name provided. If you call it with greetPerson("Alice"), it will return "Hello, Alice!".
5. Returning Object Literals
When directly returning an object literal, wrap the literal in parentheses to differentiate it from the function block.
const makePerson = (firstName, lastName) => ({ first: firstName, last: lastName });
console.log(makePerson("John", "Doe")); // Outputs: { first: 'John', last: 'Doe' }
This function is named makePerson. It takes two parameters, firstName and lastName. The function then returns an object with two properties: first and last, which are assigned the values of firstName and lastName respectively.
This function is useful for quickly creating an object with a given first name and last name. For instance, makePerson("John", "Doe") would return the object { first: 'John', last: 'Doe' }.
6. Higher Order Functions and Callbacks
Arrow functions are particularly popular when used as short callbacks
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8]
In this example, the map method is used to iterate over each element in the numbers array. For each element, it calls the provided arrow function, which doubles the number, resulting in a new array doubled with all numbers doubled.
This code's main aim is to produce a new array where each element is doubled. Given the initial array [1, 2, 3, 4], the resulting doubled array will be [2, 4, 6, 8].