MAQ Learning

JavaScript Array

In this tutorial:

What is Array in JavaScript
How to create array in JavaScript
How to access array elements
How to assign value of an array element to a variable
How to assign value of a variable to an array element
How to assign value of array element to another array element
How to create Arrays using Array() constructor
The length property of an array
How to access last element of array using length
How to increase or decrease (set) length of an Array

 

In JavaScript arrays are:

  • Used to store a list of data items under a single variable name.
  • Each item in array is called an element. We can access each item in array individually.
  • Each element has a numeric position in the array, known as its index.
  • The index of the first element is 0.
  • All the elements in array are comma (,) separated.
  • Each element of the same array may be of different type. Array elements may even be objects or other arrays.
  • JavaScript arrays are resizable. They can shrink and grow. There is no need to define the size of an array.
  • There may be gaps between elements of JavaScript array.
  • Array is an Array Object. It is not primitive data type.

We will discuss all these characteristics of the array in the next sections.

How to Create Arrays in JavaScript

There are multiple ways to create an array in JavaScript. The most common ways are:

  • Array literals
  • The Array() constructor

Creating Arrays Using Array Literals

The simplest method of creating an array is using the array literal. The elements are enclosed within square brackets [ ], separated by commas(,).

Syntax: 

let array_name = [item1, item2, item3]; 

Here is an example of creating an array of three elements. Each element is of type string.

let fruits = ["Orange", "Apple", "Banana" ];

Let's try creating an array of type numbers.

let prices = [100,200,300];

In JavaScript each element of an array may be of different type.

let myArr = [100,true,"Apple"];

In the above example, the array has three elements, each of a different type. The first element is of type number. The second element is of type boolean and the third element is of type string.

You can create an empty array in JavaScript. The easiest way is to create a literal with brackets.

let fruits =[];

Later, you can assign the values to your array elements.

fruits[0] = "Kiwi"; 
fruits[1] =  "Strawberry";

How to access array elements

The position of an element in an array is known as its index. The index of first element of an array is 0. The index of second element is 1 and so on. You can access each element with reference to its index number.

//This will create an array of three elements
let fruits = ["Orange", "Apple", "Banana"];

fruits[0] is the first element, i.e., "Orange.

fruits[1] is the second element, i.e., "Apple"

fruits[2] is the third element, i.e., "Banana"

To print the first element on a console, you can write:

console.log(fruits[0]);

This will print Orange on the console, and for other elements try the following code.

console.log(fruits[1]);  //This will print second element "Apple"
console.log(fruits[2]);  // This will print third element "Banana"

This shows that here each element of an array behaves like an individual variable.

Here is the complete code you can try.

let fruits = ["Orange", "Apple", "Banana" ];
console.log(fruits[0]);  //This will print first element "Orange"
console.log(fruits[1]);  //This will print second element "Apple"
console.log(fruits[2]);  //This will print third element "Banana"

In JavaScript you can access full array by referring the array name.

console.log(fruits);

Let's try accessing elements of an array of numbers.

// This will create an array of three elements of type number
let prices [100,200,300,]

In same way you can access and print value of each element of an array of numbers.

console.log(prices[0]);  //This will output first element 100
console.log(prices[1]);  //This will output second element 200
console.log(prices[2]);  //This will output third element 300

You can assign value of an array element to a variable.

//Example: Assigning value of array element to a variable.

let fruits = ["Apple"];
let myFruit = fruits[0];  
// This will assign value of element at index 0 to variable myFruit.

You can assign the value of a variable to an array element.

//Example: Assigning value of a variable to array element.

// This will create an empty array
let prices =[];
// Define a number variable with a value 100
let myPrice = 100;
//Assign value of variable to element of array at index 0
prices[0] = myPrice; // This will assign value of variable to array element.

You can assign value of array element to another array element.

//Example: Assigning value of array element to another array element.

let arr1 = [];
let fruits = ["Apple", "Orange"];
arr1[0] = fruits[1];   // The value of aar1[0] will become "Orange".

Creating Arrays Using Array() Constructor

You can also create an array using Array() constructor.

Let's try Array() constructor without any argument. This will create an empty array.

// This will create an empty array.
let fruits = new Array();

There is another way of creating an array by calling Array() constructor with one argument. When only one numeric argument is passed to Array() constructor, it represents the length of array. So let's create an array of 5 elements.

//This will create an array of 5 elements.
let fruits = new Array(5);

Note that in this case no values are assigned to array elements.

When two or more numeric arguments are passed to Array() constructor, it uses those arguments as elements of the array. So let's create an array of two elements by passing two numeric arguments to Array() constructor.

// This will create an array of two elements of type number.
let prices = new Array(100,200);

When one or more non-numeric arguments are passed to Array() constructor, it uses those arguments as elements of the array. So let's create an array by passing one string argument to Array() constructor.

// This will create array with one element of type string.
let fruits = new Array("Apple");

The length Property of Array

The length property of an Array is used to get or set the length of an Array.

The following example shows how to get and display the length of an array.

//Define an array with 10 numbers
let arr = [1,2,3,4,5,6,7,8,9,10]

console.log(arr.length);
//Output: 10

How to Access Last Element of Array Using length

This code shows how to access the last element of an array using length property.

//Define an array with 3 numbers
let arr = [10,20,30];

let lastNum = arr[arr.length-1];

console.log(lastNum);
//Output: 30

You can also use length property to iterate over an array with the for loop.

How to Set length of an Array

The following code example shows how to set the length of an array.

//An array with two elements
let colors = ["Red","Green"];

// This will output length of array i.e., 2
console.log(colors.length);

//This will output array colors
//[ 'Red', 'Green' ]
console.log(colors);

// Sets length of array to 4
colors.length = 4

// This will output length of array i.e., 4
console.log(colors.length);

//This will output array colors
//[ 'Red', 'Green', <2 empty items> ]
console.log(colors);

The above example shows that when length of an array is set to a bigger number than the current length. The length property increases the length of array and adds empty items at the end of that array.

Lets try another example, where length is set with a smaller number than the current length of an array.

//An array with four elements
let colors = ["Red","Green","Blue","Orange"];

// This will output length of array i.e., 4
console.log(colors.length);

//This will output array colors
//[ 'Red', 'Green', 'Blue', 'Orange' ]
console.log(colors);

// Sets length of array to 2
colors.length = 2

// This will output length of array i.e., 2
console.log(colors.length);

//This will output array colors
//[ 'Red', 'Green']
console.log(colors);

This shows that when length of an array is set to a smaller number than the current length.

  • All the elements byond the new length are deleted, you loose those elements.
  • length of array is also shortened and resized to the new length.

You can also create an empty array of specific length by setting length property of an array.

const arr = [];
//Sets length of array to 5
arr.length = 5;

//Output arr length i.e., 5
console.log(arr.length);

//Output arr
// [empty x 5]
console.log(arr);