00 Votes

JavaScript: Create and Use Arrays

Info by Stefan Trost | Last update on 2021-05-10 | Created on 2015-08-06

In this tutorial, I would like to show you how to create and use an array in JavaScript.

Create Array

If you want to create an array in JavaScript, you can just define the elements within square brackets.

var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = [1, 'abc'];

In this example, we are creating 3 arrays. The array "arr1" contains the numbers 1, 2 and 3, the array "arr2" contains the characters a, b and c. So, it is possible to simply create some arrays containing strings or integer numbers. But it is also possible to write variables of different types into one array. We are doing that with "arr3".

var arr = new Array(10);

In the first example, we has created an array by defining its elements directly. However, it is also possible to use new Array() in order to reserve an array of a specific length. In the example above, we are creating an array consisting of 10 undefined elements.

Read and Change Array Elements

After we have created our array, of course, we also need a way to read out or modify the elements. The next example shows how to do that.

var arr = [1, 2, 3];
var a = arr[0];  // 1
arr[0] = 5;
var b = arr[0];  // 5

First of all, we are creating an array "arr" containing the elements 1, 2 and 3. After that, we are reading out the first element of the array and we are storing this element in the variable "a". For this, we are using arr[0] because the first array element has the index 0 (accordingly, we can read out the second value with arr[1], for example). With this, variable a is 1.

Now, we want to change the content of the first element and we set this element to the value 5. We can do this by just treating arr[0] as a variable with writing arr[0] = 5. Last, we are reading out the content of the first element again and we get the value 5.

var arr = new Array(3);

arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

In this example, we are creating an array consisting of 3 empty fields in the first line. Afterwards, we are setting the 3 fields to the values 1, 2 and 3.

Go through entire Array

Up to now, we have only changed or retrieved single array elements. However, we can also loop through an entire array in order to consider each element. The next example shows how to do that.

var arr = ["a", "b", "c"];

for (var i = 0; i < arr.length; i++) {
   alert(arr[i]);
}

First of all, we are creating an array containing the elements a, b and c. Subsequently, we are using a for-loop to go through the elements. We are starting at index 0 (i = 0) and we finish at the index of the highest array element. For this, we are using the property "length", with which we are able to determine the length of an arbitrary array. Within the loop, we are showing each element after each other in a message dialog.

More Topics

Of course, you can do much more things with arrays instead of just creating, reading and changing them. Here are some more topics about arrays in JavaScript.

If necessary, I will expand the list in the future.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

jQuery: Show and hide elements

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.