What is Array

Array is a container used to store multiple values at one place. We can have array of names, array of cities, array of fruits etc.

what is array javascript

How to initialize an array in java script

We will declare two arrays here, array of numbers and array of fruits 

var numArray = [5,8,2,12,5];
var fruitsArray = ['Apple','Mango','Banana'];


How to access array elements

Each value in array is called element. Every element is accessed by its index. First element is at index 0 as indexes start with 0. Second element is at index 1 and so on.

First element of fruits array can be accessed as

var firstElement = fruitsArray[0];
var secondElement = fruitsArray[1];


Change element

Element can be changed with the help of index as

fruitsArray[0= 'Orange';


Javascript Array Length

Number of elements in an array is array length. Length property is used to get total number of elements of array as below

var totalElements = fruitsArray.length;

Using length property, you can access any element of array. Javascript get last element of array as

var lastElement = fruitsArray(fruitsArray.length-1);

Why 1 is substracted? 
Length property gives total elements which are 3. However array index starts from 0. That's why we have to subtract.


Array Methods to add / remove element

We can add / remove elements at / from start, middle or end of array using array methods.


Add new element at start

Array unshift method insert new element at start of array 

fruitsArray.unshift('Grapes');

Javascript remove first element from array

Shift method remove first element of array and return it as

fruitsArray.shift();

Now if your console array, first element will be no more.


Add element at the end of array

Push method insert element at the end of array as

fruitsArray.push('apple');

Remove last element of array

Pop method remove array last element as

fruitsArray.pop()


Remove element(s) from any position

Splice method add / remove element(s) at / from any position of array. It takes few parameters.
First parameter is the index where to remove element(s) or to add element(s)
Second parameter is the number of elements to remove
Third parameter is a list of elements need to insert in array. It is optional. 

if we don't provide third parameter, splice method only remove element(s) as
below line remove 2 elements starting from index 1. Splice method returns deleted elements.

fruitsArray.splice(1,2)

Insert element(s) at any position

To insert new element, just provide as third parameter. Below line will delete 2 elements start from index 1 and than insert 2 new elements.

fruitsArray.splice(1,2,'Lemon','Grapes')

loop in javascript

Usually two most popular loops are used to iterate array elements, for loop and foreach loop.


For Loop

For loop executes in four steps 

Step 1: Initial value of counter variable is set. It executes only at first iteration as let i = 0;
Step 2: Condition is checked as i < fruitsArray.length
Step 3: If condition becomes true, than body of for loop is executed
Step 4: Loop counter variable is incremented as i++

Note that step 1 will not execute in all iterations except iteration 1.

for(let i=0; i<fruitsArray.length; i++)
{
    console.log(fruitsArray[i]);
}


Javascript foreach loop 

foreach loop is only used to iterate an array or list. It is the most favorite loop of programmer. No loop counter variable is required. It gets a callback function as parameter whose first argument is current element and second argument is the index of current element. You can skip second argument index.

fruitsArray.forEach(function(fruitindex) {
    console.log(fruitindex);
});


Merge Arrays

Array concat method merge two or more arrays and returns and new array. It does not change arrays being merged.

var numArray = [5,8,2,12,5];
var fruitsArray = ['Apple','Mango','Banana'];
var newArray = numArray.concat(fruitsArray)
console.log(newArray)


Javascript Array Slice

Slice method extract a piece of array and return in the form of new array. Below example split fruitsArray after element 2 and returns a new array having elements as mango, orange and apple.

var fruitsArray = ['Lemon','Banana','Mango','Orange','Apple'];
var newArray = fruitsArray.slice(2);
console.log(newArray)


In the next lesson, we will learn most popular array methods.

Post a Comment

Previous Post Next Post