Arrays in JavaScript with Examples | Very Simple Explanations

Arrays in JavaScript are a fundamental data structure, allowing developers to store and manipulate collections of data. In this blog post, we'll explore what arrays are, how they work, and some common use cases for them in JavaScript.

What is an Array in JavaScript with Examples?

An array is an ordered collection of values that are stored in a single variable. Each value in an array is called an element, and each element is assigned a unique index that represents its position in the array. In JavaScript, arrays can store any type of value, including numbers, strings, objects, and even other arrays.

In JavaScript, arrays are dynamic by default, meaning that their size can be changed dynamically at runtime. This is because arrays in JavaScript are implemented as objects with a special length property that can be updated to reflect the current number of elements in the array.

When you add elements to an array, JavaScript automatically resizes the array to accommodate the new elements. This allows you to easily add or remove elements from an array without having to worry about managing its size manually. JavaScript arrays can store any type of value, including numbers, strings, objects, and even other arrays. This flexibility can be useful, but it can also lead to confusion if you're not careful.

In JavaScript, arrays can contain other arrays as elements, creating multidimensional arrays. Keep this in mind when working with nested arrays, as accessing or modifying elements can require additional indexing.

Arrays in JavaScript are created using square brackets, with each element separated by a comma. For example:

let myArray = [1, 2, 3, 4, 5];

This creates an array with five elements, each of which is a number.

Accessing elements in an array

To access an element in an array, you can use its index. The index of the first element in an array is 0, and the index of the last element is one less than the length of the array. For example, 

To access the first element in the myArray array created above, you would use:

var firstElement = myArray[0];

To access the last element, you would use:

var lastElement = myArray[myArray.length - 1];

Modifying elements in an array

You can modify the values of elements in an array by using their index. For example, to change the value of the second element in the myArray array to 10, you would use:

myArray[1] = 10;

Common Operations with Arrays in JavaScript with Examples:

JavaScript provides a number of built-in methods for working with arrays. Some of the most commonly used methods include:

push() 

Adds one or more elements to the end of an array

//push(): adds one or more elements to the end of an array

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.push(55);

    gs.info(firstArray);

    //output: 1,3,4,5,7,8,9,3,55

pop()

Removes the last element from an array

//pop(): removes the last element from an array

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.pop();

    gs.info(firstArray);

    //output: 1,3,4,5,7,8,9

shift() 

Removes the first element from an array

//shift(): removes the first element from an array

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.shift();

    gs.info(firstArray);

    //output: 3,4,5,7,8,9,3

unshift()

Adds one or more elements to the beginning of an array

//unshift(): adds one or more elements to the beginning of an array

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.unshift(2);

    gs.info(firstArray);

    //Output: 2,1,3,4,5,7,8,9,3

//or

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.unshift(2,3,6); // will add all the element at the starting of the array.

    gs.info(firstArray);

    //Output: 2,3,6,1,3,4,5,7,8,9,3

Splice()

Removes or replaces elements at a specific position in an array

//splice(): removes or replaces elements at a specific position in an array

    var firstArray=[1,3,4,5,7,8,9,3];

    firstArray.splice(2);

    gs.info(firstArray);

    //output: 1,3

Concat()

Merges two or more arrays into a single array

// Merge two array or concat two arrays

    var firstArray=[1,3,4,5,7,8,9,3];

    var secondArray=[11,13,3];

    gs.info(firstArray.concat(secondArray));

Slice()

Returns a portion of an array as a new array

//slice(): returns a portion of an array as a new array

    var firstArray=[1,3,4,5,7,8,9,3];

    gs.info(firstArray.slice(2));

    //output: 4,5,7,8,9,3

Sort()

Use of sort method is different for array contains numerical value and for the array contain alphabetical value. because in numerical value to differentiate between 2,23 is difficult as both start with 2.

//Numeric Value Array Ascending Sort

    var arraySort=[4,9,8,6,10,23,1,5,9]

    gs.info(arraySort.sort(function(a,b){return a - b})); // For Ascending Order

    // Output: 1,4,5,6,8,9,9,10,23

    gs.info(arraySort.sort(function(a,b){return b - a})); // For Descending Order

    // Output: 23,10,9,9,8,6,5,4,1

