Sign In
Sign In

Arrow Functions in JavaScript

Arrow Functions in JavaScript
Hostman Team
Technical writer
JavaScript
24.11.2023
Reading time: 7 min

With the release of the ES6 standard in 2015, programmers have gotten several new features and functions in JavaScript. The new standard added arrow functions, ways to declare let and const variables, promises, and many other fundamental changes to the language. Today, we will focus on arrow functions.

Arrow functions in JavaScript are a new method of declaring functional expressions that is much more compact and convenient than its predecessor. If you are familiar with lambda functions in Python, you will definitely find similarities between them.

In this article, we'll look at arrow functions and their syntax, give usage examples, and learn the ins and outs of using them in code.

-

Functions

Before we study arrow functions, we should revise the traditional way of declaring functions and function expressions. This chapter will help users to remember what functions and function expressions are and to apprehend how their declaration differs from the arrow functions.

A function is a set of commands written to accomplish a specific task when called. It can be called from any part of the code as many times as you like.

The syntax of a standard function declaration is as follows:

function function_name(set_of_parameters) {
 set_of_commands;

A function declaration is always read first, meaning it can be called before it is declared. This process is called hoisting.

An example of an ordinary function:

console.log(multiplication(2,5));

function multiplication (x, y) {
 return x * y;
}

84ddebe8 2aa5 4294 89d9 B83526459d29

A function definition expression is another method of declaring a function by assigning it to a variable or constant. It can then be passed as an argument to another function or used as a return value.

The syntax for declaring a function expression is as follows:

var variable_name = function function_name (parameters) {
 commands;
}

The function_name parameter is optional. In its absence, the function will be considered anonymous.

Unlike regular functions, a functional expression can only be called after it has been declared in the code.

An example of a functional expression:

const multiplication = function (x, y) {
 return x * y;
}

console.log(multiplication(2,5));

Image5

The basics of arrow functions

Arrow functions (arrow function expressions) are the same as function expressions but anonymous and have some syntax peculiarities. Let's take a closer look at those peculiarities.

  • Concise and clear syntax

The syntax of arrow functions in JavaScript is intuitive and concise. Its basic version is as follows:

(set_of_parameters) => {
 set_of_commands;
}

As we can see, the main difference between arrow functions and normal functions is the absence of the function keyword and the addition of => characters after the argument list in brackets.

For example:

const multiplication = (x, y) => x * y;
console.log(multiplication(2,5));

Here, we did not use curly braces because the function's body contains only one operation. Also, we did not specify an explicit return of the result, as it will happen automatically.

When we execute this code, the result is as follows.

3b12e0af Dfaa 4ab1 9e3b E3676ccf9771

  • The this keyword

Arrow functions operate only in the scope in which they are declared, and do not have their own functional execution context. This implies that entities such as this or argument are inherited exclusively from parent functions.

For a more detailed understanding, here is an example where we will use both a regular function and an arrow function:

function Animal() {
    this.group = 'Mammals',
    this.name = 'Elephant',
    this.Animal1 = function () {
        console.log('Operation of a normal function:')
        console.log(this.group);

        function exampleFunction1() {
            console.log(this.name);
        }
        exampleFunction1();
    }
    this.Animal2 = function () {
        console.log('Operation of an arrow function:')
        console.log(this.group);

        let exampleFunction2 = () => console.log(this.name);
        exampleFunction2();
    }
}

let x = new Animal();
x.Animal1();
let y = new Animal();
y.Animal2();

In this example, this.group is available both inside this.Animal1 and inside this.Animal2, since these are two methods of the same object. However, inside these methods, in the first case this.name returns an undefined value, and the output is empty since this function has its own context (in this case, window). In the second case, however, it references the parent scope and returns this.name = 'Elephant'

When we execute the code, we receive the following output:

Operation of a normal function:
Mammals

Operation of an arrow function:
Mammals
Elephant
  • Constructors

Arrow functions cannot be used as constructors, nor can they have their own properties and methods because they lack the prototype property the normal functions have. When calling them with the new operator, the system will generate an error.

93257324 Ae14 4f5d 8c01 Bb0e7ff4e63e

Also, since the arrow is followed by curly braces denoting a code block with commands, the user will not be able to create an object inside the function or return an object literal from it in the usual way. For example, the following code fragment will generate an error:

(firstName, lastName) => {firstName: firstName, lastName: lastName};

The system considers it the function's body; that's why an error occurs in this code fragment. To fix this, we need to enclose the object literal in parentheses:

(firstName, lastName) => ({firstName: firstName, lastName: lastName});

Examples of use

Arrow functions are acceptable anywhere in a program but are especially useful in callback functions that take other functions as parameters. In the following example, we use it as a callback for the map method:

const example_numbers = [1, 2, 3, 4, 5];
const doubling = example_numbers.map(number => number * 2);
console.log(doubling);

2816e5f6 82d2 409d 9404 51eed418103b

Like with curly braces, we can omit parentheses if only one parameter is specified, as in the example above.

Another example of arrow functions is using them in the reduce method. In the following example, we use an arrow function to add up all the elements of an array:

const example_numbers = [1, 2, 3, 4, 5];
const sum = example_numbers.reduce((total, number) => total + number, 0);
console.log(sum);

As a result, we get the following:

E4549098 9d51 4a29 B6ee 4b4a056347c2

When to avoid using arrow functions

There are cases where regular functions are preferable to arrow functions. 

Mostly, they are related to the this keyword behavior and its peculiarities, because of which you shouldn't use arrow functions in object methods.

Let’s look at this example:

let animal = {
    group: 'Amphibians',
    name: 'Lake frog',
    infoAnimal: () => {        
console.log('Animal group -',this.group);
console.log('Animal name -',this.name);
    },
}

animal.infoAnimal(); 

Here, we have the infoAnimal method, which outputs information about the object when we call it with the animal.infoAnimal(). In this case, its lexical environment is window. Hence, it has nothing to do with the group and name object properties. 

This is the result we get:

Animal group - undefined 
Animal name - undefined

Now let's rewrite the code using a normal function and look at the result:

let animal = {
    group: 'Amphibians',
    name: 'Lake frog',
    infoAnimal: function () {        
            console.log('Animal group -',this.group);
    console.log('Animal name -',this.name);
    },
}

animal.infoAnimal();

We can see that this method works successfully:

Animal group - Amphibians 
Animal name - Lake frog

In addition to object methods, you shouldn't use the arrow functions for functions with a dynamic context, because they bind the context statically. For example, this applies to working with event handlers or event listeners.

What to remember

  • Arrow functions (arrow function expressions) are the same as function expressions, but anonymous and with some syntax peculiarities.

  • Their basic syntax is as follows:

(set_parameters) => {
 set_commands;
}
  • When using the arrow functions, you can remove parentheses around a parameter if it is a single parameter. If the function implements only one operation, you can also use implicit return, which means deleting curly brackets and the return keyword.

  • Arrow functions work only in the scope in which they were declared, and do not have their own functional execution context. So, entities such as this or argument are inherited exclusively from parent functions.

  • When working with object methods, dynamic context or constructors, you should use regular functions, not arrow functions.

JavaScript
24.11.2023
Reading time: 7 min

Similar

JavaScript

Looping through Objects’s Keys and Values in JavaScript

JavaScript, a user-friendly programming language with important components such as object keys and values, serves as a robust creator of dynamic and interactive web applications. Complex and constantly changing data require efficient iterating over the object's keys and values. It is precisely the 'iterating through object keys and values' concept, or simply JS looping through object keys and values that provides access and performs required actions. You can expand the functionality of your applications and manipulate data with skill once you have mastered these strategies. A fundamental ability for any JavaScript developer enhances the processing and manipulation of intricate data sets, increasing the flexibility and dynamic nature of your code. This cost-effective solution allows developers to readily access and change data without repeating code, even when the data is continually changing and updating. In this article, we’ll delve into various techniques and methods to loop through object keys and values in JS, so you’ll learn how to apply them in your code. Whether you are a beginner or an experienced developer, read on to discover how to improve your data manipulation skills and efficiently apply them in your own projects. Explore the world of looping through object keys and values in JavaScript. JavaScript Object: Key-Value Pairs Objects in JavaScript Before diving into the theory and practice, let's start with understanding what objects are in JavaScript. So, they are a collection of key-value pairs, where the key is a unique identifier and the corresponding value is any data type. They allow data to be stored and manipulated in a structured and organized way. Also they contain any number of key-value pairs with different data types. The loop through object feature in JS stands for creating complex objects, suitable for storing, sorting, filtering, searching and manipulating large amounts of data. Objects can have functions as their values, known as methods, which perform specific actions or operations on the object's data. New key-value pairs can be added to an object, existing values can be modified, or even deleted if required. Basic for loop through object keys and values in JS The JS for loop is commonly used for iterating through arrays and objects as well as for looping through object keys and values, especially to get access and manipulate specific properties within an object.  To start, learn the basic for loop method for looping through an array: for (var i = 0; i < array.length; i++) {// code to be executed} This for loop has three parts: the initialization (var i = 0) the condition (i < array.length) the increment (i++). The loop runs as long as the condition is true, and each time it loops, the i value is increased. This feature gives access to each element in the array with the help of the i index. To use a similar for loop to iterate through object keys and values, you should apply the for...in loop designed specifically for objects: for (var key in object) {// code to be executed} In this loop, the variable key takes on the value of each key in the object as it loops through the JS object. This feature gives access to the corresponding value for each key via object[key]. For instance, for an object called site with the properties web name, age, and occupation, each property and its value can be accessed via the for...in loop: var site = { web name: 'Hostman', age: 5, occupation: 'cloud service provider' }; for (var key in site) { console.log(key + ': ' + site[key]); } // Output: // name: Hostman // age: 5 // occupation: cloud service provider This means without knowing the precise names of the properties beforehand, the for...in loop provides quick access to all of the keys and values in an object. When working with big and complicated items, this is helpful. The for...in loop is also used to check if a specific property exists in an object, and modify its value by using the hasOwnProperty() method: for (var key in site) { if (site.hasOwnProperty(key)) { // code to be executed } } The for loop feature for iterating through object keys and values in JS provides quick access to the properties and the ability to manipulate them within an object. By understanding the syntax and usage of the feature, you can improve the functionality of working with objects and shorten your code. The Object.keys() method to loop through objects in JS The built-in Object.keys() method in JavaScript allows you to get an array of all the keys of a given object. The JS feature is designed to loop over all the properties of an object because it is a simple way to access and manipulate each key individually. The idea is to pass the object you want to get the keys from as a parameter, and the method returns an array of all the keys in that object. Static method syntax is called directly on the Object class, not on the object instance. That's why it got its name Object.keys(). The parentheses after the method name are used to pass the object from which you want to get the keys. For instance, for an object called site with properties such as web name, age, and occupation, apply the following Object.keys() method: Object.keys(site) The JS method will loop over the properties of the passed object and return an array of all keys. The keys in the array are arranged in the same order in which they appear in the object due to the fact that objects in JavaScript are unordered, meaning there is no guarantee that the properties will be returned in a particular order. However, the Object.keys() method ensures that the keys are returned in the order in which they were added to the object. The Object.values() method to loop through objects in JS The Object.values() method allows you to quickly access and retrieve all the values ​​of an object as an array, simplifying the way you manipulate and loop through an array of objects in JS. For instance, for an object called site that contains various properties such as web name, age, occupation, using the Object.values() method allows retrieving all the values of this object in the form of an array. The syntax is simple and consists of passing the object site as a parameter: const siteValues = Object.values(site); This feature will return an array with all the site object values in the same order as they are defined in the object. This array helps performing various operations, such as filtering or sorting the data. Combining Object.keys() and Object.values() for efficient object iteration in JavaScript A more effective method for looping through an object in JavaScript is to use the Object.keys() and Object.values() methods. While the second one gives an array of all the corresponding values, the first one returns an array of all the keys that are present in an object. When both approaches are used together, an object's keys and values can be accessed. For instance, for an object called site with properties like web name, age, occupation, apply the following code. const site = { web name: 'Hostman', age: 5, occupation: 'cloud service provider' }; const keys = Object.keys(site); const values = Object.values(site); console.log(keys); // Output: ['web name', 'age', 'occupation'] console.log(values); // Output: ['Hostman', 5, 'cloud service provider'] As a result of the synergy of both methods, two arrays were returned containing the keys and values of the site object. They are easily accessed and manipulated to perform any operation on the object, including loop through object properties in JS. The for...of method to loop through object in JS The for...of loop provides a simplified syntax compared to the traditional for...in loop, iterating over the values of an object while working with arrays, strings, and other iterable objects. The feature eliminates errors or bugs in code as there is no need for manual counting or using a counter variable. Automatically iterating over each element of the iterable object and assigning it to a variable improves the loop through object keys in JS. The feature can be used with any iterable object, regardless of its length or size, with a variable number of elements, such as arrays. For instance, if you want to print out each flower separately, use the for...of loop.  To start, declare the array of flowers: const flowers = ['rose', 'daisy', 'violet']; Next, apply the for...of loop to iterate over the elements in the flowers array and print out each flower: for (const flower of flowers) {console.log(flower);} In this code, the variable flower is automatically assigned to each element in the flowers array in every iteration of the loop, allowing the value of each flower to be accessed and printed without manually declaring and incrementing a counter variable. The Object.entries() method in JavaScript The Object.entries() method stands for efficient iteration through the keys and values of an object. Simple access to and manipulation of object properties eliminates the need for complex syntax or methods. It takes an object as a parameter and returns an array of arrays. Each inner array consists of two elements, where the first is the object's property key, and the second is the corresponding value. This is a useful feature to loop through an object and access both the keys and values at the same time in JS. For instance, for an object called site with properties such as web name, age, and occupation, apply the Object.entries() method to loop through this object and access both the keys and values. The syntax looks as follows: Object.entries(site); This will return an array of arrays with the following structure: [['web name', 'Hostman'], ['age', 5], ['occupation', 'cloud service provider']] Each inner array contains two elements, the key and value of the object property to access both of them in a single iteration. This method can be used in conjunction with a for loop to iterate through the array and perform any desired operations with the objects in JS. It also allows us to convert an object into an array of key-value pairs to manipulate or transform an object into a different data structure. For instance, apply the Object.entries() method to convert an object into a Map, which is a data structure with key-value pairs. To do this, use the following syntax: const map = new Map(Object.entries(site)); This will create a new Map with the same key-value pairs as the original object. The Object.getOwnPropertyNames() method in JavaScript The getOwnPropertyNames is a method that retrieves all of an object's own properties, including both enumerable and non-enumerable ones, but it excludes Symbol-keyed properties. Let’s try this method. First, we define an object.  const appConfig = { theme: 'dark', language: 'en' }; We can then add a non-enumerable internal property to the object.  // Add non-enumerable internal properties Object.defineProperty(appConfig, 'version', { value: '1.0.0', enumerable: false }); We can then use Object.getOwnPropertyNames(appConfig) to display the properties.  console.log(Object.getOwnPropertyNames(appConfig)); // Output: ["theme", "language", "version"] getOwnPropertyNames will display all internal properties, including hidden ones (version). We can then use the result to loop through the object and display the properties and their values. Object.getOwnPropertyNames(appConfig).forEach(key => { console.log(`${key}: ${appConfig[key]}`); }); // Output: // theme: dark // language: en // version: 1.0.0 The Reflect.ownKeys() method retrieves all own properties of an object, including string keys and symbol keys. By default, symbol keys are not visible for Object.keys() and Object.getOwnPropertyNames() methods. const plugin = { name: 'AuthPlugin', settings: { enable2FA: true, }, [Symbol('id')]: 'auth123', }; // Iterate over all keys Reflect.ownKeys(plugin).forEach(key => { console.log(`${String(key)}: ${plugin[key]}`); }); // Output: // name: AuthPlugin // settings: { enable2FA: true } // Symbol(id): auth123 Looping Through a Nested Object When a JavaScript object contains other objects as values, a simple loop won’t be enough to traverse the whole object. To resolve this issue, we can use recursion combined with the Object.keys().forEach() method.  Here is an example.  const nestedObject = { name: "Alice", details: { age: 25 } }; function traverse(obj) { Object.keys(obj).forEach(key => { if (typeof obj[key] === "object" && obj[key] !== null) { traverse(obj[key]); // Recursively handle nested objects } else { console.log(`${key}: ${obj[key]}`); } }); } traverse(nestedObject); // Output: // name: Alice // age: 25 Iterating Objects with Object.entries / Object.keys Conclusion Loop through object keys and values in JS provides quick access to data stored in objects for manipulation and makes a code more dynamic and flexible. In this tutorial we showed you the basic methods for looping through object keys and values. Mastering these techniques is essential for a developer looking to create complex and efficient applications. By constantly learning and exploring new techniques and resources, you will become more adept at working with objects in your code. Keep practicing and experimenting with different approaches to find the one that works best for your specific project.
25 August 2025 · 11 min to read
JavaScript

JavaScript Array Methods

Arrays in JavaScript are a data structure that stores various elements, often of the same type. Their main feature is storing multiple values in a single variable. Thanks to their integrated methods and properties, you can add, delete, process, or search the data based on your needs.  All array values are elements. In turn, they have their own index. Variables can be either of the same or different data types, allowing you to organize more complex data structures. Creating an array There are two ways to initialize an array: 1. Using a literal syntax. In this case, elements are listed inside square brackets and separated by commas.  const ExampleArr = [element0, element1, …, elementN]; 2. using the Array() constructor. Syntax: const ExampleArr = new Array(element0, element1[, …[, elementN]]);const ExampleArr = new Array(arrayLenght); In both methods, we pass elementN as parameters. These are the variables that create the set of ExampleArr values. ArrayLength is the number of elements. Their default value is not defined.  After creating the array, let’s fill it in. Let's create a set of values that stores employees' names. Using the first method: var EmployeeArr = [‘Alex’, ‘Bob’, ‘Oliver’]; Using the second one: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’); Access to array elements  To access an array element, we use square brackets with an integer value of its index inside them. Let's get the value of two elements of the previously created value set EmployeeArr: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);console.log (EmployeeArr[1]);  The index numbering starts from 0, which we should remember when referring to the N-th element. Its index will be N-1. In our case, it will equal 1. To change the value of an element, you need to assign a new value to the variable, as shown below: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);EmployeeArr[1] = ‘Jack’; Now EmployeeArr contains 'Alex', 'Jack', and 'Oliver.' Now let's look at length, an important property that returns the length of an array in JavaScript. var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);console.log (EmployeeArr.length);  The length of EmployeArr in our case will be 3. - Array methods Array methods in JavaScript allow developers to work with data more efficiently and conveniently. Their use will help with conversion, sorting, searching, adding or removing elements.  In this article, we'll look at most of the existing JavaScript array methods, grouped by their work logic. Adding and removing elements There are four main methods to add or remove elements from an array: push(), pop(), shift(), and unshift(). push() adds one or more elements to the end of the value set. pop() deletes the last element. shift() deletes the first element. unshift() adds one or more elements to the beginning. Let's look at examples. We'll indicate the output of each method in the comment. var arr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);arr.push (‘Jack’); // ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’arr.unshift (‘Jacob’, ‘George’); //; ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’arr.pop (); // ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’arr.shift (); // ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’ The pop() and shift() methods return the value of the deleted element, while push() and unshift() return the length of the modified array. In addition to the above methods, we should mention the universal splice() method. It allows you to insert, delete, or replace elements. Syntax of the splice() method: array.splice(startIndex, deleteCount, element1, element2, ...); Parameters:  startIndex is the index where the splice should begin. If this parameter exceeds the array length, the startIndex value will equal the length or take the difference between array.length and this number if a negative number is entered.  deleteCount is the number of elements to delete starting from startIndex. It can be equal to 0. In this case, nothing happens.  element1, element2, .... are the elements we add to the array (optional parameter). The splice() method returns the set of deleted values. In the example, let's look at several ways to apply splice(). The comments will specify the set of values after the method is executed. Below, we will remove two elements, starting with 3: var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);Dog.splice ( 2, 2 ); // ‘Beagle’, ‘Boxer’, ‘Dachshund’, ‘Dalmatian’ Now let's remove one element starting at 4 and add 'Doberman': var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);Dog.splice (3, 1, ‘Doberman’); // ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Doberman’, ‘Dachshund’, ‘Dalmatian’ Iterating through an array The forEach() method is responsible for iterating array elements. arr.forEach(function callback(currentValue, index, array), thisValue); Parameters: callback is the main parameter, namely the callback function that will be executed once for each element. Its arguments are currentValue, index, array. currentValue is the element to be processed in the set. index is this element's index. array is the array of the selected element. thisValue is an optional parameter. It takes the value used as this when calling the function. The returned value is always undefined. Here are two examples: one using thisValue and one without it. The example without thisValue parameter: var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);var NewDog = [ ];Dog.forEach (function (element) {NewDog.push (element);}) The result will be a new set of NewDog values that completely replicates Dog. Example with the thisValue parameter: var numbers = [1, 2, 3, 4, 5];var doubleNumbers = [ ];var myObject = {    double: function(element) {        return element * 2;    }};numbers.forEach (    function (element) {        doubleNumbers.push(this.double(element));     }, myObject); The result is a doubleNumbers set, which consists of numbers multiplied by two. Searching for an element in an array Such methods as indexOf(), lastIndexOf(), includes(), find(), findIndex(), and filter() help to search for items.  The indexOf() and lastIndexOf() methods search for the required value among all the elements and return its index at the first match. The former searches from the beginning of the array, while the latter searches from the end. Both methods will return -1 if the searched value is not found. Syntax of indexOf() and lastIndexOf() methods: array.indexOf( searchElement, fromIndex )array.lastIndexOf( searchElement, fromIndex ) The searchElement parameter is the same in both cases. It is the element we need to find. This is not the case with the fromIndex parameter. This is the starting index of the element to search for. When indexOf() is used, the fromIndex parameter defaults to zero. In the lastIndexOf() method, it is equal to array.length.  Let's try using these methods in the example below.  var Employee = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘George’, ‘Oliver’, ‘Jack’);Employe.indexOf (‘George’);Employe.lastIndexOf (‘George’); The result of the indexOf() method will be 1 because the first match occurred with an element whose index is 1. In the case of lastIndexOf(), the result will be 3. The next search method is includes(). It determines whether the set of values contains a certain element, returning true or false depending on the result. The syntax of the includes() method: array.includes(searchElement, fromIndex) The parameters are exactly the same as in the previously discussed indexOf() and lastIndexOf() methods. The only difference between them is the return value. The fromIndex parameter is 0 by default. Here's an example of using the includes() method: var Employe = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);Employe.includes (‘Alex’);Employe.includes (‘Jacob’, 3); The result in the first case will be true. In the second case, false. In practice, JavaScript often uses arrays of objects. In this case, you should search using the find() and findIndex() methods. arr.find(function callback(currentValue, index, array), thisValue); arr.findIndex(function callback(currentValue, index, array), thisValue);  Parameters of find() and findIndex() methods are similar to forEach(), so you can find their descriptions above. Let's look at an example of using the find() and findIndex() methods: var Employee = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);Employee.find (element => element == ‘Jacob’);Employee.findIndex (element => element == ‘Jacob’); The return value of the find() method is 'Jacob', and of the findIndex() method is 0. The find() and findIndex() methods are suitable for searching one object. If the task is to find several objects, we can use another method: filter().  Syntax of the filter() method: var filteredArray = arr.filter(function(currentValue, index, array), thisValue);  The parameters of this method are also similar to the parameters of the forEach() method. Let's try it. Here we will search for employees who have worked in the company for less than two years: var Employee = [ {name: “Jacob”, experience: 3},{name: “George”, experience: 1},{name: “Alex”, experience: 1},{name: “Bob”, experience: 4}];var result = Employee.filter(element => element.experience <2); The method will result in a new array consisting of two employees with less than two years of experience. Methods for converting arrays The last group of array methods in JavaScript that we will describe in this article are array transformation methods. These include map(), flat(), flatmap(), sort(), and reverse(). Let's look at each of them in more detail below. map() organizes a new set of values with the result of calling the specified callback function for each element. The syntax of the map() method: var newArray = array.map(function(currentValue, index, arr), thisValue);  Once again, we see the same parameters as in the previously discussed methods. The return value of this method will be a new array with the elements of the callback function result. Let's consider the example that we already used earlier with forEach(), where all the set data were doubled. Now, let's use map() instead of forEach(). var numbers = [1, 2, 3, 4, 5];var doubleNumbers = numbers.map(     function double( element ) {        return element * 2;    });console.log(doubleNumbers); The result is doubleNumbers, a new set of values consisting of numbers 2, 4, 6, 8, 10.  When we use the map() method, the number of lines of code is noticeably reduced compared to forEach(). Also, the forEach() method is used only for iteration and returns nothing. map() returns a new array of the same length as the original array. Flat() allows you to interact with a nested set of values. It returns a new array with all sub-array values merged into it recursively  up to the specified level. The syntax of the flat() method: var newArray = arr.flat(depth); Here, depth specifies the level, i.e. how deep a nested array structure should be flattened. If the nesting depth is unknown, you can set the value of the parameter as Infinity. By default, it is equal to one. Let's consider an example of using the flat() method: var arr = [1, 2, , [4, 5, [6, 7]]];var NewArr = arr.flat(Infinity); The result is NewArr [1, 2, 4, 5, 6, 7]. It is worth noting that one was missing in the set of arr values. The flat() method removed the empty slots. We can combine the previous two methods into one: flatmap().  The syntax of the flatmap() method: var new_array = arr.flatMap(function callback(currentValue, index, arr), thisValue) Here is an example of using flatmap(): var arr = [[1], [2], [3], [4], [5]];var NewArr = arr.flatMap(element => element * 2); The result will be NewArr [2, 4, 6, 8, 10]. The sort() method allows sorting the data set. The default sorting order corresponds to the order of Unicode code characters. Syntax of the sort() method: array.sort(function(firstValue, secondValue));  You can specify a function that determines the sort order as a parameter. Example: var EmployeeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);EmployeeArr.sort (); The result of sorting will be EmployeArr ['Alex', 'Bob', 'George', 'Jack', 'Jacob', 'Oliver']. The reverse() method is also worth mentioning.  Syntax of the reverse() method: array.reverse(); In the example, let's change the order of employees’ names in the previously sorted array. var EmployeeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);EmployeeArr.sort ();var reversed = EmployeeArr.reverse(); The result of the reverse() method is EmployeArr ['Oliver', 'Jacob', 'Jack', 'George', 'Bob', 'Alex']. Conclusion This article has covered the basic, but not all, array methods in JavaScript. It is not easy to memorize them all at once. But it will become easier with experience in solving problems and using the methods in code. The main thing is to memorize how they work and what they are used for, and if necessary, you can always refer to this article to remember the syntax or see examples. Frequently Asked Questions What are the most commonly used JavaScript array methods? In day-to-day dev work, .map(), .filter(), .reduce(), .forEach(), and .slice() are your best friends — powerful and versatile. What is the difference between map and forEach in JavaScript? .map() transforms and returns a new array. .forEach() just runs code for each element without returning anything. How do I remove elements from an array in JavaScript? Use .filter() or .splice() depending on whether you need immutability or not.
16 June 2025 · 12 min to read
JavaScript

