JavaScript Arrays and its methods: Still a Better Love Story than Twilight

Ronak Mutha September, 2021

Before we start, you might be wondering why this title?

    Simple Answer - ClickBait.
    Longer version - Read the blog.
    

Unlike my last post, this post would be short. We'll quickly go through the methods and what they do.

But before that let's start with our favourite question.

What is an Array in JavaScript?

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. In simpler words, array is like a list where you store your elements and can access them or change them as per your need.

Now you would be like, okay Ronak, we got that it is like a list where we store our elements but what are these elements? Don't worry I'll make you learn most of basic things about array today, without that we're not leaving 😉.

When I say elements, in JavaScript it can be anything from numbers to strings to objects to even arrays. Yes, you heard it right, we call them as multidimensional arrays. And yeah, let's not forget about the word traversing and mutating. If you hail from non-english speaking and non-technical background these words are hard to digest at first. So let me make it simple for you. Remember I said earlier array is like list of elements, Traversing means going through that list and Mutating means changing the list by performing some action like deleting/adding/modifying... and so on

In javaScript particularly, arrays are hashtable based and they not necessarily are placed in contiguous memory locations(don't worry it just means consecutive blocks of memory, funny things we learnt during engineering which we don't even remember now and have to run a google search). JavaScript arrays are index based and we can set and fetch items based on their indices. Arrays are zero indexed, means 1st element always starts at 0th position. Remember, array_name[position] where position = 0, 1, 2, 3, .... n are arrays. And the one having position = "some random string" are objects. And those some random strings are called Keys. We'll not go into deep now, this was just to let you know the difference.

You can create array using different methods, simplest being:

        let fruits = ['Apple', 'Banana'];
        
You can get the length of fruits array using length property of array object.
        console.log(fruits.length); //prints 2
    

Alright enough information about arrays. Let's talk about different array methods.

Different Array methods:

• push()

  As the name suggests, this method pushes the element at the end of an array. This method mutates the array on which it is called.

  push(elementsToBePushed) method takes element(s) to be pushed to array as arguments.

  It returns new length of array on which it was called.

  let newLength = fruits.push('Orange') // fruits = ["Apple", "Banana", "Orange"], newLength = 3

• pop()

  pop() method removes the element from an array. This method mutates the array on which it is called.

  pop() method doesn't need any argument.

  It returns new length of array on which it was called or undefined if array is empty.

  let newLength = fruits.pop() // fruits = ["Apple"], newLength = 1

• shift()

  shift() method removes the first element from an array. This method mutates the array on which it is called.

  shift() method doesn't need any argument.

  It returns the removed element from the array or undefined if array is empty.

  let firstElement = fruits.shift() // fruits = ["Banana"], firstElement = Apple

• unshift()

  unshift() method adds one or more elements to the beginning of an array. This method mutates the array on which it is called.

  unshift(elementsToBeAddedAtBeginning) method doesn't need any argument.

  It returns the new length of an array on which it was called.

  let addElementAtStart = fruits.unshift("Orange") // fruits = ["Orange", "Apple", "Banana"], addElementAtStart = 3

I'd like to stop our journey to array methods here as I want to get into neogcamp, as well. And that requires preparation. If I go on writing these articles, it would never end. But before saying those three magical words, I would like to add something on another method about which I learned today.

forEach()

forEach() method executes a provided function once for each array element. It doesn't mutate the array on which it is called. However, the callbackFunction provided to it may do so.

forEach(callbackFunction(element, index, array), this) method takes callbackFunction() as an argument. callbackFunction() in turn can take one to three arguments. Out of these three, only element i.e. Current element being processed is mandatory.

It returns the undefined.

This will print following output on console:

Apple
Banana
    

Wow, seems magic, no need of writing those long for loops. Okay this is something that all might get after reading first 2-3 lines of documentation. But what was that you read and wanted to share so much about.

No more suspense, here you go:

In JavaScript forEach may be convenient but it has shortcomings, like There is no way to stop or break a forEach() loop other than by throwing an exception, forEach expects a synchronous function. forEach() does not wait for promises or async functions. It runs slower than for loops. for...of loop which functions quite similar to forEach() can be used instead. I It’s worth using forEach() only when you already have a function to invoke on every array element. In this case, it’s a one-liner, with zero performance degradation.

Optimization and stuff is always fascinating to hear, but always remember:

So I guess it's that time of blog which I hate the most, goodbyes, but without goodbyes there wouldn't be greetings. On that note, here are those three magical words you've been waiting to hear(in this case see)

See you soon.