code

JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable.

There are 3 ways to construct array in JavaScript

  1. By array literal
  2. By creating instance of Array directly (using new keyword)
  3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2…..valueN]; 

As you can see, values are contained inside [ ] and separated by , (comma).

Let’s see the simple example of creating and using array in JavaScript.

<script>  
var emp=["Sonoo","Vimal","Ratan"];  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br/>");  
}  
</script>  

The .length property returns the length of an array.

Output of the above example

Sonoo
Vimal
Ratan

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

<script>  
var i;  
var emp = new Array();  
emp[0] = "Arun";  
emp[1] = "Varun";  
emp[2] = "John";  
  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we don’t have to provide value explicitly.

The example of creating object by array constructor is given below.

<script>  
var emp=new Array("Jai","Vijay","Smith");  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  

Output of the above example

Jai
Vijay
Smith

Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars:

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns “object” for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its “elements”. In this example, person[0] returns John:

var person = ["John", "Doe", 46];

Objects use names to access its “members”. In this example, person.firstName returns John:

var person = {firstName:"John", lastName:"Doe", age:46};

Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and methods:

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

Looping Array Elements

The safest way to loop through an array, is using a for loop:

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

You can also use the Array.forEach() function:

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits

Other JavaScript Array Methods

MethodsDescription

copywithin()
It copies the part of the given array with its own elements and returns the modified array.
every()It determines whether all the elements of an array are satisfying the provided function conditions.
fill()It fills elements into an array with static values.
filter()It returns the new array containing the elements that pass the provided function conditions.
find()It returns the value of the first element in the given array that satisfies the specified condition.
findIndex()It returns the index value of the first element in the given array that satisfies the specified condition.
forEach()It invokes the provided function once for each element of an array.
includes()It checks whether the given array contains the specified element.
indexOf()It searches the specified element in the given array and returns the index of the first match.
join()It joins the elements of an array as a string.
lastIndexOf()It searches the specified element in the given array and returns the index of the last match.
map()It calls the specified function for every array element and returns the new array
pop()It removes and returns the last element of an array.
push()It adds one or more elements to the end of an array.
reverse()It reverses the elements of given array.
shift()It removes and returns the first element of an array.
slice()It returns a new array containing the copy of the part of the given array.
sort()It returns the element of the given array in a sorted order.
splice()It add/remove elements to/from the given array.
unshift()It adds one or more elements in the beginning of the given array.

Leave a Reply

Your email address will not be published. Required fields are marked *

error

Enjoy this blog? Please spread the word :)

RSS20
Follow by Email
Facebook20
Pinterest9