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
orfalse
//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)