Javascript Array methods

Javascript Array methods

(Best known)

What is meant by an Array?

An array is a datatype used to store different types of multiple values in a single variable which is separated by a comma and accessed by an index number.

note: index number of an array always starts from zero (0)

General Syntax

//we can use let or const as needed
let array = ["value1","value2","value3","value4",..] ;

//example
let students = ["Rahul", "Bharat", "Pritam", "Gagan"]
let alphaNum = ["A",22 , "D",94 , "Pritam", "Gagan"]

An array has lots of methods but we are going to learn what is needed the most.

Indexing [i]

When declaring an array we have many values in it but when we have to access each element by its index it is too easy to fetch by indexing.

//Example of fetching individual value of an array
let names =["bharat","vinay","modi","hari"];

 console.log(names[2]);
//__________________________________________________

indexes are

0- bharat

1- vinay

2-modi

3-hari

Output -

modi

it is very easy to find the exact element of an array using this method.

indexOf()

This is the method that tells us the exact index position of the element in the array. Let's assume we have a bunch of elements inside of an array and we have to find out the exact position of that element then indexOf() will help

for example- let's assume we have more than 14 students in a row and by the name of the student we have to find out its exact position.

let names =["Bharat", "Raj", "Komal", "Ravi", "Raju", "Babubhai", "Sham", "Rama","Venkat","Muttuswami","Vennu","Gopal","Ayyar","Dhiraj","Aditi"];

console.log(names.indexOf("Vennu"));
output 
10
console.log(names.indexOf("Gopal"));
output
11
console.log(names.indexOf("Ayyar"));
output
12

As you see Vennu, Gopal, and Ayyar stand in 10,11, and 12 positions respectively.

includes()

This array method simply checks whether the element is present in an array or not. If the element is present then it returns the true value. Let's check with the example.

 let names =["Bharat", "Komal", "Muttuswami", "Vennu", "Gopal", "Ayyar"];

console.log(names.includes("Dhiraj"));
output
true
console.log(names.includes("Komal"));
output
true
console.log(names.includes("Rama"));
output
true
console.log(names.includes("Viresh")
output  
false
//vires are not present in an array

Adding element using

Push()

For adding one or more elements in an array push()will be used for that. this method adds an element at end of the array.

let names =["Muttuswami", "Vennu", "Gopal", "Ayyarr"];

names.push("Venkatraman");

console.log(names);

output
[ 'Muttuswami', 'Vennu', 'Gopal', 'Ayyarr', 'Venkatraman' ]

unshift()

This method adds an element at the start of the array.

let names =["Muttuswami", "Vennu", "Gopal", "Ayyarr"];

names.unshift("Manav");

console.log(names);
output
[ 'Manav', 'Muttuswami', 'Vennu', 'Gopal', 'Ayyarr' ]

Removing Element

pop()

For deleting one or more elements in an array pop() will be used for that. this method deletes an element at end of the array. When the element deletes its changes the original array and also we can store that deleted element in a separate variable.

let names =["Muttuswami","Vennu","Gopal","Ayyarr"];

deletedElement = names.pop();
console.log(deletedElement);
console.log(names);
output
//Now we have a separate deletedElement variable
Ayyarr
[ 'Muttuswami', 'Vennu', 'Gopal' ]

shift()

This method will remove the first element candy from the array and it changes the original array.

let names =["Muttuswami","Vennu","Gopal","Ayyarr"];

FistElementDeleted = names.shift();
console.log(FistElementDeleted);
console.log(names);

//output
Muttuswami
[ 'Vennu', 'Gopal', 'Ayyarr' ]

Replacing elements of an existing array

We can change elements of the existing array with other elements by using the index values of the array.

let names =["Muttuswami","Vennu","Gopal","Ayyarr"];

names[1]= "Bharat";
names[3]= "Rama";

console.log(names);
output
[ 'Muttuswami', 'Bharat', 'Gopal', 'Rama' ]

As we can see in place of indexes 1 and 3 will be replaced by Bharat and Rama values respectively.

slice()

This method is used to remove elements from the array using start and end which are index values of the element. This method does not change the original array instead it gives the first copy of the array. Let's understand with the help of the example.


let names =["Bharat", "Raj", "Komal","Rama","Venkat","Muttuswami","Vennu","Gopal","Ayyar","Dhiraj","Aditi",];
 // slice form names[3] = Rama 
slicedArray= names.slice(3,7);

console.log(slicedArray);
console.log(names);

output
[ 'Rama', 'Venkat', 'Muttuswami', 'Vennu' ]
//original array
[
  'Bharat', 'Raj',
  'Komal',  'Rama',
  'Venkat', 'Muttuswami',
  'Vennu',  'Gopal',
  'Ayyar',  'Dhiraj',
  'Aditi'
]

map() Most important method

The map() is used to iterate each element of the array and we can perform any type of operation on each element.

let numbers = [2,3,4,5,6,7,8,9];

const multiple = numbers.map(num => num * 2) ;
console.log(multiple);

output
[
   4,  6,  8, 10,
  12, 14, 16, 18
]

Also, know this method

Concat()

This method is used to combine two arrays without changing the original array.

let friuts =["Mango","Banana","Apple"];
let  colors= ["Red", "Green","Orange"];

let fruitColors = friuts.concat(colors);
console.log(fruitColors);
//output
[ 'Mango', 'Banana', 'Apple', 'Red', 'Green', 'Orange' ]

//below are original array
console.log(friuts);
output
[ 'Mango', 'Banana', 'Apple' ]

console.log(colors);
output
[ 'Red', 'Green', 'Orange' ]

fill()

This method modifies the original array. It fills the elements of an array with a static value from the start position to the end position. If the start or the end index positions are not specified, the whole array is filled.

let  colors= ["Red", "Green", "Orange", "white", "Blue"];
//if you do not specify an index it will fill the whole array
console.log(colors.fill("Black"));
//output
[ 'Black', 'Black', 'Black', 'Black', 'Black' ]

//when you specify an index it will work properly
let  colors= ["Red", "Green","Orange", "white","Blue"];

console.log(colors.fill("Black",1,2));

output
[ 'Red', 'Black', 'Orange', 'white', 'Blue' ]

isArray()

This method checks the datatype of an array and returns whether it is an array or not.

let  colors= ["Red", "Green","Orange", "white","Blue"];
// check is it array or not
 isArray = Array.isArray(colors);
console.log(isArray);

output
true

sort()

This method sorts the elements.

let  colors= ["Red", "Green","Orange", "white","Blue"];

console.log(colors.sort());

output
[ 'Blue', 'Green', 'Orange', 'Red', 'white' ]

// Trey with Numbers

let numbers = [11,45,23,56,66,1,3,9];

console.log(numbers.sort());

output
[
   1, 11, 23, 3,
  45, 56, 66, 9
]

That's all, We have lots of methods left. The detailed blog will come soon.