Most Important Array Methods in JavaScript

Arrays are generally described as "list-objects"; an array is an object containing several values. Array objects can be well stored in variables and treated the same as any other type of value. The difference is that we can access each value in the array individually, and do super useful and efficient things with the list of benefits, like looping and doing the same for each value. Maybe we have a series of items and their prices stored in a table, and we want to go through them all and print them on one invoice while totaling all the prices together and printing the total price down.

As before, let's get started with the practical basics of arrays by entering some examples in a JavaScript console. Here is a lower one (you can also open this console in a separate tab or window or use the developer console of the explorer if you prefer).

Quokka.js

Quokka.js is the first name in this list that has the power of calculating any operation you are typing on your system. The result will then appear in the IDE as Quokka.js shall print it once you complete typing the codes.

find()

This find()method makes the return of the first found element towards the array, that is tested with the provided functions. In case the element is discovered it then returns undefined. Check the following:

             
            const someArray = [
             { id: 1, name: "John" }, 
             { id: 2, name: "Smith" },
             { id: 3, name: "Bob" },
              ]
   			someArray.find(element => element.id === 2)

			//-------> Output : {id: 2, name: "Smith"}

          
          

concat()

You can join two or more arrays right here.

• var totaltable = table1.concat (table2);

findIndex()

This findIndex()method actually returns this index of first found elements in this array, it is then tested with provided functions. In case the index is undiscovered then it returns the -1.

             
            const someArray = [
             { id: 1, name: "John" }, 
             { id: 2, name: "Smith" },
             { id: 3, name: "Bob" },
              ]
   			someArray.find(element => element.id === 2)

			//-------> Output : 2

          
          

indexOf()

Finds an element in the array and returns its position. Search from the beginning and from the first position if nothing is specified.

var a = fruit.indexOf ("Kiwi"); Returns -1 if it can't find it

forEach()

In case of the forEach()method the user uses the function on every element of the array.

             
            const someArray = [
             { id: 1, name: "John" }, 
             { id: 2, name: "Smith" },
             { id: 3, name: "Bob" },
              ]
   			myAwesomeArray.forEach(element => console.log(element.name))

			//Output : John, Smith, Bob

          
          

vscode-icons

This VS code extension will add icons beside the file names that appear in the tree-view form. The icons will be based on the extension each file has, and thus you will be able to identify your files without any ambiguity.

join()

Assemble the elements of an array into a chain with a separator - optional.

fruit var = [«Kiwi», «Limon», «O tra»]; var energy = fruits.join (); // Kiwi, Lemon, Other

map()

The new map()method that applies the functions as the parameters and create a new array that is populated with results of functions on each element.

             
            const someArray = [1, 2, 3, 4]
            
   			someArray.map(x => x * x)

			// Output: 1, 4, 9, 16

          
          

Path Intellisense

It is very important to complete the name of each file and path that you use in your code. But remembering them vividly is not an easy task, and this is where Path Intellisense will help you out. It will complete the path names and file names automatically once you enter the initial characters in your code.

lastIndexOf()

Finds an element in an array and returns its position. Start by looking for the end of the array.

Similar to indexOf () , but if there are several repeats it returns the position of the last one.

flat()

This flat()method makes the creation of one new array as it contains the key element sourced from sub-array and the flat them into a new array. Do remember that the method would work only the one level in the depth.

             
            const someArray = [1, [2, 3], [4, 5]]
            
   			someArray.flat()

			//Output: [1, 2, 3, 4, 5]

          
          

pop()

Here you can delete the last element of the array and return its content.

var a = fruit.pop ();

flatMap()

This flatMap()method happens to be a combination of map methods and the flat. The method makes use of the function on every element that first maps every element by using this map. It flattens the results afterwards into one new array. That method works only on the one level in the depth.

             
            const someArray = [[1], [2], [3], [4], [5]]
            
   			someArray.flatMap(a => a * 10)

			//Output: [10, 20, 30, 40, 50]
          
          

push()

Add new elements to the array and return their new length

a = fruit.push ("lemon");

filter()

Now filter()method applies the function that returns one new array with the entire set of elements which are passing this test.

             
            const someArray = [
              { id: 1, name: "John" }, 
              { id: 2, name: "Smith" },
              { id: 3, name: "Bob" },
              ]
   			  someArray.filter(element => element.name === "Bob")
			  //Output: 0:{id: 3, name: "Bob"}
          
          

sort()

This sort()method sorts out each element of array as well as returns in the sorted array. Now sorting orders by default happens to be ascending.

             
            const someArray = [4, 1, 3, 2]
              // Sort from smallest to largest
              someArray.sort((a, b) => a - b)
              //Output : [1, 2, 3, 4] 
              // Sort from largest to smallest
              myAwesomeArray.sort((a, b) => b - a)
              //Output : [4, 3, 2, 1]
              
          
          

reverse()

Invert the order of the array elements with it.

fruit.reverse ();

shift()

Remove the first element from the array and return the element.

a = fruit.shift ();

slice()

Select part of an array and return its content.

fruit var = ["Banana", »Orange», »Lemon», »Apple», »Mango»]; var citrus = fruit.slice (1,3) ; // citrus = «Orange», »Lemon» From 1 («Orange») to 3 («Apple») without including it

sort()

Sort the array elements. Sorts them as strings.

splice()

Add or remove elements from an array.

toString()

Converts an array to string and returns the result (between commas).

fruit.toString (); // »Banana, Orange, Lemon, Apple, Mango»

unshift()

Add the elements to the begin the array and return the new length.

fruit var = ["Banana", "Orange", "Apple"]; fruit.unshift ("Lemon", "Pineapple"); // Lemon, Pineapple, Banana, Orange, Apple

split()

it converts a string to an array.

var str = "Monday, Tuesday, Wednesday"; var days = str.split («,»); // days [0] = "Monday", days [1] = "Tuesday", etc.

Last Words

Without arrays, we should store each value in a separate variable, then call the code that performs the display or print, then add each item separately. It would be longer to write, less efficient and it would carry more risk of errors. If we had 10 items for adding to the bill, that would be bad enough, but what about 100 items or 1000? All the questions are answered aforementioned.