Introduction

Arrays in JavaScript are a basic data structure that helps to represent a collection of data. In this article, you will learn how to organize, access and manipulate data in a JavaScript array in a super simple way.

Let’s get started.

What is an Array?

Imagine having a set of numbers 2, 3, 4, 5, 6, and 7... and you want to represent them as a collection of data. You could be creative to represent them as a string, and use them as “1, 2, 3, 4, 5, 6, 7…” after all a string can have any length. But this is complicated because to access each number you have to first extract the digit and convert it back to a number. Hence, the importance of an array.

An array is a data structure that allows us to store a sequence of values. It houses the values between two square brackets separated by commas. These values could be any data type such as string, integer, object, and even another array.

For example

var fruitArray = [“Mango”, “Orange”, “Grape”, “Apple”, “Banana”];

var number = [2, 4, 6, 8, 10];
Array Index.

Every element in an array occupies a particular position where you can look for them and this position is called the index according to their arrangement. Index in an array is zero-based counting according to traditional programming, The first index of an array is counted as 0 as opposed to the conventional counting as 1. Therefore, from the example above. “Mango” is counted as index 0, “Orange” is counted as index 1 and “Banana is counted as index 4. Similar to 2, 4, 6, 8 and 10.

Accessing Element in an Array.

Since you have to understand how elements are labeled in an array using the zero-based index, it will be easy to access any element in an array with its index. Elements are accessed in an array using bracket notation. That is the name of the array followed by two square brackets with the index in-between the bracket. This will look up the element in the array that corresponds to the index given in the bracket.

Let's look for each of the elements in the example above.

fruitArray[0] // “Mango”

fruitArray[1] // “Orange”

fruitArray[2] // “Grape”

fruitArray[3] // “Apple”

fruitArray[4] // “Banana”
Array Length

The length of an array is the number of elements present in that array. In this case, you don’t count the element as, in the zero-based index, you count as in the conventional way of counting. Therefore, the length of fruitArray is 5 because there are five elements in the array. To check for the length of an array, you simply write the name of the array followed by the dot length.

For example.

fruitArray.length // 5
Note: the length of an empty array is zero, not null.

Array Methods.

Since Array is a collection of data, there will be a need to add or remove it from the collection. An interesting thing is that JavaScript provides systematic methods to add or delete to your array in the specific manner that you want it. Let's see the methods one after the other

1. pop(): This method allows you to remove the last element from an array.

Take for example:

fruitArray.pop() // “Banana”

fruitArray = [“Mango”, “Orange”, “Grape”, “Apple”];
The Banana has been removed from the fruitArray.

1. push(): This method allows you to add an element to the end of an array.

Take for example:

fruitArray.push() // “Tangerine”


fruitArray = [“Mango”, “Orange”, “Grape”, “Apple”, “Tangerine”];

Tangerine has been added to the fruitArray.

1. shift(): This method allows you to remove an element from the beginning of an array.

Take for example:

fruitArray.shift() // “Mango”


fruitArray = [“Orange”, “Grape”, “Apple”, “Tangerine”];

Mango has been removed from the beginning of the fruitArray.

1. unshift(): This method allows you to add an element to the beginning of an array.

Take for example:

fruitArray.unshift() // “Pear”

fruitArray = [“Pear”, “Orange”, “Grape”, “Apple”, “Tangerine”];

Pear has been added to the beginning of the fruitArray.

Nested Arrays

As you have learned above, an array can store sequence values and these values could be any data type such as string, integer, object, and even another array. A nested array is a set of arrays inside another array.

To access a nested array, the index of each array must be carefully noted. Let's take for example an array of prime, odd, and even numbers between 1 and 10.

var numberSet = [[2, 3, 5, 7], [1, 3, 5, 7, 9], [2, 4, 6, 8, 10]];

To access 7 in the array of prime numbers we write;

numberSet[0][3] // 7.
To access 8 in the array of even numbers we write;

numberSet[2][3] // 8.

Object Array

An array can contain an Object nested in another array and another array nested in an object. To access any data in a such complex array. The bracket notation of array and object must not be confused with each other.

Let's see an example

var myPlants = [
    {
      type: "flower",
      list : [
        "tulip",
        "rose",
        "dandelion"
      ]},
    { 
      type: "tree",
      list : [
        "fir",
        "pine",
        "birch"
      ]}
  ];

  var secondTree = myPlants[1].list[1];
  console.log(secondTree); // "pine"

Let's take another example.

var contacts = [
    {
        "firstName": "Akira",
        "lastName" : "Laine",
        "number": "08022775640",
        "likes" : ["Pizza", "Coding", "Animation"]
    },

    {
        "firstName": "Harry",
        "lastName" : "Potter",
        "number": "09042876641",
        "likes" : ["Magic", "Hogwart", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName" : "Holmes",
        "number": "07063724650",
        "likes" : ["Intriguing cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "08144675650",
        "likes" : ["JavaScript", "Gaming", "Foxes"]
    }
];

var result = contacts[1]["likes"];
console.log(result); // ["Magic", "Hogwart", "Hagrid"]

to access the index 2 of the array in the first object we write;

var result = contacts[0]["likes"][2];
console.log(result); // "Animation"

What’s Next?

Aside from the array methods explained above, there is a couple of other array methods that are worth your time learning. Understanding array methods will make your life easier as a developer.

map()
filter()
sort()
find()
foreach()
findIndex()
slice()
some()
reduce()
every()

Take Away

.pop(): Removes the last element from an array.
.push(): Add an element to the end of an array.
.shift(): Removes an element from the beginning of an array.
.unshift(): Add an element to the beginning of an array.

Conclusion

Wow, you read to the end, pat yourself on the head, you've learned one of the most useful concepts in JavaScript that you can't do away with in your career as a developer.

If you learned something useful from this article, or have other simpler tricks to go about array and array methods in javascript, let's have your view in the comment box.

This article is originally posted on hashnode. if you would love to read more content like this from me, let's connect on:

Twitter

LinkedIn