How to Use .map() in JavaScript

JavaScript supports several methods for iterating over arrays. Developers commonly use the traditional for loop and the less common .forEach() method. However, the most popular method is .map(). This method creates a new array by calling a function on every element of the original array. It avoids mutations and generates truly "clean" arrays.  This is different from mutation-based methods, which inevitably alter the original array in some way. In this article, we'll explore four ways to use .map() in JavaScript (though many more exist). Method 1: Calling Functions on Individual Array Elements When using .map() in JavaScript, the callback function is treated as an argument. The value of the array element at the time of execution becomes a required parameter of this function. You can use it to modify or create functions. Example: const sweetArray = [6, 7, 11, 13, 20]; const sweeterArray = sweetArray.map(sweetItem => {     return sweetItem * 2; }); console.log(sweeterArray); Output: [12, 14, 22, 26, 40] You can clean up and simplify the code: const makeSweeter = sweetItem => sweetItem * 2; const sweetArray = [6, 7, 11, 13, 20]; const sweeterArray = sweetArray.map(makeSweeter); console.log(sweeterArray); Output: [12, 14, 22, 26, 40] Using sweetArray.map(makeSweeter) makes the code more readable compared to the first version. Method 2: Converting Strings to Arrays You can use the .map() method from the Array prototype to convert strings. Instead of working directly with arrays, we use .call() to apply .map() to a string. Keep in mind that in JavaScript, strings can be treated like arrays of characters, allowing access to some array methods. Example: const name = "Hostman"; const map = Array.prototype.map; const newName = map.call(name, eachLetter => {     return `${eachLetter}e`; }); console.log(newName); Output: ["He", "oe", "se", "te", "me", "ae", "ne"] In this example, .map() is used to transform each character in the string by appending an "e". This works similarly to .split() and other methods that operate on string characters before transforming them back into an array. Method 3: Rendering Lists in JavaScript Libraries This use case is common in JavaScript frameworks like React. Here, you’ll need JSX syntax since .map() is used within it. For example: import React from "react"; import ReactDOM from "react-dom"; const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"]; const NamesList = () => ( <div> <ul>{names.map(name => <li key={name}>{name}</li>)}</ul> </div> ); const rootElement = document.getElementById("root"); ReactDOM.render(<NamesList />, rootElement); In this example, the React component renders a <div> containing a list. The JavaScript .map() method is used to iterate over the array of names and generate individual list items. Rendering is handled by ReactDOM.render on a DOM element with the ID root. Method 4: Transforming Array Object Formats Another use case for .map() in JavaScript is transforming each object in an array and returning a new array of modified objects. This works much like traditional data processing. Example: const myUsers = [ { name: 'cloud', likes: 'scalability' }, { name: 'devops', likes: 'automation' }, { name: 'kube', likes: 'orchestration' } ]; const usersByLikes = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.popularity = item.name.length * 12; return container; }); console.log(usersByLikes); Output: [   { cloud: 'scalability', popularity: 60 },   { devops: 'automation', popularity: 72 },   { kube: 'orchestration', popularity: 48 } ] In this example, each object in the array is modified using bracket notation and object property assignments. This approach is useful for transforming and condensing incoming data before using it in client-side applications. Conclusion We reviewed four main ways to use the .map() method in JavaScript. You can expand its capabilities by combining it with other methods. For more detailed information, refer to the official documentation.
11 June 2025 · 4 min to read

Do you have questions,
comments, or concerns?

Our professionals are available to assist you at any moment,
whether you need help or are just unsure of where to start.
Email us
Hostman's Support