JavaScript Array methods in easy way

JavaScript(JS) arrays are resizeable and could contain different data types in a single array.

The indexes as in many programming languages can be accessed using non-negative integers as indexes.

Remember: The first element is always at index [0] followed by the second as index [1] and so on... And since the index always starts with Zero [0], the length of the array is usually counted as:

Total Number of items minus 1.

Ex: ['a', 13,true]

Here, the total number of array items would be counted as 3, but programmatically it's 3 - 1, i.e., 2.

---

Array Provides a number of methods. Let's dive into a few of them in brief:

#1 arr.push(): adds item at the end of the array

const bikes = ['Ola', 'TVS', 'Yamaha'];
console.log(bikes);

bikes.push('Honda');
console.log(bikes)

Output:

---

#2 arr.pop(): removes an item from the end of the array

const cars= ['Honda', 'TATA', 'Mahindra'];
console.log(cars);

cars.pop();
console.log(cars)

Output:

---

#3 arr.shift(): it works similarly to pop() but with the difference that it removes an item from the beginning of an array.

const myScores= [1,2,3];
console.log(myScores);

myScores.shift();
console.log(myScores)

Output:

---

#4 arr.unshift(): it works similarly to push() but it adds item/items to the beginning of an array.

const myScores= [1,2,3];
console.log(myScores);

myScores.unshift(4,5);
console.log(myScores)

Output:

---

#5 arr.slice(): this method returns selected elements from an array, as a new array from start to end (i.e., total length minus 1 [since programmatically it starts from 0]); Here, start and end represent the index of items in that array.

The original array values remain unchanged.

//*Syntax:  *
slice()
slice(start)
slice(start, end)

const places= ['Goa','Assam','Meghalaya','Karnataka','New York'];

// ***********slice()************
console.log(places.slice());
//here all the items are returned as a new Array

Output:

const places= ['Goa','Assam','Meghalaya','Karnataka','New York'];

// ***********slice(start_position)************
console.log(places.slice(3));
//the new returned array has items starting from the 3rd index

Output:

const places= ['Goa','Assam','Meghalaya','Karnataka','New York'];

// ***********slice(start_pos, end_pos)************
console.log(places.slice(2,5));
//all the items from the start position to end position are returned

Output:

---

#6 arr.splice(): this method changes the items of an array either by removing or replacing the contents / adding new contents.

//Syntax: 
arr.splice(indexPos, howManyItems, item1,...,itemN)
//indexPos -> to start from index, here -ve value counts from end of items
//howManyItems ->Number of Items to be removed
//item1,...,itemN -> New items to be updated

Ex: adding item to an array at index 2

const days = ['Mon','Tue','Thu','Fri','Sat']
console.log(days)

days.splice(2,0,'Wed');
console.log(days)

Output:

Ex: replacing an item at index 6

const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Holiday']
console.log(days)

days.splice(6,1,'Sun'); //splice(index,howManyDeletes,NewData)
console.log(days)

Output:

---

#7 arr.concat(): adds/merges two or more arrays.

Ex: concating two Arrays

const fruits = ['apple','mango','papaya'];
const vegetable = ['pumkin','beans','ladyfinger'];

const newArray = fruits.concat(vegetable);
console.log(newArray)

Output:

Ex: re-concatenating with another array.

console.log(newArray)

const newConcat = newArray.concat(...books)
console.log(newConcat)

Output:

#8 arr.copyWithin(): copies items of the array to another location in the same array.

Note: this modifies the original array

//Syntax:
copyWithin(target, startPos)
copyWithin(target, startPos, endPos)

Ex: copy to first item(s) all items starting from 3rd Index

const arr = ['a','b','c',1,2]
arr.copyWithin(0,3)

console.log(arr)

Output:

---

Ex: copy to first item from the items at index 3 all the way till/before 4(endPos)

const arr = ['a','b','c',1,2]
arr.copyWithin(0,3,4)

console.log(arr)

Output:

#9 arr.includes(): checks if an item exists in the given array.

Note: returns true or false

---

//Syntax:
includes(searched_Item)
includes(searched_Item, fromIndex)

Ex: check if cat is available on the pets list.

const pets = ['dog','cat','parrot'];

console.log(pets.includes('cat'))

Output:

Ex: check if Jerry is available on the pets list.

const pets = ['dog','cat','parrot'];

console.log(pets.includes('jerry'))

Output:

Ex: check if parrot is available on the pets list at index 2.

const pets = ['dog','cat','parrot'];

console.log(pets.includes('parrot',2))

Output:

#10 arr.indexOf(): returns the first Index at which the requested element is found.

Note: returns -1 if item is not found in array.

//Syntax:
indexOf(searched_Item)
indexOf(searched_Item, fromIndex)

Ex: check if safari is available on the list of the browser and returns its index.

const browsers = ['chrome','safari','Firefox','safari'];

console.log(browsers.indexOf('safari'))

Output:

Ex: check if edge is available on the list of the browser.

Since items is not available in array returns -1

const browsers = ['chrome','safari','Firefox','safari'];

console.log(browsers.indexOf('edge'))

Output:

Ex: check if safari is available on the list of the browsers starting from Index 2

const browsers = ['chrome','safari','Firefox','safari'];

console.log(browsers.indexOf('safari',2))

Output:

#11 arr.map(): Creates a new Array with all the values of an existing array based on the function (function requirements) inside the map method

Ex: finding the square-root for the list of numbers in the array

const numbers = [1,2,3,4,5];

const sqrt = numbers.map(eachItem => eachItem * 2);

console.log(sqrt)

Output:

Thank You for reading this article. Please feel free to leave your Comments.

I Love to Read Them 😊