Mastering Array in JavaScript

What is Array ?

The array object is used to store multiple values in a single data type . It has some core characteristics :

JavaScript arrays are resizable and can contain a mix of different data type.
JavaScript arrays are zero-indexed . The index of the first element of an array is zero (0), then one (1) and so on.

Some Properties , Methods and Key Concept of Array

Creating an Array

Using Array Literals :
```
 const arr = [1 , 2 , 3 , 4]
```
Using new Array() constructor :
```
 const arr = new Array(1, 2, 3, 4)
```
If only one numeric argument is passed, it creates an empty array of that length .
```
 const arr = new Array(5);
```

Accessing Array Elements

Use indexing:

 const arr  = [2, 4, 6];
 console.log(arr[0]);  //Output : 2 (First Element)
 console.log(arr[arr.length - 1]); //Output : 6 (Last Element)

Modify Element :

 const arr = [1,2,3,4];
 console.log(arr); // Output : [ 1, 2, 3, 4 ]
 arr[0] = 45
 console.log(arr); //Output : [ 45, 2, 3, 4 ]

Array Methods

Adding and Removing Element

push( ) - adds element in the end of the array.

 const arr2 = [];
 arr2.push(3)
 console.log(arr2); // Output : [ 3 ]

pop( ) - remove element from the last position of the array.

 const arr2 = [3,5,7,9,4];
 arr2.pop()
 console.log(arr2) ; //Output : [3,5,7,9]

unshift( ) - adds element to the beginning of an array.

 const arr2 = [3,5,7,9,4];
 arr2.unshift(42)
 console.log(arr2); // Output : [42,3,5,7,9]

shift( ) - removes the first element

 const arr2 = [3,5,7,9,4];
 arr2.shift()
 console.log(arr2); //Output : [5,7,9,4]

For Iteration

forEach( ) : The forEach( ) method executes a provided function once for each array element.

 const arr3 = [1,2,"apple",true]
 arr3.forEach((e) => console.log(e)); 
 //Output: 1
 //        2
 //        apple
 //        true

map( ) : creates an array from calling a specific function on each item in the parent array.

 const arr3 = [1,2,3,4]
 const result = arr3.map((e) => e * 2)
 console.log(result); // Output : [ 2, 4, 6, 8 ]

filter( ) : The filter() method of creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function.
```
 const arr3 = [1,2,3,4]
 const result = arr3.filter((e) => e > 2)
 console.log(result); // Output : [3 , 4]
```
reduce( ) : The reduce method in JavaScript is used for iterating over an array and combining its element into a single value . It executes a user-supplied "reducer" callback function on each element of the array.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).
```
 const numbers = [1,2,3,4] ;
 const initialValue = 0;
 const newNumbers = numbers.reduce((acc,currVal) => acc + currVal, initialValue)
 console.log(newNumbers); // Output : 10
```

Searching in an Array

indexOf( ) : The indexOf() method of Array instances returns the first index at which a given element can be found in the array, or -1 if it is not present.

Syntax :

indexOf(searchElement)

indexOf(searchElement, fromIndex)
```
 const arr4 = ["apple", "banana","lemon","Papaya","Mango","banana"];
 console.log(arr4.indexOf("banana" , 2)); //Output : 5
```
lastIndexOf( ) : The lastIndexOf() method of Array instances returns the last index at which a given element can be found in the array, or -1 if it is not present.
```
 const arr4 = ["apple", "banana","lemon","Papaya","Mango","banana","lemon","banana"];
 console.log(arr4.lastIndexOf("banana")); //Output : 7
```
includes( ) : The includes() method of Array instances determines whether an array includes a certain value among its entries, returning true or false as appropriate.
```
 const arr4 = ["apple", "banana","lemon","Papaya","Mango","banana","lemon","banana"];
 console.log(arr4.includes("banana")); //Output : true
```
find( ) : The find() method of Array instances returns the immediate first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
```
 const arr5 = [2,3,4,5];
 const result = arr5.find((e) => e > 2);
 console.log(result); //Output : 3
```
findIndex( ) : The findIndex() method of Array instances returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.
```
 const arr5 = [2,3,34,4,5];
 const result = arr5.findIndex((e) => e > 3);
 console.log(result); //output : 2
```

Sorting and Reversing

sort( ) : The sort() method of Array instances sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending.
```
 const arr6 = [1,4,6,3,9,8];
 console.log(arr6.sort());  //Output : [ 1, 3, 4, 6, 8, 9 ]
```
reverse( ) : The reverse() method of Array instances reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first.
```
 const arr6 = [1,4,6,3,9,8];
 console.log(arr6.reverse()); //Output : [ 8, 9, 3, 6, 4, 1 ]
```

Manipulating Array

slice( ) : The slice() method of Array instances returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

Syntax : arr.slice(startIndex , endIndex) [where endIndex is not included]
```
 const arr6 = [1,4,6,3,9,8];
 console.log(arr6.slice(2)); // Output : [ 6, 3, 9, 8 ]
 console.log(arr6.slice(2,4)); // Output : [ 6, 3 ]
 console.log(arr6.slice(-2));  // Output : [ 9, 8 ]
```

splice( ) : The splice() method of Array instances changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

 const arr7 = ["Jan" , "March" , "April" , "June"]
 arr7.splice(1,0,"Feb"); //Inserts at index 1
 console.log(arr7); //Output: [ 'Jan', 'Feb', 'March', 'April', 'June' ]

 arr7.splice(4,1,"May");// Replaces 1 element from index 4 and add "May"
 console.log(arr7); //Output : [ 'Jan', 'Feb', 'March', 'April', 'May' ]

Conclusion

This is some import methods and properties of array object . If someone want to know more about array’s methods then you can check link attached below.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array