A beginner’s guide to Arrays in JavaScript

Published in

JavaScript in Plain English

4 min readJan 27, 2021

JavaScript arrays are used to store multiple values in a single variable. An array is a special variable, which can hold more than one value at a time.

Creating an Array

1. Using an array literal is the easiest way to create a JavaScript Array

Syntax:

var array_name = [item1, item2, …];

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

var cities= [
  "Moscow",
  "Berlin",
  "München"
];

2. Using the JavaScript Keyword `new`

var cities = new Array("Moscow", "Berlin", "München");

The two examples above do exactly the same. There is no need to use new Array() . For simplicity, readability and execution speed, use the first one (the array literal method).

Methods of Array

The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays — Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.

1. Reach the elements of Array

As mentioned above, Arrays are a combination of several elements. If we want to print one of these elements:

const myArray = ["USA", "Russia", "Turkey", "Israel"];console.log(myArray);

If we “run” the above code, we will see that the whole Array is printed on the screen.

If we want to print any element of the Array on the screen:

const myArray = ["USA", "Russia", "Turkey", "Israel"];console.log(myArray[2]);

For beginners to JavaScript, the question may arise: “After all, our second element in the Array is Russia . Why was Turkey printed on the screen? This is because the elements in the Array are sorted starting from zero indexes. , Continues as 0, 1, 2 ..., not as 1, 2, 3….

2. Method of .length()

The length() property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array. The value of the length() property is an integer with a positive sign and a value less than 2 to the 32nd power (232). You can set the length() property to truncate an array at any time. When you extend an array by changing its length() property, the number of actual elements increases; for example, if you set length to 3 when it is currently 2, the array now contains 3 elements, which causes the third element to be a non-iterable empty slot.

Our output is:

3. Method of Array.isArray()

The Array.isArray() method determines whether the passed value is an Array. Syntax: Array.isArray(value) . If the value is an Array, true is returned; otherwise, false is.

Our output is:

Our output:

4. Method of .indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. Syntax: arr.indexOf(searchElement[, fromIndex]).

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

Our output:

As mentioned above, the reason for printing Berlin in the 2nd index is that the elements of the array start counting from zero indexes.

5. Method of .push()

The push() method adds one or more elements to the end of an array and returns the new length of the array. Syntax:

arr.push([element1[, ...[, elementN]]]). After using this method, the length, and index of the Array increase by the number of each added element.

Our output is:

As you can see, on the screen, the number of elements of the Array is printed. If we want to print the Array itself, we must first add value to the Array and then print it to the screen: