Fundamental Of Arrays

Hey readers and coders learn JavaScript arrays with this beginner friendly guide! The posts you'll see here will cover the basics and advanced top JavaScript array methods, including how to create, access and manipulate them. Whether you're a beginner or experienced coder, you'll find this guide to be a helpful resource.

Let's get started!!!...😉

CRUD Operation With JavaScript Arrays :

Here we can perform create, read, update and delete operation with JavaScript arrays.

Creating Array

First we can create an array by using a very common method which is called array literal method. In example, const fruits = ["apple", "kiwi", "mango"]; an array named fruits is declared which contains three distinct values. The three values contained are apple, kiwi, and mango. In this example, the values contained in the array are strings, however, they can be any type that you require.

Syntax :

const array_name = [element1, element2, ...... , elementN];

If you want to make sure that the array cannot be reassigned and you want to improve the readability and performance of your code, then using the const keyword is a good option.

    const fruits = ["apple", "kiwi", "mango"];
    console.log(fruits);

    // Output :
    // [ 'apple', 'kiwi', 'mango' ]

This declares an array of values, where the first value in the array is apple, the second value in the array is kiwi, and the third value in the array is mango. You can access each of these values individually.

Read the elements in the array :

    console.log(fruits[0]);
    console.log(fruits[1]);
    console.log(fruits[2]);
    console.log(fruits);

    // Output :
    // [ 'apple', 'kiwi', 'mango' ]

Console.log of fruits at 0 indicates that you want to get the value that is at the first location in the array are what are called zero indexed, it means that the first element is at index zero. So, when it’s said fruits at zero, it refers the first value in the array, which in this case is apple.

Update An Element In The Array

In fruits array we can add each value individually to it's assigned location. The method we can use here is used for update and replace an array element. ffruits[3] refers to the third slot of space, fruits[4] refers to the forth slot of space, frits[5] refers to the fifth slot of space and so on.

    console.log("Before Updating :", fruits);
    fruits[2] = "banana";
    fruits[3] = "strawberry";
    fruits[4] = "papaya";
    fruits[5] = "pineapple";
    console.log("After Updating :", fruits);

    // Output :
    // [ 'apple', 'kiwi', 'mango' ]
    // [ 'apple', 'kiwi', 'banana', 'strawberry', 'papaya', 'pineapple' ]

We can use array push() method also. This method will add a new element to the end of the array. It will add the value of grapes to the end of our fruits array. Example : fruits.push(“grapes”);

    fruits.push("grapes");
    console.log("Push Method :", fruits);

    // Output :
    // Push Method : [ 'apple', 'kiwi', 'banana', 'strawberry', 'papaya', 'pineapple', 'grapes' ]

Deleting Elements Of An Array :

The splice() method is used to delete, replace, or add elements to an array. splice() method of JavaScript is a good choice for deleting array elements when you need more control over the process. If you want to delete element from the middle of an array, to delete multiple elements of an array, to insert new elements into an array at a specific location, to get the value of an element that was deleted from an array then you can use splice() method.

The splice() method takes three arguments :

The index of the element to delete. The number of elements to delete. An optional array of elements to insert.

For example, the following code deletes the element at index 2 from the array fruits:

    fruits.splice(2, 1);
    console.log("Splice Method :", fruits);

    // Output :
    // Splice Method : [ 'apple', 'kiwi', 'strawberry', 'papaya', 'pineapple', 'grapes' ]

The following code deletes the first two elements from the array fruits and inserts the element "guava":

    fruits.splice(0, 2, "guava");
    console.log("Splice Method :", fruits);

    // Output :
    Splice Method : [ 'guava', 'strawberry', 'papaya', 'pineapple', 'grapes' ]

It is a more versatile method than the delete operator, which can only be used to delete elements from the end of an array.

In JavaScript almost everything, if it's functions or loops and strings or numbers or even if it is your thoughts are an objects and an array is a special type of object.

When you create a new object, it will automatically have all of the methods and properties that are defined on its prototype. For example, the array object has a prototype that defines methods like push(), pop(), indexOf() and many more. When you create a new array object, it will automatically have these methods available to it.

Arrays are one of the most important data structure in JavaScript. They are used to store a collection of data such as numbers, strings, objects or even other arrays. Arrays are easy to use and can be manipulated in a variety of ways.

Wait, tell me first what this prototype is all about?...😦

In JavaScript all object inherit from a parent template known as a prototype. You do not need to be too confused about the prototype. For now, just take this as information.

Imagine that you are building a house. You could start from scratch and build every single component of the house yourself. However, this would be a lot of work and it would be easy to make mistakes.

A better approach would be to use a blueprint. A blueprint is a template that defines the basic structure of the house. When you use a blueprint, you can simply follow the instructions and they will be built correctly.

Prototypes in JavaScript work in a similar way. They are a blueprint that defines the basic structure of an object. When you create a new object, it will automatically inherit the methods and properties that are defined on its prototype. When it comes to arrays, this prototype provides us with a lot of methods such as for creating arrays, mutating arrays, iterating over arrays and for accessing data in the arrays.

When you create a new Date object, you are actually creating an object that inherits its properties from a Date prototype. The simple logic behind the prototype is that it defines the methods and properties that should be available to all objects of that type.

To know more about JavaScript prototype click here.

Now you understand behind the scenes about an array by understanding the concept of prototype. Now let's further move on. We'll play with different types of array methods in our upcoming posts...😉