Arrays in JavaScript | Types, Example
An array in JavaScript is an ordered set of data (or values) represented by a single variable name. In JavaScript, an array is basically a user-defined object that represents a collection of different data type of elements.
Array uses a single variable name to store more than one value. These values are stored in indexed locations within an array.
We use an array when we want to store a group or list of related data in a single, easily managed location. For example, a list of names, books, favorite colors, courses, or prices is stored in an array.
Consider the below example where JavaScript array holds multiple favorite colors.
var colors = ['red', 'green', 'pink', 'yellow', 'black', 'white'];
Here, all six colors grouped together into an array and assigned to the colors variable. We can treat all the colors in a group, and we can access the individual colors when we need to.
How to Create Arrays in JavaScript?
There are three ways to create an array in JavaScript. They are:
- By array literal
- By creating instance of Array directly (using new keyword)
- Using an Array constructor (using new keyword)
JavaScript Array Literal
Array literal is the most common and easiest way to create an array in JavaScript. The general syntax to create an array literal is as follows:
var arrayname = [value0, value1, value2, value3, ..... valueN];
Or,
const arrayname = [element0, element1, element2, ...... elementN];
In the above syntax, arrayname is a variable name assigned to array and values are contained inside [ ] and separated by , (comma). Look at the below figure in which we have created an array that holds four ice cream flavors as elements.
Value stored within an array can have several data types. The array named dataValues stores a numeric value, a text string, null value, and boolean value:
let dataValues = [10, "Hello", null, true];
The ability to store value of different types within an array is not of other programming language like Java. In Java language, all the values within an array must be of the same type.
We can also initialize an array with no data values within brackets. Consider the below example.
dataValues = [ ];
Elements and Indexes
When we create an array, each value is placed at a location or index in an array, as shown in the below figure.
Each value stored in an array is called element. Each element is identified by its location or index within an array. Indexes always begin with the number 0.
The first element in any array is at an index 0, the second element is at index 1, the third element is at index 2, and so forth. As shown in the above figure, the first element “vanilla” is at index 0, the second element “butterscotch” is at index 1, and so on.
We can also set a specific array value by its index using below syntax.
array[index] = value;
Here, index is the index number of the array element and value is the element stored at that position within an array. We could define the values of several elements in the flavors array using the following statements:
flavors[0] = "vanilla";
flavors[1] = "butterscotch";
flavors[2] = "lavender";
flavors[3] = "chocolate";
Arrays in JavaScript are dynamic. This means that they can automatically expand their size to store new elements. In the following code, we have declared flavors array with four elements.
Now we will set the value of an element with an index of four, the length of flavors array increases to five.
let flavors = ["vanilla", "butterscotch", "lavender", "chocolate"];
flavors[4] = "cookie dough"; // vanilla, butterscotch, lavender, chocolate, cookie dough stored in the array.
Example Program based on Array Literal
Let’s take a very simple program in which we will take five elements in an array and display on the web browser.
Example 1:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
let person = ["Deep", " Tripti", " Rashmi", " Amit", " Ivaan"];
document.write(person); // Accessing full array.
</script>
</head>
</html>
Output:
Deep, Tripti, Rashmi, Amit, Ivaan
Spaces and line breaks are not important in the array declaration. An array declaration can span more than one line.
Example 2:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
let cities = [
"Dhanbad",
" New York",
" Sydney",
" Mumbai",
" Moscow"
];
document.write(cities);
</script>
</head>
</html>
Output:
Dhanbad, New York, Sydney, Mumbai, Moscow
We can also create an array and then insert the elements like this:
Example 3:
<script>
let nums = [ ];
nums[0] = 10;
nums[1] = 20;
nums[2] = 30;
nums[3] = 40;
nums[4] = 50;
document.write(nums);
</script>
Output:
10,20,30,40,50
For simplicity, readability and execution speed, you should always use the array literal method.
Creating Array Directly using New Keyword
Arrays in JavaScript are simple objects, so another way to create an array in JavaScript is by directly creating an instance of an object. The general syntax of creating array directly is as below:
let arrayname = new Array();
Here, we have used new keyword to create an instance of array. In JavaScript, when you create an empty array with a specific length like let arr = new Array(5);, JavaScript will create an array with 5 empty slots.
Each slot is simply “empty (uninitialized)” or “undefined” until you assign values to them. If you try to access any of these slots, like arr[0], you will get undefined because they don’t have any values assigned yet.
However, even if slots are uninitialized (empty), they still count toward the array’s length. For example, arr.length will return 5 even though none of the slots contain values or elements. Let’s take an example of creating array directly.
Example 4:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
// Creating an array using new keyword.
let nums = new Array();
nums[0] = 10;
nums[1] = "John";
nums[2] = 30;
nums[3] = 50;
nums[4] = true;
document.write(nums);
</script>
</head>
</html>
Output:
10,John,30,50,true
Creating Array using Object Constructor
Since arrays are objects, so we can declare and initialize an array using the new Array() object constructor. The general syntax for creating an array in JavaScript using object constructor is as follows:
let arrayname = new Array(elements);
Here, elements is comma-separated list of values stored in an array. We can declare and initialize months array as an array object using object constructor like this:
let months = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
We can also define arrays in JavaScript based on the number of elements within an array using new Object() constructor. The general syntax of creating an array with specified length is as:
let arrayname = new Array(arrayLength);
Here, arrayLength is the number of individual elements stored in the array. You must enter length argument as an integer between 0 and 2^32 – 1. The following code constructs monthName array with 12 elements:
let monthName = new Array(12);
Here, we have not initialized the array. JavaScript interpreter has allotted the memory for an array of length 12 to store 12 elements.
Accessing Array Elements in JavaScript
Each element in an array has its own index. To access elements of an array, just follow the array variable name with an index, surrounded by square brackets. The general syntax to access elements of an array is as:
let varname = arrayname[indexNumber];
For instance, the syntax to access the second element of the array and to assign to a variable is as:
let flavorOfDay = flavors[1];
In the above example, the 1 in brackets after flavorOfDay is the index number for the second element of the array. The index number is 1 because arrays start counting at 0 instead of 1.
Thus, you need to be careful when you want to access the correct element of an array with an index number. Look at the below figure to understand more clearly.
Let’s write code to access all elements of the array flavors one by one.
Example 5:
<html>
<head>
<title>Accessing Arrays Elements in JavaScript</title>
<script>
let flavors = ["vanilla", "butterscotch", "lavender", "chocolate"];
// Accessing array elements.
let flavorOfDay1 = flavors[0]; // accessing the first array element.
let flavorOfDay2 = flavors[1]; // accessing the second array element.
let flavorOfDay3 = flavors[2]; // accessing the third array element.
let flavorOfDay4 = flavors[3]; // accessing the last array element.
document.write(flavorOfDay1, "<br>");
document.write(flavorOfDay2, "<br>");
document.write(flavorOfDay3, "<br>");
document.write(flavorOfDay4);
</script>
</head>
</html>
Output:
vanilla
butterscotch
lavender
chocolate
Updating Array Element
We can also use an array index to change or update an element in the array. The syntax is as:
// This sets the value of element at index 2 (previously "lavender") to a new value "chocobar".
flavors[2] = "chocobar";
Let’s create a JavaScript program in which we will update the third element in an array.
Example 6:
<html>
<head>
<title>Updating Array Elements in JavaScript</title>
<script>
let flavors = ["vanilla", " butterscotch", " lavender", " chocolate"];
document.write("Before: " +flavors, "<br>");
// Updating third element.
flavors[2] = " chocobar";
document.write("After updating: " +flavors);
</script>
</head>
</html>
Output:
Before: vanilla, butterscotch, lavender, chocolate
After updating: vanilla, butterscotch, chocobar, chocolate
As you can see in the output that the third value of the element at index 2 has changed.
Array Length Property
Every JavaScript array has a property length that contains the number of array elements currently. The length property of an array returns the length of an array (array’s current size).
Length of an array is always one more than the last array index. The general syntax to get the length of an array is as:
let length = arrayname.length;
Consider the following example program.
Example 7:
<html>
<head>
<title>Array Length Property</title>
<script>
let names = ["Tripti", "Deep", "Rashmi", "Ivaan", "John"];
// Getting the length of an array.
let length = names.length;
document.write("Length of array: " +length);
</script>
</head>
</html>
Output:
Length of array: 5
As you can observe in the output that the value returned by the length property would be 5 but the highest index number is 4. This is because the length property of an array is always equal to one more than the highest index number in the array.
Null Element in JavaScript Arrays
A null element in JavaScript is an explicit data type representing “no value”. A null is a defined primitive value that represents the absence of any object or value. It also takes up space in the computer’s memory just like any other value.
When an array element is set to null (e.g. arr[0] = null), JavaScript stores this null value in the memory. Since the null value is considered a defined element in the array, therefore, it is also added to the array’s length property. For example, if an array has three elements, one of which is null, the length of array will be 3, including the null element.
Consider the following example program where we will add a null element in an array and will determine the length of the array.
Example 8:
<script>
let names = ["Tripti", "Deep", null, "Rashmi", "Ivaan", ];
document.write("Array elements: " +names, "<br>");
// Getting the length of an array.
let length = names.length;
document.write("Length of array: " +length);
</script>
Output:
Array elements: Tripti,Deep,,Rashmi,Ivaan
Length of array: 5
As you can see in the code, we have added 5 elements, including null. Therefore, the array length is 5 because the null element is also counted in the array length property.
Example 9:
<script>
// Creating an array of length 0.
let num = new Array(); // array of zero element.
// Assigning null value to element 99.
num[99] = null; // array of 100 elements.
let length = num.length;
document.write("Length of array: " +length);
</script>
Output:
Length of array: 100
In this example, we have created an array of length 0 initially. Then, we have assigned a null value to num[99]. This creates an array of length 100 in which all slots from num[0] to num[98] remain uninitialized or empty and num[99] assigned a null value.
Empty slots (from num[0] to num[98]) do not take up any space in the memory, as they don’t hold any value. Only the element null set to num[99] takes up memory because null is an assigned value.
Types of Arrays in JavaScript
You must keep in mind that JavaScript is a loosely typed (or dynamically typed) language. It means that elements of an array can be of different types. You can store different data types of elements in an array such as:
- Numbers
- Strings
- Booleans
- Functions
- Objects
- Other arrays (nested arrays)
For simplicity, we can classify JavaScript arrays into five types. They are:
- String arrays
- Numeric arrays
- Boolean arrays
- Object arrays (including null arrays, because null is an object)
- Mixed arrays
Google Search JavaScript Arrays Questions
1. Does the order of elements in JavaScript array matter?
Ans: Most of the time, yes, the order of elements in array matter, but it depends. For instance, if we are creating an array just to store a list of randomly selected words, then we don’t need to care about the order of elements.
But, if we want storing words in alphabetical order, the order will matter. So, it is totally depends on you how you are using an array.
2. How many elements can we store into an array?
Ans: Theoretically, as many as we want. But practically, the number depends on the memory of computer. Each array element takes up a little space in the computer’s memory.
3. Can we have an empty array?
Ans: Yes, we can have an empty array. To construct an empty array, just write below code:
let emptyArray = [ ];
If you are creating an empty array, you can put elements to it later.
4. Can we put other elements in an array besides strings and numbers?
Ans: Yes, we can. In JavaScript arrays, we can put numbers, strings, booleans, other arrays, and even objects.
5. Is it necessary to put all the values of the same type in an array?
Ans: No, it is not essential that all the values in an array must have the same type.
6. Can I get the last element in JavaScript array?
Ans: We can use length property to get the last element of an array. To get the last element in the array, you can write the following code:
arrayname[arrayname.length - 1];
Let’s take an example in which we will get the last element of an array.
Example 10:
<script>
let fruits = ["Banana", "Apple", "Mango", "Guava", "Grapes", "Orange"];
let getLastElement = fruits[fruits.length - 1];
document.write("Last element of array: " +getLastElement);
</script>
Output:
Last element of array: Orange
In this tutorial, you learned arrays in JavaScript with various example programs. I hope that you will have understood the basic concepts of JavaScript arrays.
Thanks for reading!!!
