Think of JavaScript Arrays as that list where you can write down a number of things you want to do or buy, small list or a large list, related or unrelated.

What is a JavaScript Array

An array is simply a type of JavaScript data structures that enables the nesting of elements in a collection under a named variable.

let computers = [element1, element2, ……];
    //   variable      array with nested elements

Creating an Array

You can declare or create an array by using the square brackets ‘[]’ using a variable and then separating elements using a comma(,). You can do this using the array literal notation or the array constructor

Formula for creating an array

variable arrayName = [element1, element2, element3........]

const computers = [“hp”, “apple”, “dell”]; // array literal notation
const computers = newArray [“hp”, “apple”, “dell”]; // array constructor

Two-dimensional/ Multi-dimensional arrays

You can either have two-dimensional arrays or arrays nested in other arrays which are referred to as a multi-dimensional array.

const computers= [“hp”, “apple”, “dell”]; // two dimensional arrays
const computers = [“hp”, “apple”, [“dell”, “compaq”] ]; //multidimensional array

To determine the Length of an array

The length property is simply used to count elements in an array.

const computers = [“hp”, “apple”, “dell”]; 
console log(computers.length); // prints 3

Accessing Arrays with Indexes

Arrays make use of the zero-index numbering system like the strings, you can easily access elements in the array. This simply means, the first element in an array is the zero(0) element.

const computers = [“hp”, “apple”, “dell”]
console.log(computers[0]) // prints hp since it’s the first element 
console.log(computers[1]) // prints apple since it’s the second element 
console.log(computers[2] // prints dell since it's the third elemet

Arrays are mutable and dynamically sized so elements in an array can be arranged in any order. and can be of any size. Arrays have built-in methods that make it easy to manipulate the values of elements, add, remove and even change their position.

Array Methods

Adding elements to Array

When adding elements to an array, you can use the unshift()method or the push() method.

The unshift() method adds elements to the beginning of an array.

const computers = [“hp”, “apple”, “dell”];
computers.unshift(“toshiba” , “compaq”);
console.log(computers); // prints toshiba, compaq, hp, apple, dell

The push() method adds elements to the end of an array.

const computers = [“hp”, “apple”, “dell”];
computers.push(“toshiba” , “compaq”);
console.log(computers); // prints hp, apple, dell,  toshiba, compaq

Removing elements from an array

The shift()method removes elements from the beginning of an array.

const computers = [“hp”, “apple”, “dell”];
computers.shift();
console.log(computers); // prints apple, dell since hp has been removed

Thepush() method removes elements from the end of an array.

const computers = [“hp”, “apple”, “dell”];
computers.push();
console.log(computers); // prints hp, apple since dell has been removed

Merging Two Arrays

You can easily merge two arrays with the concat() method. This method merges two arrays creating a new array with the merged elements, leaving the individual arrays themselves unmerged.

const letters1 = [A B, C];
const letters2 = [D, E, F];
const letters3 = letters1.concat(letters2);
console.log(letters3); // prints A, B, C, D, E, F]// letters1 and letters2 still remain unchanged

The splice() and slice() method

The splice() method can be used to add or remove any number of elements in a row from anywhere in an array. This method can add or remove up to three(3) elements from an array and create a new array for the removed elements.

const letters = [A, B, C, D, E, F];
const splicedItems = letters.splice(3, 2); // this means at index 3, delete 2 elements
console.log(splicedItems) = [C, D]
console.log(letters)=[A, B, E, F]

The slice()method is used to copy a selected number of elements to a new array without changing the old array. You can use this method to copy or extract more than two(2) elements at a time.

const letters = [A, B, C, D, E, F];
const slicedItems = letters.slice(3, 2); // this means at index 3, copy 2 elements
console.log(slicedItems) = [C, D]
console.log(letters)=[A, B, C, D, E, F] // remains unchanged

You can now easily create, resize, edit arrays. There are also more advanced methods that perform other functions in JavaScript Arrays . I hope these tips aid with better understanding of arrays.

I hope you found this useful. I would love to hear from you so please feel free to drop a comment or connect with me on Twitter , LinkedIn, or you can check out my Github page for some of my projects.