Javascript Array Basics

Siddhant Kapadne

4 min readMay 7, 2021

In this, we will go through create, access, delete, and how to manipulate javascript Array.

What is Array?

An array is a special data type in javascript that can hold one or more than one value at a time irrespective of their data type.
So the first element of the array is zero-indexed and the last element of the array is at array length minus 1 index.
Always remember the length of an Array in javascript is not fixed, its length is always dynamic.
Let’s look at the visual representation of the array.

So what are we going to do with the array in this blog:

Create Array.
Access Array Elements.
Update Array Elements.
Add elements in Array.
Delete elements in Array.

Let’s start right away

1.Create Array

a. Using square brackets [ ]

let Array_Name = [element_0, element_1, element_2, element_3];

You see, to create an array we first declare the variable, then inside the [ ] square brackets, there are elements separated by, comma.
Example

let myArray = [1, “siddhant”, true, [“chess”, “guitar”, “walking”]];

b. Using Array constructor

let Array_Name = new Array(element_0, element_1, element_2);

You see, to create an array we used the constructor named Array with a new keyword and passed the values directly in the Array.
Example:

let myArray = new Array(“walking”, “Hiking”, “Climbing”);

2. Access Array

Now to access the content of the array we can simply use bracket notations and array index.
Suppose we want to retrieve an element from an array, we need to use the array variable (Array_Name) and at the end enclose an index in bracket [index] as shown below

console.log(Array_Name[0]);

This will give us the element present at the zeroth position of the array.
Example:

let myArray = [“Food”, “Cloth”, “Water”, “Home”, “Car”, “Purpose”];
let needs = myArray[3];
console.log(needs);

In the above example we stored the third index of our array in variable needs and then to check the value we logged the variable need in our console.

3. Update Array Elements

To update our Array elements we need to know how to access them which we saw in the Access Array section where we used bracket notation and array index to locate the elements.
Now the same goes for updating Array elements we use bracket notation and array index to select which element to be updated and then simply pass the value of that index of the array.
Example :

let myArray = [1,2,3,4,5];console.log(myArray); // output 1,2,3,4,5myArray[0] = “one”;console.log(myArray); // output “one”,2,3,4,5

Here the element on the zeroth position got replaced by string value “one”.

4. Add elements in Array.

We can add elements at the end of the array and also at the start of the array.

a. push()

Push Method in javascript adds elements to the end of an array i.e after the last index of an array.

b. unshift()

Unshift Method is javascript adds elements to the start of the array i.e. at the zeroth index of an array.

Example for both push() and unshift() method

let myArray = [2,3,4,5];myArray.push(6);myArray.unshift(1);console.log(myArray); // output will be [1,2,3,4,5,6];

Here value 1 was added at the zeroth position of the array and 6 was added at the end of the array.

5. Delete elements in Array

Just like adding elements in an array, we can Delete them too.
An element can be deleted from the end of the array and from the start of an array.

a. pop()

Pop method in javascript deletes elements from the end of the array i.e from the last index of an array.

b. shift()

Shift Method in javascript deletes elements from the start of the array i.e. from the zeroth position of an array.

Example for both pop() and shift() method

let myArray = [1,2,3,4,5,6];myArray.pop();myArray.shift();console.log(myArray); // output will be [2,3,4,5]

Note: we cant pass parameters to the pop and shift method.

Bonus

Let’s solve a problem

Create a food array.
Initialize the array with your 5 favorite food items.
Console log all the array elements.
Add more food items at the beginning of the array.
Console log the result with all elements.
Delete the food item at the beginning of the array.
Console log the result with all elements.
Delete the food item from the end of the array.
Console log the result with all elements.
Add an item at the end of the array.