Javascript :- Guide on an Array

Why do we use Array?

When we use var, we can store only one value at a time.

when we feel like storing multiple values in one variable instead of var, we will use an array. Arrays are used to store multiple values in a single variable.

Arrays are commonly used in computer programs to organize data so that a related set of values can be easily sorted or searched.

What is Array in Javascript?

Javascript array is an object that represents a collection of similar type of element. an array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size up front.

Array is a collection of values and object. Arrays in JavaScript are the data type used to store a list of values.JavaScript array objects can be stored in variables and deal with in the same way you deal with any other data type.

syntax: Array = [ "", "","" ,"","",]

There are 3 ways to construct an array

  • Array literal

  • Array directly

  • Array constructor

Array literal is the easiest way to create a JavaScript Array.

syntax:-

const arrayName = [value1, value2, ...];

Index number in Array

JavaScript arrays are zero-indexed: the first element of an array is at index 0 , the second is at index 1 , and so on — and the last element is at the value of the array's length property minus 1.

JavaScript Array Methods:-

There are some important array methods in JavaScript. Some of them are as follows:

1.Concat-

used to join array to the given array .it returns a new array object that contains two or more merged array.

const arr1 = [1, 2, 3];
const arr2 = [8, 5, 4];
const arr3=[6, 7, 9] ;

console.log(arr1.concat(arr2));
output:-
[ 1, 2, 3, 8, 5, 4 ]
console.log(arr1.concat(arr2, arr3));
output:-
[ 1, 2, 3, 8, 5, 4, 6, 7, 9]

2.IndexOf-

This method is used to find the index of an element in an array.

Returns the first index at which a given element can be found in the array

If an element is not present then indexOf() method returns -1

const arr1 = [1, "jack", 2, "jam", 1 ,"jack" ];

console.log(arr1.indexOf(1)); output:- 0

console.log(arr1.indexOf("jack")); output:- 1

console.log(arr1.indexOf("jill")); output:- -1
//(because jill is not present in arr1)

3.LastIndexOf-

Returns the last index at which a given element can be found in the array, or -1 if it is not present.

The array is searched backward, starting at fromIndex.

const arr1 = [1, "jack", 2, "jam", 1 ,"jack" ];

console.log(arr1.lastIndexOf(1)); output:- 4

console.log(arr1.lastIndexOf("jack")); output:- 5

console.log(arr1.lastIndexOf("jill")); output:- -1
//(because jill is not present in arr1)

4.Includes-

it checks whether the given array contains the specified element.

Returns true if the given element is present in the array.

const arr1 = [1, 2, 3];

console.log(arr1.includes(1));
output:-  true
console.log(arr1.includes(5));
output:- false

5.Sort-

This method first converts all the elements of the array into a string and then sorts them in ascending order. This method modifies the original array.

This method is used to sort an array alphabetically

const arr1 = ["banana", "grapes", "apple", "orange", "date"];

console.log(arr1.sort());
output:- [ 'apple', 'banana', 'date', 'grapes', 'orange' ]

const arr2 = [4, 8, 5, 9, 3, 7]

console.log(arr2.sort());
output:- [ 3, 4, 5, 7, 8, 9 ]

6.Push-

Appends new elements to the end of an array, and returns the new length.

modifies the original array and returns the new array length

const arr1 = [1, 2, 3, 4];

console.log(arr1.push(15));
output:- 5

7.Pop-

removes the last element from the array and returns that element.

updates the original array and returns the popped value

const arr1 = [1, 2, 3, 4];

console.log(arr1.pop(3));
output:- 4

8.Shift-

Removes the first element from an array and returns that element.
const arr1 = ["jack", "jill", "jam"];

console.log(arr1.shift());
output:- jack

9.Unshift-

Adds an element to the beginning. Returns new array length.

const arr1 = ["jack", "jill", "jam"];

console.log(arr1.unshift("tom"));
output:- 4

10.Splice-

splice can be used to add new items to an array.

splice method returns deleted items, and modifies the array.

const arr1 = [1,2,3,4,5]

console.log(arr1.splice(1, 2));
//here,splice (1,2) is index no.
output:- [ 2, 3 ]

11.Reverse-

This method reverses the position of all the elements in an array. This method modifies the original array

Reverses the elements in the source array.

const arr1 = ["jack", "jill", "jam", "tom"];

console.log(arr1.reverse());
output:- 
[ 'tom', 'jam', 'jill', 'jack' ]

12.Tostring-

This method does not change the original array.

Converts an array to a string of comma separated values.

const arr1 = [1, 2, 3];

console.log(arr1.toString());
output:-
1,2,3

13.FindIndex-

The Javascript Array.findIndex() method is used to return the first index of the element in a given array that satisfies the provided testing function (passed in by the user while calling). Otherwise, if no data is found then the value of -1 is returned.

Conclusion

In conclusion, arrays in JavaScript are a powerful and flexible data structure that allows us to store and manipulate multiple values. With the help of built-in methods like sort, map, and filter, we can easily perform various operations on arrays and transform the data they contain. Additionally, the advanced concepts of spread operators and destructuring allow us to further enhance the power and flexibility of arrays in our code.

Thank you for reading this blog and we hope you have gained a solid understanding of the methods of arrays in JavaScript.

Well! That's quite a long article🥲.

Happy learning...............

JavaScriptWebdevelopmentFrontend Developer
Avatar for Anjali saini

Written by Anjali saini

Hi, my name is Anjali Saini and I'm a creative front-end web developer. I have a passion for creating beautiful, user-friendly websites and applications that are both functional and visually appealing

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.