All You Need to Know About JavaScript Arrays

In web development, JavaScript Arrays are used to store and organize data efficiently. In this blog post, we’ll learn about the arrays, and methods of accessing, manipulating and looping through arrays.

What are Arrays?

In JavaScript, Arrays are like containers that can hold multiple items such as numbers, strings, objects, or even other arrays. Each item in the array has a number assigned to it, starting from 0 and can be accessed and manipulated using numerical indices.

Creating Arrays

We can create arrays in two ways:

  • Using array literal:
    We can create arrays using array literal [] i.e. by defining the array elements within square brackets [ ]. For example:
  • Using the new keyword:
    The other method to creating arrays is by using new keyword.

Accessing Elements in Arrays

We can access array elements using numerical indices(0, 1, 2…).

Note: The index of an array starts with 0.

Finding the Length of the Array

We can find the length of the array (number of elements in an array) using length property.

Changing Elements in the Array

We can change the elements of an array by accessing their index value. For example:

We can also add a new element to the array. For example:

Array methods

  • pop(): This method removes the last element of the array and returns the removed element.
    This method updates the original array.
  • push(): This method adds a new element at the end of the array and returns the new array length.
    This method modifies the original array.
  • shift(): This method removes the first element of the array and returns the removed element.
  • unshift(): This method adds a new element at the beginning of the array and returns the new array length.
  • toString(): This method converts an array into a string of comma-separated values.
  • join(): This method joins all the elements of an array using a given separator.
  • delete: Elements of an array can be deleted using the delete operator. delete operator leaves undefined holes in the array.
  • concat(): This method creates a new array by joining two or more given arrays.
  • sort(): This method sorts the array elements alphabetically.
  • splice(): This method is used to add, remove, or replace elements at any position within an array.
  • slice(): This method slices out a part of an array and returns a new array.
  • reverse(): This method reverses the elements of the array.
  • indexOf(): This method searches an element of an array and returns the position of the element.
  • find(): This method returns the first value of an element based on a condition.
  • findIndex(): This method returns the first index of an element based on a condition.
  • findLastIndex(): This method returns the last index of an element based on a condition.
  • includes(): This method checks whether an element is present in the array or not.

Looping through Arrays

Arrays can be looped through using the following methods:

  • for(): Arrays can be looped through using the for loop.

Output:

  • forEach(): This loop calls a function once for each element of the array.

Output:

  • map(): This method creates a new array by performing a function on each element of the array.
  • filter(): This method creates a new array by filtering array elements based on a condition.
  • reduce(): This method reduces the array to a single value by performing a function on each element of the array.

Explanation for the above code:

  • array.from(): This method creates an array object from any other object.
  • for...of: This loop can be used to get the values from an array.

Output:

  • for...in: This loop can be used to get the keys from an array.

Output:

Conclusion

Arrays are fundamental data structures that allow to store and organize multiple items efficiently. They can hold various data types, including numbers, strings, objects, and even other arrays. Accessing and manipulating array elements is done through numerical indices, starting from 0.

In this blog post, we have learned about various aspects of creating arrays, accessing elements, finding the length, changing elements, and using important array methods like pop()push()shift()unshift()toString()join()deleteconcat()sort()splice()slice()reverse()indexOf()find()findIndex(), and includes().

Also, how to loop through arrays using different methods such as forforEachmapfilterreduceArray.fromfor...of, and for...in.

Thanks for reading.

Keep Coding!

For more content like this click here!

Follow me on X(Twitter) for daily web development tips.

Check out toast.log, a browser extension that lets you see errors, warnings, and logs as they happen on your site — without having to open the browser’s console. Click here to get a 25% discount on toast.log.

Leave a Comment