Nithin's blog

Arrays in Javascript

A brief note on some of the basic concepts of arrays used in Javascript

Nithin's photo
Nithin
·

3 min read

Table of contents

JavaScript array is a single variable that is used to store different elements. It is often used when we want to store a list of elements and access them by a single variable. Unlike most languages where the array is a reference to the multiple variables, in JavaScript, an array is a single variable that stores multiple elements

Declaration of an Array: There are basically two ways to declare an array.

Syntax:

let arrayName = [value1, value2, ...]; // Method 1
let arrayName = new Array(); // Method 2

Initialization of an Array according to Method 1:

// Initializing while declaring
var house = ["1BHK", "2BHK", "3BHK", "4BHK"];

Initialization of an Array according to Method 2.

    // Initializing while declaring
    // Creates an array having elements 10, 20, 30, 40, 50
    var house = new Array(10, 20, 30, 40, 50);

    // Creates an array of 5 undefined elements
    var house1 = new Array(5);

    // Creates an array with element 1BHK
    var home = new Array("1BHK");
    console.log(house)
    console.log(house1)
    console.log(home)

As shown in the above example the house contains 5 elements i.e. (10, 20, 30, 40, 50) while the house1 contains 5 undefined elements instead of having a single element 5. Hence, while working with numbers this method is generally not preferred but it works fine with Strings and Boolean as shown in the example above home contains a single element 1BHK.

Output:

[10, 20, 30, 40, 50]
[undefined, undefined, undefined, undefined, undefined]
["1BHK"]

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

const person = ["John", "Doe", 46];

Objects use names to access its "members". In this example, person.firstName returns John:

const person = {firstName:"John", lastName:"Doe", age:46};

Converting Arrays to Strings

The JavaScript method toString() converts an array to a string of (comma separated) array values.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 
<h2>toString()</h2>
<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Output:
Banana,Orange,Apple,Mango

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

JavaScript Array pop()

The pop() method removes the last element from an array:

Example:

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop();

Output:

Banana,Orange,Apple

JavaScript Array push()

The push() method adds a new element to an array (at the end):

Example:

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi");

Output:

Banana,Orange,Apple,Mango,Kiwi

JavaScript Array concat()

The concat() method returns a new array by merging two or more values/arrays.

Example:

let primeNumbers = [2, 3, 5, 7]
let evenNumbers = [2, 4, 6, 8]

// join two arrays 
let joinedArrays = primeNumbers.concat(evenNumbers);
console.log(joinedArrays);

Output:

[ 2, 3, 5, 7, 2, 4, 6, 8 ]

JavaScript Array splice()

The splice() method returns an array by changing (adding/removing) its elements in place.

Example:

let prime_numbers = [2, 3, 5, 7, 9, 11];

// replace 1 element from index 4 by 13
let removedElement = prime_numbers.splice(4, 1, 13);
console.log(removedElement);
console.log(prime_numbers);

Output:

[9]

[2, 3, 5, 7, 13, 11]

splice() Syntax

arr.splice(start, deleteCount, item1, ..., itemN)
HTML5CSSJavaScript