JavaScript Arrays

Javascript arrays are a variable that can store more than one value at a time. It is categorized into two-part based on the array's keys.

1 Numeric Array
2 Associative Array

Numeric Array

Followings are the way to create an array.

1 Array Literal
2 Using Javascript new Keyword

Creating Array Using Array Literal

It is the easiest way to create the javascript array. Place all the array elements inside the square bracket and separate every javascript array element with the comma,.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
const fruits = ["banana","orange","grapes","mango"];
</script>

Try it now

Javascript array can also be declared into multiline. Let us see it.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
const fruits = [
  "Banana",
  "Orange",
  "Grapes",
  "Mango"
];
</script>

Try it now

Javascript Empty Array

You can also create an empty array and then provide an array element to it. Let us understand it with the help of an example.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
const fruits = [];
fruits[0]= "mango";
fruits[1]= "orange";
fruits[2]= "banana";
document.write("Array is:"+fruits);
</script>

Try it now

Creating Array Using Javascript new Keyword

Javascript array can also be created using array constructor function and new operator. Let us see it and understand it through an example.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
const fruits = new Array("banana", "orange", "grapes");
document.write("Creating  Array is:"+fruits);
</script>

Try it now

Accessing Array Element

To access the array element, use a square bracket and pass the array index number inside the bracket. It will display an element of the array.

Please keep in mind that the array index starts from zero indexes and the last element array index number will be: array length-1.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
var fruits = ["mango", "banana", "orange"];
document.write("Array First Element is:"+fruits[0]);
</script>

Try it now

Accessing Array Last Element

To get the last element of the array, follow the following process.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
const fruits = ["mango","banana","orange"];
document.write("Array last element :"+fruits[fruits.length-1]);
</script>

Try it now

Javascript Array Properties and methods

Arrays have their own built-in properties(variables) and methods(function).Let us see the most useful properties and methods.

Array Length

The length property of the array is used to count the total number of elements that exist inside the array.

General Syntax

Try it now

Source Code

          
            <script type="text/javascript">
var a = ["a", "b", "c", 1, 2, 3];
document.write("Array Length:"+a.length);
</script>

Try it now

Javascript Array Concat Property

It is used to combine two arrays and returns a new array. Let us take two arrays and then combines them.

General Syntax

      var arrayA = [value 1,value 2,value 3];
var arrayB = [value 1,value 2,value 3];
var resultantArray = arrayA.concat(arrayB);

Try it now

Source Code

          
            var fruitListA = ["mango","orange","apple"];
var fruitListB = ["banana","grapes"];
var newArray = fruitListA.concat(fruitListB);

Try it now

Javascript Array POP Property

The array pop method is used to remove the last element from the array and it returns the removed element. Let us understand it with the help of an example.

Source Code

          
            var fruits = ["mango", "orange", "banana", "grapes"];
var poppedElement = fruits.pop();

Try it now

Javascript Array push Property

An array's push method is used to add an array element at the end of the array and it returns the array length. Let us understand it, with the help of an example.

Source Code

          
            var fruits = ["mango","orange","banana","grapes"];
var arrayPush = fruits.push("berry");

Try it now

Javascript Array Property:Reverse

It is used to reverse the array element order. Let us understand it with the help of an example.

Source Code

          
            var fruits = ["mango","orange","banana","grapes"];
var reverseArray = fruits.reverse();

Try it now

JavaScript Associative Array

Javascript associative array is basically objects in Javascript that contain user-defined keys in place of indexes.

Associate array does not contain the length property and it does not access like the normal array.

General Syntax

      var array = {key1:'value1', key2:'value2'};

Try it now

Source Code

          
            var user = { "name": ‘John Doe’, "job": "developer","salary":25000};

Try it now

Creating Javascript Associative Array

Javascript associative array consists of user-defined keys:

Source Code

          
            var associativeArray = new Array();
associativeArray['fruit'] = "mango";
associativeArray['sweets'] = "haldiram papdi";
associativeArray['water'] = "himalya";

Try it now

Javascript associative array can also be created using the following way:

General Syntax

      var myObj = new Object();
var myObj = { }

Try it now

Source Code

          
            var x = {}; 
x.name = "John Doe";
x.age= 20;
x.job = "Developer";

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4