Pooja Deshmukh's Blog

Array in JavaScript

Pooja Deshmukh's photo
Pooja Deshmukh
·

5 min read

Table of contents

The array is a variable which can hold more than one value. This article is about the array and some methods of array.

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];

//here we have fruits array which holds more than one fruits

Array elements can be accessed using an array index starting from 0, to access the first element of an array you can use arrayName[0].

//from the above array
fruits[0];
//Banana

If we have multiple values in one variable then we should also be able to calculate the length of a variable.

To calculate the length of an array we have the length property,

//from the above array
fruits.length;
//5

//To get the last element
fruits[fruits.length-1];
//Grapes

To change the particular element from an array.

//from the above array
let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
// indexes       0        1       2       3         4
fruits[1] = 'Pineapple';
// element which is on the  the 1 index will get replased with the new value which is Pineapple.

Array Methods

1.Push():

This method adds the new element to the array at the last position;

push() method returns the new length of an array and also it will change the original array.

let numbers = [1,2,3,4,5]
numbers.push(6);
console.log(numbers);
//op
// [ 1, 2, 3, 4, 5, 6 ]

let count = numbers.push(6);
console.log(count);
//op
//6

2. Unshift():

This method adds the new element to the array at the first position.

unshift() method returns the new length of an array and also it will change the original array.

let numbers = [1,2,3,4,5]
numbers.unshift(0); 
console.log(numbers)
//op
// [ 0, 1, 2, 3, 4, 5 ]

let count= numbers.unshift(0);
console.log(count)
//op 6

3.Pop():

This method removes the last element from the array.

pop() method will return the removed element and also it will change the original array


let numbers = [1,2,3,4,5]
numbers.pop()
console.log(numbers)
//op
//[ 1, 2, 3, 4 ]
let numbers = [1,2,3,4,5]
let num = numbers.pop();
console.log(num);
//op
5

4.Shift():

This method removes the first element from the array.

shift() method will return the removed element and also it will change the original array.

let numbers = [1,2,3,4,5]
numbers.shift()
console.log(numbers)
//op
//[2, 3, 4,5]
let numbers = [1,2,3,4,5]
let num = numbers.shift();
console.log(num);
//op
//1

5.Slice():

This method returns the portion from the array into a new array based on the start and end indexes mentioned as an argument while calling this method.

It will not change the original array.

syntax
array.slice(startIndex,endIndex)

Example
let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let fruits2 = fruits.slice(2,3)
console.log(fruits2);

//op
//[Apple]

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let fruits2 = fruits.slice(2)
console.log(fruits2)

//op
//[ 'Apple', 'Orange', 'Grapes' ]

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let fruits2 = fruits.slice()
console.log(fruits2)

//op
//[ 'Banana', 'Mango', 'Apple', 'Orange', 'Grapes' ]
let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let fruits2 = fruits.slice( -2)
console.log(fruits2)

//op
//[ 'Orange', 'Grapes' ]

while calling a slice it will include the start index and exclude the end index and return the portion from the array.

If only one value is mentioned then it will consider that as the start index and end index will be array length-1 means the index of the last element present in the array.

If No value is mentioned then it will return the same array

A negative index counts back from the end of the array.

6.Splice():

This method is used to add the element into the array at a particular position by replacing the element or by shifting the element.

It will change the original array.

syntax:
splice(index to place the element, number of ele to removed, element to add)

example: 
let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
fruits.splice(2,0,'pineapple');
console.log(fruits)
//op
//[ 'Banana', 'Mango', 'pineapple', 'Apple', 'Orange', 'Grapes' ]

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let removedele = fruits.splice(2,2,'pineapple');
console.log(fruits)
console.log(removedele)

//op
[ 'Banana', 'Mango', 'pineapple', 'Grapes' ]
[ 'Apple', 'Orange' ]

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let removedele = fruits.splice(2,2);
console.log(fruits)

//op
[ 'Banana', 'Mango', 'Grapes' ]

splice() method will return the array of removed elements. If no elements are removed then it will return the empty array.

If no element is provided to add then it will just remove the elements from mentioned indexes.

7.fill();

This method will change an element from the array to a static value start and end from the mentioned index and will return the modified array.

syntax:
fill(value to fill,start index, end index)
example:
let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let newarr = fruits.fill('*',0,2)
console.log(fruits)
console.log(newarr)
//op
[ '*', '*', 'Apple', 'Orange', 'Grapes' ]
[ '*', '*', 'Apple', 'Orange', 'Grapes' ]

let fruits = ['Banana','Mango','Apple','Orange','Grapes'];
let newarr = fruits.fill('*')
console.log(fruits)

//op
[ '*', '*', '*', '*', '*' ]

It will change the original array. If the only value is given then it will change all the elements present in the array.

8. Concat():

This method is used to merge two or more arrays and will return the new array. It will not change the original array.

let cities = ['Pune','Mumbai','Nagpur','Amravati'];
let states = ['Maharashtra','MP','UP','AndhraPradesh'];
let merge = cities.concat(states);
console.log(merge);
//op
['Pune','Mumbai','Nagpur','Amravati','Maharashtra','MP','UP','AndhraPradesh']

const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);
// op
 ['a', 'b', 'c', 1, 2, 3]

9.Reverse():

This method reverses the array. It will change the original array

let cities = ['Pune','Mumbai','Nagpur','Amravati'];
let reversearr = cities.reverse();
console.log(reversearr);
//op
[ 'Amravati', 'Nagpur', 'Mumbai', 'Pune' ]

let cities = ['Pune','Mumbai','Nagpur','Amravati'];
let reversearr = cities.reverse();
console.log(reversearr);
console.log(cities);
console.log(cities[0]);
//op
[ 'Amravati', 'Nagpur', 'Mumbai', 'Pune' ]
[ 'Amravati', 'Nagpur', 'Mumbai', 'Pune' ]
Amravati

10.Sort():

This method sorts the array. It will change the original array.

let cities = ['Pune','Mumbai','Nagpur','Amravati'];
console.log(cities.sort())
console.log(cities)

//op
[ 'Amravati', 'Mumbai', 'Nagpur', 'Pune' ]
[ 'Amravati', 'Mumbai', 'Nagpur', 'Pune' ]

These are some methods of the array there will be another article with more array methods. So stay tuned for more updates and keep learning.

iwritecode