What is an Array??
An array is used to store multiple values in a single variable. As Compared to a variable that can only store one value at a time.
let country = "India"
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"]
Here the country variable can store one value in it while in the states variable is having multiple values stored in it right??
Well, that is known as an array, which can store multiple values by a comma separated in between each element.
Since we are having 4 values stored in or states as you may hear an array always starts counting from 0. Each element would be having an index value that will help to access that particular value. As like Gujarat =>0, Rajasthan =>1 then so on to other elements.
To print the whole array write console.log(states) which will return all the values present in the array.
let's say we wanted to print Rajasthan in our output how are gone access that element from that array??
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"];
console.log(states[1]);
This will print an element that has an index of 1 in our case, it's Rajasthan as I said above.
Array Methods
Now, we are going to discuss some of the more common array methods used in the regular life of a programmer while using the array.
push()
This method is used to push new values at the end of our array but this will also change the length of the array as we have added a new element to our array.
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"];
states.push("Goa");
console.log(states);
//Output => ["Gujarat","Rajasthan","Punjab","Maharashtra", "Goa"]
pop()
This method is used to remove the last element of our array in our case which is Maharashtra will be removed from the array, and this will also modify the original array.
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"];
states.pop();
console.log(states);
//Output => ["Gujarat","Rajasthan","Punjab"]
unshift() & shift()
Using unshift() and shift() is considered a costly operation in real-world production as you will change the index of all other elements so use it wisely.
unshift() is used to add elements at the front of an array while the shift() is used to delete the elements from the start of the array.
//unshift()
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"];
states.unshift("MP");
console.log(states);
//Output => ["MP",Gujarat","Rajasthan","Punjab","Maharashtra"]
//shift()
let states = ["Gujarat","Rajasthan","Punjab","Maharashtra"];
states.shift();
console.log(states);
//Output => ["Rajasthan","Punjab","Maharashtra"]
slice()
slice will works like we cut a birthday cake and took out the chunk from a cake. But here is a little more to it which is will need to pass the range to it from where to start and where to end.
always remember the start value is inclusive and the end value is exclusive .
This simply means whenever will be saying start at position 2 and end at position 5, The 2nd position will be included in the array while printing and the 5th position will be excluded which means ignore it.
const users = ["Tim","Tod", "Sod", "Ton","Sem","Ted","Jack"];
console.log(users.slice(1,5));
//Output => ["Tod", "Sod", "Ton","Sem"]
Here we are having a total of 6 elements stored in our array and wanted a chunk out of it so we passed the range slice(1,5) which will return us to the only elements which are presented in that range from 1 to 5 but as I said above start value would be inclusive and the end value would be exclusive. So that's why "Tod", "Sod", "Ton", "Sem" Tod is included and Ted is ignored in the output above.
splice()
Here things are a bit different on splice we pass the start point and count value to an array which simply means starting from the 1st position and counting till the 5th position deleting all those elements present in between them and insert the value which I passed on.
const users = ["Tim","Tod", "Sod", "Ton","Sem","Ted","Jack"];
console.log(users.splice(1,5,"Heyyy"));
//Output => ["Tim", "Heyyy", ""Jack]
//Or
console.log(users.splice(1,5,"Heyyy","Bye"));
//Output => ["Tim","Heyyy","Bye","Jack"]
Above on user, we start from 1st and will count till 5th position delete those and insert Heyyy or multiple values we wish to pass.
indexOf()
This method will return the first index at which our given element is founded in the array if it's not present then it will return -1
const numbers = [1,5,6,95,12,63,73]
console.log(numbers.indexOf(12));
//Output => 4
const numbers = [1,5,6,95,12,63,73,89,12]
console.log(numbers.indexOf(12));
//Output => 4
if there are any other elements presented in the array with the same value after that it still returns the first element only which is 4 .
lastIndexOf()
Similar to the above example but the only difference is it will return the last element which got matched with the array.
const numbers = [1,5,6,95,12,63,73,89,12]
console.log(numbers.lastIndexOf(12));
//Output => 8
isArray()
This is the method that is used to check whether the passed value is a type of array or not.
const users = ["Kalp", "Jay", "Meet", "Tom", "Ted"];
console.log(Array.isArray(users));
//Output => true
concat()
This method is used to merge two or more arrays. This will not change the existing array but will return a new array being merged.
const users = ["Tim","Tod", "Sod", "Ton"];
const numbers = [1,8,9,3,5];
const userDetails = users.concat(numbers);
console.log(userDetails);
//Output => ['Tim', 'Tod', 'Sod', 'Ton', 1, 8, 9, 3, 5]
reverse()
The reverse method in the array is used to reverse the array as it suggests from its name only.
const users = ["Tim","Tod", "Sod", "Ton"];
const reversedUsers = users.reverse();
console.log(reversedUsers);
// Output => ['Ton', 'Sod', 'Tod', 'Tim']
sort()
This method arranges the elements in the ascending form which is also a default for the sort method.
const names = ["Abhishek","Kalp","Bhoomi","Zane","Eshan"];
const sortedNames = names.sort();
console.log(sortedNames);
//Output => ['Abhishek', 'Bhoomi', 'Eshan', 'Kalp', 'Zane']
join()
This method will return a string by concatenating all the elements of the array which are separated by a comma.
const movies = ["Aliens", "Avatar", "spiderman","KGF"]
console.log(movies.join(" "));
//Output => Aliens Avatar spiderman KGF
include()
This method is used to find whether an array includes the user-requested element or not this will return true or false as an output.
const socialMedia = ["instagram", "fb", "twitter","linkedin"];
console.log(socialMedia.includes("reddit"));
//Output => False
fill()
This method will change array elements to a static value passed on. It will also be having start index and end index and this will return the modified array.
const numbers = [1,52,62,0,12,5,3,89,78]
const fillJavascript = numbers.fill("Js",1,6);
console.log(fillJavascript);
//Output => [1, 'Js', 'Js', 'Js', 'Js', 'Js', 3, 89, 78]
Here will pass the value that should be filled in the array first, then will decide the range from where to start and where to end. The start value is inclusive & end value is exclusive here too as we discuss this term in slice and splice above.
If no range is provided default start range is 0
const numbers = [1,52,62,0,12,5,3,89,78]
const fillJavascript = numbers.fill("Js");
console.log(fillJavascript);
//Output => ['Js', 'Js', 'Js', 'Js', 'Js', 'Js', 'Js', 'Js', 'Js']
If only the start value is provided then it will start from the 3rd position here print JS till the last element of the array because we didn't pass the end value.
const numbers = [1,52,62,0,12,5,3,89,78] const fillJavascript = numbers.fill("Js",3); console.log(fillJavascript);
//Output => [1, 52, 62, 'Js', 'Js', 'Js', 'Js', 'Js', 'Js']
That's all for today Thanks for reading😊