Understanding Array in JavaScript

The array is one of the most commonly used data structures in computer programming. Basically, arrays are used to store multiple values in a single variable and then we retrieve its elements via an index. In this post, I would like to show how to understand this data structure properly in jQuery as well as JavaScript.

What is an array?

An array is a special variable which can hold more than one value at a time.

If you have a list of items (e.g. a list of your favourite books’ title), we can store these books in a single variable. In terms of mathematics, an array is also considered as a vector which the items are numbers. However, an array in JavaScript can hold elements having different types. Let’s see the examples below.

How to declare an array?

Using array literal

In practice, we have several ways to create an array in jQuery. Using an array literal, which uses square brackets, is the easiest way to create and initialise a JavaScript/jQuery array. Let’s look at the following example:

var adult_books = []; // create an empty array
var my_favourite_books = ["Pride and Prejudice", "The Secret Diary of Adrian Mole", "Things Fall Apart", "Great Expectations", "Wolf Hall"];

Spaces and line breaks are not important. A declaration can span multiple lines:

var my_favourite_books = [
    "Pride and Prejudice", 
    "The Secret Diary of Adrian Mole", 
    "Things Fall Apart", 
    "Great Expectations", 
    "Wolf Hall"
];

Using JavaScript keyword new Array(item1, item2,…)

JavaScript supplies the array constructor, which uses the new keyword.

var children_books = new Array(); // create an empty array
var my_favourite_books = new Array("Agile Programming Practices", "Programming Grails", "English Grammar in Use");

[box type=”warning” align=”aligncenter” ]Remember:

• use array literal instead of the array constructor
• the array constructor behaves differently if its only element is a number

[/box]

var books = new Object();

books[“book1”] = “Agile Programming Practices”;

books[“book2”] = “Agile Programming Practices”;

books[“book3”] = “Agile Programming Practices”;

Object books {title1: “….”, title2: “….”, title3: “….”}

var myMap = {}; // new Object();

var values = [];

for (var k in myMap) {

values.push(myMap[k])

}

delete myMap[k];

set: myMap[k] = new_value;

============

var books2 = [];

book2.push({title: “….”});

book2.push({title: “….”});

book2.push({title: “….”});

References

1. All about JavaScript Arrays in 1 article
2. JavaScript Arrays – tips, tricks and examples
3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values
4. https://stackoverflow.com/questions/4246980/how-to-create-a-simple-map-using-javascript-jquery
5. https://stackoverflow.com/questions/18599242/remove-certain-elements-from-map-in-javascript
6. https://stackoverflow.com/questions/5223/length-of-a-javascript-object
7. https://stackoverflow.com/questions/18912/how-to-find-keys-of-a-hash
8. https://codeburst.io/all-about-javascript-arrays-in-1-article-39da12170b1c