Punit Bathija

Javascript Array Methods

Summary: In this article, you’ll learn about JavaScript arrays and their basic operations.

What is an array?

An array is a collection of elements of the same type placed in contiguous memory locations that can be individually referenced by using an index to a unique identifier. Five values of type int can be declared as an array without having to declare five different variables (each with its own identifier.

image.png

Image Credit :- https://www.javascripttutorial.net/javascript-array/

Introduction to array in Javascript?

  • In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index.
  • An JavaScript array can hold mixed types of values for eg. number, string, boolean
  • The size of an array in JavaScript is dynamic ie. it can increment or decrement unlike other programming languages where you have to specify the array size before hand.

Oh! boy all this technical explanation is confusing, Let's understand arrays with an example

JavaScript allows us to create arrays using two ways

  1. Array Constructor

let animals = new Array('🐕', '🐈','🐁','🐄','🐖');

Well this will give us an array with five elements indexing from 0 to 4. We can also skip the new operator when we use an array constructor, We can also declare an empty array and increment it with data coming from the server as in JavaScript as it's dynamic in nature. A comma is used to seprate elements in an array.

  1. Array Literals

let animals =  ['🐕', '🐈','🐁','🐄','🐖'];

Array literals are the most commonly used pattern to create arrays in the real world as the syntax to create them is very simple and easy to read. The array literals uses the square [ ] brackets to wrap elements seprated using a , the above example creates an array with five String elements.

Getting the size of an array in JavaScript

Typically we use the length property of an array to return the number of elements inside an array


let  vehicles =['🚗', '🛵', '🚲', '🏍️', '🛺'];
console.log(vehicles.length); //5

Accessing Elements in a JavaScript Array


let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];

The JavaScript arrays are zero-based indexed. Meaning the index of elements in an array starts from index[0]..[1]...[2]...and so on To access an element in an array you can directly specify the index for eg.


let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
console.log(fruits[0]);  //🍎
console.log(fruits[1]);  //🍐
console.log(fruits[2]);  //🍊

You can also change the value of an element inside an array by accessing it's index like this



let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
fruits[1] = '🍑';
console.log(fruits); // ['🍎', '🍑', '🍊', '🍌', '🍉'];

Here we changed the value of the element[1] to '🍑' by accessing the index of fruits array as shown in the example above. There are many other methods to manipulate an array in JavaScript, We will go through some simple methods in this article.

Basic methods to manipulate an array in JavaScript

  1. Adding an element to the end of an array we use the push() method

let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
fruits.push('🍍');

console.log(fruits);

This will add the newly added element '🍍' to the end of our fruits array Output


['🍎', '🍐', '🍊', '🍌', '🍉', '🍍'];
  1. Removing an element from the end of an array we use the pop() method

let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
fruits.pop();

console.log(fruits);

This will remove an element from the end of an array Output

['🍎', '🍐', '🍊', '🍌'];
  1. Adding an element to the beginning of an array we use the unshift() method

let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
fruits.unshift('🍍');

console.log(fruits);

This will add an element to the beginning of an array Output

['🍍', '🍎', '🍐', '🍊', '🍌','🍉'];
  1. Removing an element from the beginning of an array we use the shift() method

let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
fruits.shift();

console.log(fruits);

This will remove an element from the beginning of an array Output


['🍐', '🍊', '🍌','🍉'];
  1. Finding the index of an element in an array we use the indexOf() method

let fruits = ['🍎', '🍐', '🍊', '🍌', '🍉'];
let index = fruits.indexOf('🍌');

console.log(index); //3

This will tell us the index of the element '🍌' in the fruits array which is 3

Summary

  • In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index.
  • An JavaScript array can hold mixed types of values for eg. number, string, boolean
  • The size of an array in JavaScript is dynamic ie. it can increment or decrement

Thank-you for reading this article I hope you enjoyed reading this also picked up a good understanding of JavaScript Array and its basic methods

#iwritecode #javascript

← Back to home