Array Methods in Javascript

Introduction

It would have been tough if we had to store every element individually, especially when so many. Arrays in JavaScript help us to tackle this problem. Moreover, there are so many different JavaScript methods that make the operation of the array easier.

In this article, we’ll get to know some of the important JavaScript functions with the help of examples. So, let’s get started!

Array in JavaScript

An array is a single object that stores multiple values in a list. Arrays are commonly referred to as "list-objects." It acts like a container that helps in storing numerous values. Array objects can be stored and treated like any other type of value in variables. The difference is that we can access each value in the array separately.

Array Methods

There are various useful methods of an array that helps in performing different work in an array. These methods are described below:

  • find() array method

The find() method is used to return the first found element in the array, which is tested with the given conditions. If no value satisfies the testing condition, it returns undefined. 

Example:

const arr = [510152025];
const result = arr.find(element => element > 8);

console.log(result);
// expected output: 10

 

  • findIndex() array method

This findIndex() method returns the index of the first found elements in the array. It is then tested with provided functions. It returns -1 when the condition is not satisfied by any element in the array.

Example:

const arr = [510152025];
const isLarger = (element) => element > 8;
console.log(arr.findIndex(isLarger));
// expected output: 1         

 

  • indexOf() array method

The indexOf() method returns the position of an element in an array. If nothing is specified, it starts searching from the first position or beginning of the array.

Example:

const ninjas = ['web''coding''dev''welcome''coding'];


console.log(ninjas.indexOf('web'));
// expected output: 0

// starting from index 2
console.log(ninjas.indexOf('coding'2));
// expected output: 4

console.log(ninjas.indexOf('hello'));
// expected output: -1

 

  • lastIndexOf() array method

The lastIndexOf() method is used to find the element in an array and return its position. It starts by looking from the end of the array.

It is similar to the indexOf() method, but it returns the last element’s position if more than one element is present.

Example:

const ninjas = ['web''coding''dev''welcome''coding'];

console.log(ninjas.lastIndexOf('web'));
// expected output: 0

console.log(ninjas.lastIndexOf('coding'));
// expected output: 4

 

  • reverse() array method

The reverse() method is used to invert the order of the array elements.

Example:

const arr = ['Hello''Coding''Ninjas'];

const reversedArray = arr.reverse();
console.log('reversed:', reversedArray);
// expected: Array ["Ninjas", "Coding", "Hello"]

 

  • concat() array method

To combine two or more arrays, use the concat() method. This method creates a new array rather than altering the existing ones.

Example:

const arr1 = ['c''o''d'];
const arr2 = ['i''n''g'];
const arr3 = arr1.concat(arr2);

console.log(arr3);
// expected output: ["c", "o", "d", "i", "n", "g"]

 

  • forEach() array method

The forEach() method is used to call all the elements of an array once.  

Example:        

const arr = ['w''e''b'];


arr.forEach(element => console.log(element));

// expected output: "w"
// expected output: "e"
// expected output: "b"    

 

  • join() array method

The join() method concatenates all of the elements in an array, separated by commas or a specified separator string, and returns a new string. If the array contains only one item, the separator will not be used, and the item will be returned.

Example:

const result = ['Hello''Coding''Ninjas'];

console.log(result.join());
// expected output: "Hello,coding,Ninjas"

console.log(result.join(''));
// expected output: "HelloCodingNinjas"

console.log(result.join('-'));
// expected output: "Hello-Coding-Ninjas" 

 

  • map() array method

The new map() method takes the functions as parameters and creates a new array with the results of each element's functions.

Example:

            
const arr = [510152025];
 
// It passes a function to map
const map1 = arr.map(x => x * 2);
 
console.log(map1);
// expected output: Array [10, 20, 30, 40, 50]

          

  • flat() array method

The flat() method creates a new array by taking the key element from a sub-array and flattening it into a new array.

Example:

 const arr = [51015, [2025]];

console.log(arr.flat());
// expected output: [5, 10, 15, 20, 25]
    

         

  • pop() array method

The pop() method is used to remove the last element of an array. It returns the deleted element of the array. It also changes the size of the array.

Example:

const result = ['Hello''Coding''Ninjas'];

console.log(result.pop());
// expected output: "Ninjas"

console.log(result);
// expected output: Array ["Hello", "Coding"]

 

  • push() array method

The push() method is used to add a new element at the end of the array. It returns the newly increased length of the array.

Example:

const result = ['Hello''Coding''Ninjas'];

const increasedLength = result.push('welcome');
console.log(increasedLength);
// expected output: 4

 

 

  • filter() array method

Now filter() method applies the condition in the array and returns a new array with the entire set of elements passing the condition.

Example:

const ninjas = ['web''coding''dev''welcome''coding'];

const filteredArray = ninjas.filter(ninjas => ninjas.length > 4);

console.log(filteredArray);
// expected output: Array ["coding", "welcome", "coding"]

 

  • sort() array method

This sort() method is used to arrange the elements of an array in ascending (default) order. It returns the sorted array. It compares the array as a string by converting the elements into its string, and then it compares their sequences of UTF-16 code units values. 

Example:

const result = ['Hello''Coding''Ninjas'];
result.sort();
console.log(result);
// expected output: Array ["Coding", "Hello", "Ninjas"]

 

  • shift() array method

The shift() method is used to remove the first element of an array. It returns the removed element and changes the size of the array.

Example:

const arr = [510152025];

const firstdigit = arr.shift();

console.log(firstdigit);
// expected output: 5

 

  • unshift() array method

The unshift method is used to add an element at the beginning of the array. It returns the newly increased length of the array.

Example:

const arr = [510152025];

console.log(arr.unshift(0));
// expected output: 0

console.log(arr);
// expected output of the new array: Array [0, 5, 10, 15, 20, 25]

 

  • slice() array method

The slice() method creates a new array object with a copy of a portion of an array from a start index to an end index. Here the end is not included. But the original array will remain the same.

Example:

const ninjas = ['web''coding''dev''welcome''coding'];

console.log(ninjas.slice(13));
// expected output: Array ["coding", "dev"]

 

  • toString() array method

The toString() array method is used to convert an array to a string. 

Example:

const arr = [510'coding''ninjas'];

console.log(arr.toString());
// expected output: "5,10,coding,ninjas"

 

These were some of the important methods used in JavaScript Arrays, let’s see some of the most frequently asked questions of this topic.

Frequently Asked Question

 

Q1) Does array find() return a copy?

Answer: The value of the first element in the provided array that satisfies the provided testing function is returned by the find() method. It will return a copy of or a reference to the value according to standard JavaScript behavior, i.e., a copy when the value is a primitive and a reference if the value is a complex type.

 

Q2) Does the array filter return a new array?

Answer: The filter() method returns a new array containing all elements that pass the provided function's test.

 

Q3) What is the best way to declare an array?

Answer: The most common way to declare an array is to simply line up the type name, a variable name, and size in brackets.

Key Takeaways

In this article, we've learned about arrays in JavaScript and their different methods in detail. 

Now, If you are someone who is interested in JavaScript and want to become a great web developer, check out this amazing JavaScript course on web development.

Also, if you are preparing for interviews, visit this JavaScript interview question blog.

Thank you for reading!

 

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think