A Beginner's Guide to Javascript Arrays and its Methods.

A Beginner's Guide to Javascript Arrays and its Methods.

What is an Array?

It is a collection of items stored at a contiguous memory location. Here location means they are next to each other, with no gap.

How to create an Array in Javascript?

There are multiple ways to create an array in javascript. One of them is by assigning a value to a variable.

var fruits = ["Apple","Banana","Grapes","Guava","Orange"]

we can also use a javascript keyword new to create an array

var fruits= new Array("Apple", "Banana", "Grapes","Guava");

How to Access Elements from an Array?

we can access the elements from an array by its index. [ ] Square brackets are used to access the array elements. Let's see an example below.

var fruits = ["Apple","Banana","Grapes","Guava","Orange"]

console.log(fruits[0]) //Prints out Apple
console.log(fruits[4]) //Prints out Oranges
console.log(fruits[2]) //Prints out Grapes

We can also use the length property of an array to get the total number of array elements and can use it to traverse backward and access elements.

var fruits = ["Apple","Banana","Grapes","Guava","Orange"]

var len = fruits.length
console.log(len) //Prints out 5 Which is the length of the array

console.log(fruits[len - 1])  // Prints out Orange.

How to know the Position of an Element in an Array?

we may want to know the index position of an element. For that, we can use the indexOf() method. it gives us the index of the first occurrence of the element in the array. if the element is not found, the method returns us -1 value.

const fruits = ["Banana", "Orange", "Apple", "Mango"];


console.log(fruits.indexOf('Orange')); // returns 1
console.log(fruits.indexOf('Watermelon')); // returns -1

How to change the value of an array element?

let us take the example of our fruits array and change the value of orange to watermelon.

var fruits = ["Apple","Banana","Grapes","Guava","Orange"]

fruits[4] = "Watermelon" 
console.log(fruits) //[ 'Apple', 'Banana', 'Grapes', 'Guava', 'Watermelon' ]

How to add , remove and delete elements from an array in javascript?

  • To Insert an element we can use the push()method. However, it adds the element at the end of an array. let's add watermelon to our fruits
var fruits = ["Apple","Banana","Guava","Orange"]

fruits.push("Watermelon")
console.log(fruits) //[ 'Apple', 'Banana', 'Guava', 'Orange', 'Watermelon' ]
  • if we want to add the element at the beginning of the array, we can use the unshift() method to do so.
var fruits = ["Apple","Banana","Grapes","Guava","Orange"]

fruits[4] = "Watermelon" 
console.log(fruits) //[ 'Apple', 'Banana', 'Grapes', 'Guava', 'Watermelon' ]
  • To remove an element from the array the pop() method is used. It removes the last element from the array.
var fruits = ["Apple","Banana","Guava","Orange"]

fruits.pop() //Removes last element i.e orange
console.log(fruits) //[ 'Apple', 'Banana', 'Guava' ]
  • To remove the first element of the array we can use the shift() method.
var fruits = ["Apple","Banana","Guava","Orange"]

fruits.shift() //Removes frist element i.e Apple
console.log(fruits) //[ 'Banana', 'Guava', 'Orange' ]

How to merge Arrays?

We can merge two or more arrays using the contact() method. let's see an example.

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);
console.log(merged); // [ 1, 2, 3, 4, 5, 6 ]

Splicing and Slicing of Arrays

The splice() method is used to add, update and remove elements in an array. The syntax of splice() method is

arr.splice(start, deleteCount, item1, ..., itemN)

To add an element, we need to give the start position where we want to add the element and how many elements to delete, and the element to add.

In the example below, we are adding an element Mahindra at index 1 without deleting any elements.

const cars = ['tata', 'hyundai', 'maruti'];

cars.splice(1, 0, 'mahindra');

console.log(cars); // [ 'tata', 'mahindra', 'hyundai', 'maruti' ]

The slice method basically takes a piece from an array to return a new array

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);

console.log(citrus) //[ 'Orange', 'Lemon' ]

This method creates a new array and it does not remove elements from the original array.

How to sort elements of an Array?

It basically sorts the array in alphabetical order.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

console.log(fruits) //[ 'Apple', 'Banana', 'Mango', 'Orange' ]

How to reverse an Array?

As the name suggests, it basically reverses the elements in the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();
console.log(fruits) //[ 'Mango', 'Apple', 'Orange', 'Banana' ]

These were some of the array methods in javascript. Thanks for reading.