Arrays in JavaScript : Part – 1

Hey everyone in this blog we will learn Arrays, Array indexing, Basic methods, and Array traversal JavaScript. Array is a variable that is used to store multiple elements. To store multiple values in a single variable at that time we use arrays in javascript.

Initializing an Array-

var arr1 = [10,20,30,40,50];
// Creates an array with elements 10,20,30,40,50
console.log(arr1);
// Output = [ 10, 20, 30, 40, 50 ]

The first element of an array is called as 'lower index/ lower boundary' and the last element of an array is called as 'upper index/upper boundary', index of the first elements of an array is 0, and the index of last element is n-1 where n is array length.

var menu = ['cake','pizza','burger']
// to access the elements by their index number
console.log(menu[0]);   // 'cake'
console.log(menu[1]);   // 'pizza'
console.log(menu[2]);   // 'burger'

// to check the length of an array and elements we use (.length) property-
console.log("Length of 1st element is : " + menu[0].length);   
console.log("Length of 2nd element is : " + menu[1].length);   
console.log("Length of 3rd element is : " + menu[2].length);   
console.log("Length of array is : " + menu.length);    

/*
Output:
Length of 1st element is : 4
Length of 2nd element is : 5
Length of 3rd element is : 6
Length of array is : 3
*/

There are two ways of declaring an array-

The first way of representing an array is preferred over the second way.

1. Initializing while declaring

    var  prices = [100,200,400,500]
    console.log(prices)
    //output = [100,200,400,500]
   

2. Using the keyword "new"

var myFriends = new Array("Raj","Mayur","Abhishek","Toshit");
console.log(myFriends);
// output = [ 'Raj', 'Mayur', 'Abhishek', 'Toshit']

We can add multiple elements of different data types to an array-->

var myData = ['Prem','Shinde',19,true];
console.log(myData);
// output = [ 'Prem', 'Shinde', 19, true ]

---

Array Traversal (Navigate through an Array):

In this section of Array, we will learn Array Traversal methods, and we will learn how to navigate through an array using For, For..in, For..of, and For..each loop.

For loop

As we know in for loop we have an initializer, condition, and iteration count. let's understand how to use for loop in an array with the example -->

var numbers = [ 2 , 4 , 6 , 8 , 10 ];
for(var i=0; i < numbers.length; i++){
console.log(numbers[i]);
}
/*
output = 
2 4 6 8 10
*/

In the above example of for loop var i=0 is the initializer in which we initialized the value of variable i, the condition is i should be less than the length of array numbers (i<5) it will only execute upto index 4, and iteration is i++ increase the value of i by 1 after executing each loop. Let's take another example of for loop-->

var myFriends = ["Raj","Mayur","Abhishek","Toshit"]

for(var i=0; i<myFriends.length; i++){
    console.log(`index of ${myFriends[i]} is ${i}`);  
}
/*
output:-
index of Raj is 0
index of Mayur is 1
index of Abhishek is 2
index of Toshit is 3
*/

In ES6 we have for..in and for..of, and for..each loop which is specially used for Arrays in Javascript

For..in loop

var myFriends = ["Raj","Mayur","Abhishek","Toshit"];
for (let elements in myFriends){
console.log(elements);
}
/*
output = 
0
1
2
3
*/

For..of loop

var myFriends = ["Raj","Mayur","Abhishek","Toshit"];
for (let elements of myFriends){
console.log(elements);
}
/*
output = 
Raj
Mayur
Abhishek
Toshit
*/

For..each loop

Array.prototype.forEach( ) --> Calls a function in the array we can get index, elements, and the array. In this loop, we can't use break statements. Let's take an example using the fat arrow function-->

var myFriends = ["Raj","Mayur","Abhishek","Toshit"]
myFriends.forEach((element,index,array) => {
console.log(element + " index : " + index +" "+ array);
});

/*
output=
Raj index : 0 Raj,Mayur,Abhishek,Toshit
Mayur index : 1 Raj,Mayur,Abhishek,Toshit
Abhishek index : 2 Raj,Mayur,Abhishek,Toshit
Toshit index : 3 Raj,Mayur,Abhishek,Toshit
*/

There are so many other methods of JavaScript Array like search, filter, map, reduce, and many more that we will learn in the next part of this blog, so..stay tuned😎🔥