Updated March 28, 2023
Introduction to JavaScript Declare Array
Javascript Array is a global object which contains a list of elements. It is similar to other variables where they hold any type of data according to data type declaration but the difference is Array can hold more than one item at a time. Javascript allows a declaration of an array in many ways. Most important and common among those are ‘Using array constructor’ and ‘Using literal notation’.
Syntax:
The array takes a list of items separated by a comma and enclosed in square brackets.
var <array_name> = [element0, element1, element2, element3, ….. ];Elements inside an array can be of any data type, like string, numbers, Boolean, objects, etc which means array can consist of a string data type in its first position, number in the second, Boolean value in third and so on. Arrays in javascript are starting from index 0 and hence known as zero-based.
Here, we can see that index 0 and index 1 have string values whereas index 2 has numbers
How to Declare an Array in JavaScript?
Let us walk through various ways of declaring an array in javascript with examples.
Example #1
This is the easiest way to create an array with a comma-separated list of values in square brackets.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Using array literal syntax</h1>
<script>
var sArray = ["Karthick", "Saideep", "Anusha"];
var nArray = [10, 20, 30, 4];
var dArray = [1.5, 1.8, 5.3];
var bArray = [true, false, false];
var Array = [1, "Saideep", "Anusha", 0];
document.write(sArray);
document.write('</br>');
document.write(nArray);
document.write('</br>');
document.write(dArray);
document.write('</br>');
document.write(bArray);
document.write('</br>');
document.write(Array);
</script>
</body>
</html>Output:
Example #2
User can initialize an array with Array constructor using the new keyword. If we know how many elements array would contain beforehand, the count of elements can be passed to array constructor and hence array gets created with the specified count and value would be undefined
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Using array constructor syntax 'new' keyword</h1>
<script>
var sArray = new Array();
sArray[0] = "Karthick";
sArray[1] = "Saideep";
sArray[2] = "Anusha";
sArray[3] = "Sam";
var nArray = new Array(3);
nArray[0] = 10;
nArray[1] = 20;
nArray[2] = 35;
var hybridArray = new Array(1, "Saideep", 35, "Anusha");
document.write(sArray);
document.write('</br>');
document.write(nArray);
document.write('</br>');
document.write(hybridArray);
</script>
</body>
</html>Output:
These arrays can have only numeric index unlike associative array in javascript as shown below is the wrong way of declaration of normal array in javascript,
Code:
var sArray = new Array();
sArray["zero"] = "Karthick";
sArray["one"] = "Saideep";
sArray["two"] = "Anusha";
sArray["three"] = "Sam";Array elements can also be objects as said above and because of this advantage users can have different types of data in the same array, functions and also Array inside an array.
Code:
dateArray[0] = Date.now;
funcArray[1] = myFunction;
employeeArray[2] = infyEmployee;Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var houseArray = ["1BHK", 250000, "2BHK", 500000, "3BHK", 750000, "Sale", true];
document.write(houseArray[2]+" cost= "+houseArray[3]);
var cost_2BHK = houseArray[3];
var is_for_sale= houseArray[1];
document.write('</br>');
document.write("Cost of 2BHK = "+ cost_2BHK);
document.write('</br>');
document.write("Cost of 1BHK = "+ is_for_sale+ " is for sale");
</script>
</body>
</html>Output:
After the creation of the array, we as a javascript developer need to know the array methods such as, Length, prototype, reverse, sort, pop, shift and push methods performed on javascript array methods
Let us now get into some of the advantages of an array in javascript.
- Cache friendly
- Easy for debugging
- Saves memory
- Advantageous over variables and data structures
- Reusability of code
- Multi-dimensional array
*With array literal syntax, if we put a number in square brackets, javascript array returns number, but with keyword ‘new’, if we pass number to the array constructor, it returns the length of the array.
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var sArray = new Array("Karthick", "Saideep", "Anusha", "Keerthi");
for (var i = 0; i < sArray.length ; i++)
{
document.write(sArray[i]);
document.write('</br>');
}
</script>
</body>
</html>Output:
If we call the constructor with two or more than two arguments, these arguments initialize the array elements. Time complexity increases due to insertion and deletion operations, wastage of memory as the length of the array is fixed, i.e once the array is declared, array size cannot be modified.
Recommended Articles
This is a guide to JavaScript Declare Array. Here we discuss the introduction and various ways of declaring an array in javascript along with the respective examples. You may also look at the following articles to learn more –