// Alphabetical value Array Sort

    var arrayAlphaSort=['Shashi','Ravi','Aman','Babita','Arthur','Gobu'];

    gs.info(arrayAlphaSort.sort()); // for Ascending order

    //Output: Aman,Arthur,Babita,Gobu,Ravi,Shashi

Reverse() - Descending sort for Alphabetical Value Array

This is basically is descending sort of array contains alphabetical values.

// Alphabetical Sort

    var arrayAlphaSort=['Shashi','Ravi','Aman','Babita','Arthur','Gobu'];

    gs.info(arrayAlphaSort.sort()); // for Ascending order

    //Output: Aman,Arthur,Babita,Gobu,Ravi,Shashi

    gs.info(arrayAlphaSort.reverse()); // For Descending order

    //Output: Shashi,Ravi,Gobu,Babita,Arthur,Aman

Declaration of Empty Array and Putting or Populating value into it

Example

// Decleration of Empty array and putting value into it

    var emptyArray=[];

    emptyArray.push(22);  // you can put values in empty array using push.

    emptyArray[1]=75; // in this you can also put required values in any array, but it

    for (var i=0;i<=5;i++){

        emptyArray.push(i); // you can put any variable instead of i, which you want to populate in array

    }

    gs.info(emptyArray);

    //Output: 22,75,0,1,2,3,4,5

Example of Alphabetical Array and Numerical Array Sorting in Ascending and Descending Order

//Numeric Ascending Sort

    var arraySort=[4,9,8,6,10,23,1,5,9]

    gs.info(arraySort.sort(function(a,b){return a - b})); // For Ascending Order

    // Output: 1,4,5,6,8,9,9,10,23

    gs.info(arraySort.sort(function(a,b){return b - a})); // For Descending Order

    // Output: 23,10,9,9,8,6,5,4,1

// Alphabetical Sort

    var arrayAlphaSort=['Shashi','Ravi','Aman','Babita','Arthur','Gobu'];

    gs.info(arrayAlphaSort.sort()); // for Ascending order

    //Output: Aman,Arthur,Babita,Gobu,Ravi,Shashi

    gs.info(arrayAlphaSort.reverse()); // For Descending order

    //Output: Shashi,Ravi,Gobu,Babita,Arthur,Aman

Click for Video Demonstration of Array in Javascript in ServiceNow

Things to Take Using Array in JavaScript

Arrays are a very useful data structure in JavaScript, but they can also be tricky to work with at times. Here are some things to keep in mind when working with arrays in JavaScript:

1. Array indexing starts at 0: 

In JavaScript, the first element of an array has an index of 0, not 1. Make sure to account for this when accessing or manipulating elements in an array.

2. Arrays can store any type of value: 

JavaScript arrays can store any type of value, including numbers, strings, objects, and even other arrays. This flexibility can be useful, but it can also lead to confusion if you're not careful.

3. Arrays are dynamic: 

Arrays in JavaScript are dynamic by default, meaning that their size can be changed dynamically at runtime. While this flexibility can be convenient, it can also lead to performance issues if the array needs to be resized frequently.

4. Array methods can modify the original array: 

Many of the built-in methods for working with arrays in JavaScript (like push(), pop(), splice(), and sort()) modify the original array rather than creating a new one. Make sure to keep this in mind when using these methods, and consider creating a copy of the array first if you need to preserve the original data.

5. Arrays are objects: 

In JavaScript, arrays are actually a type of object with some special properties and methods. This means that you can use object methods like Object.keys() and Object.values() on arrays, as well as array-specific methods like map(), reduce(), and forEach().

6. Arrays have a fixed maximum size: 

While arrays in JavaScript are dynamic by default, they do have a fixed maximum size that is determined by the amount of memory available in the system. Trying to add more elements to an array than the system can handle can result in a memory overflow error.

7. Arrays can be multidimensional: 

In JavaScript, arrays can contain other arrays as elements, creating multidimensional arrays. Keep this in mind when working with nested arrays, as accessing or modifying elements can require additional indexing.

By keeping these things in mind, you can work effectively with arrays in JavaScript and avoid some common pitfalls.

Arrays are a powerful data structure in JavaScript that allow developers to store and manipulate collections of data. They are used in a wide range of applications, from simple scripts to complex web applications. By understanding how arrays work and how to use their built-in methods, developers can write more efficient and effective code in JavaScript.