JavaScript array are high-level, list-like objects that come equipped with various methods and properties to facilitate the manipulation and querying of data stored within them. Here’s a detailed look at some of the key methods and properties associated with JavaScript arrays:
Suppose you want to Add the information to the last Place in your leaderboard. How would you do that?
Using push you can do that let’s see
The push() method adds new items to the end of an array.
The push() method changes the length of the array.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 }
];
playerInfo.push( { name: 'Lavinsh', score: 50 })
console.log(playerInfo)
//[
// { name: 'Priyanshu', score: 100 },
// {name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 },
// { name: 'Anuj', score: 60 },
// { name: 'Lavinsh', score: 50 }
//]Suppose you want to remove the information of the last player from your leaderboard. How would you do that?
Using pop you can do that
The pop() method removes (pops) the last element of an array.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.pop();
console.log(playerInfo);
// Output:
// [
// { name: 'Priyanshu', score: 100 },
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 },
// { name: 'Anuj', score: 60 }
// ]Suppose you want to add a player to your leaderboard in the First Place. How would you do that?
Using unshift you can do that
The unshift() method adds new elements to the beginning of an array.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.unshift({name : "Sohit" , score : 110});
console.log(playerInfo);
// Output:
// [
// { name: 'Sohit', score: 110 },
// { name: 'Priyanshu', score: 100 },
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 },
// { name: 'Anuj', score: 60 },
// { name: 'Lavinsh', score: 50 }
// ]Suppose you want to remove a player to your leaderboard from the First Place. How would you do that?
Using shift you can do that
The shift() method removes the first item of an array.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.shift();
console.log(playerInfo);
// Output:
//[
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 },
// { name: 'Anuj', score: 60 },
// { name: 'Lavinsh', score: 50 }
// ]Suppose you want to retrieve a specific portion of your array, for example, player information from index 1 to 3. How would you go about doing that?
Using slice you can do that
The slice() method returns selected elements in an array, as a new array.
The slice() method selects from a given start, up to a (not inclusive) given end.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
let subInfo= playerInfo.slice(1,4);
console.log(subList)
// Output :
//[
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 }
//] Suppose you want to remove or Add an element in a specific index. How would you do that?
Using Splice you can do that:-
The splice() method in JavaScript is used to modify an array by adding or removing elements at a specified index. It can be used to add new elements, remove existing elements, or both, depending on how it’s configured.
The basic syntax for splice() is as follows:
array.splice(start,deleteCount,item1,item2,...);
- start The index at which to start adding or removing elements.
- deleteCount: The number of elements to be removed from the array (optional). If set to 0, no elements are removed.
- item1, item2, …: Elements to be added to the array at the start index (optional).
For removing Element:
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
let subInfo= playerInfo.splice(1,4);
console.log(subInfo)
//Output:-
// [
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 }
// ]For Adding Element :
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.splice(1,0,{name:"chandan",score : 95});
console.log(playerInfo)
//Output:-
//[
// { name: 'Priyanshu', score: 100 },
// { name: 'chandan', score: 95 },
// { name: 'Krishna', score: 90 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Akhil', score: 70 },
// { name: 'Anuj', score: 60 },
// { name: 'Lavinsh', score: 50 }
//]Suppose you want to reverse the player information in the leaderboard. How would you do that?
Using reverse you can do that
The reverse() methods reverses the order of the elements in an array in JavaScript.
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.reverse()
console.log(playerInfo)
// Output :
// [
// { name: 'Lavinsh', score: 50 },
// { name: 'Anuj', score: 60 },
// { name: 'Akhil', score: 70 },
// { name: 'Abhinav', score: 80 },
// { name: 'Rahul', score: 80 },
// { name: 'Krishna', score: 90 },
// { name: 'Priyanshu', score: 100 }
// ] Suppose you want to check if there are any players in the leaderboard with a score above 90. How would you do that?
Using some you can do that
some() method in JavaScript is used to test whether at least one element in an array passes a specified condition. It returns true if at least one element meets the condition, and false if none of the elements pass the condition.
Syntax:-
array.some(callback);Let’s see:-
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
let Info = playerInfo.some(function (Object){
if(Object.score>90){
return true;
}else{
return false;
}
});
console.log(Info) // true
Suppose you want to check if there are all players in the leaderboard with a score above 90. How would you do that?
Using every you can do that
The every() method in JavaScript is used to test whether all elements in an array pass a specified condition. It returns true if every element meets the condition, and false if at least one element fails the condition
Syntax:-
array.every(callback);Let’s see:
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
let Info = playerInfo.every(function (Object){
if(Object.score>90){
return true;
}else{
return false;
}
});
console.log(Info) // falseSuppose you want to find the player with a score of 90. How would you do that?
Using Find you can do that
The find() methods in JavaScript is used to search for and return the first element in an array that satisfies a provided condition. It stops searching as soon as it finds an element that meets the condition. If no element is found, it returns undefined.
Syntax:-
array.find(callback);Let’s see:-
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
let Info = playerInfo.find(function (obj){
return obj.score===90;
})
console.log(Info);
// Output:-
// { name: 'Krishna', score: 90 }Suppose you want to display the names in order of their scores. For ascending order, the higher scores should appear first, and vice versa for descending order.
Using Sort you can do that
let’s see:-
let number = [5,2,9,100,80];
console.log(number.sort()); // Output:-[100, 2, 5, 80, 9]As you can see, the default sorting treats the numbers as strings and sorts them lexicographically, which is not the numerical order you might expect. To correctly sort numerical values, you should provide a custom sorting function that explicitly compares numbers. This ensures that the sorting is done based on the numerical value of the elements:
In a custom comparison function used for sorting in JavaScript, you generally define the function to return:
- A negative value (e.g., -1): This indicates that the first element (
a) should come before the second element (b) in the sorted order. - A positive value (e.g., 1): This indicates that the first element (
a) should come after the second element (b) in the sorted order. - Zero: This indicates that the two elements (
aandb) are considered equal in terms of the sorting criteria, and their relative order should remain unchanged.
Let’s see:-
let number = [5,2,9,100,80];
number.sort(function(a,b){
return a-b;
});
console.log(number); // Output:- [ 2, 5, 9, 80, 100 ]Let’s solve that problem:-
let playerInfo = [
{ name: 'Priyanshu', score: 100 },
{ name: 'Krishna', score: 90 },
{ name: 'Rahul', score: 80 },
{ name: 'Abhinav', score: 80 },
{ name: 'Akhil', score: 70 },
{ name: 'Anuj', score: 60 },
{ name: 'Lavinsh', score: 50 }
];
playerInfo.sort(function(obj1,obj2){
return obj1.score-obj2.score;
});
console.log(playerInfo);
// Output:-
// [
// { name: 'Lavinsh', score: 50 },
// { name: 'Anuj', score: 60 },
// { name: 'Akhil', score: 70 },
// { name: 'Rahul', score: 80 },
// { name: 'Abhinav', score: 80 },
// { name: 'Krishna', score: 90 },
// { name: 'Priyanshu', score: 100 }
// ]
toString Method
In JavaScript, arrays have a built-in toString() methods that converts the elements of an array into a single string and returns that string. By default, the elements are separated by commas in the resulting string.
Here’s how you can use the toString() method:
let playerInfo = ["Anuj","Akhil","Suraj"];
let playerInfoString = playerInfo.toString();
console.log(playerInfoString); // Output-> Anuj,Akhil,SurajJoin Method
The join() method in JavaScript is used to join the elements of an array into a single string with a specified separator. It does not modify the original array but returns a new string that represents the joined elements. You can specify the separator as an argument to the join() method
Here’s how you can use the join() method:
let playerInfo = ["Anuj","Akhil","Suraj"];
let playerInfoString = playerInfo.join(", ");
console.log(playerInfoString); // Anuj, Akhil, SurajSplit Method
The split() methods in JavaScript is used to split a string into an array of substrings based on a specified separator. You call this method on a string and pass the separator as an argument. It then returns an array containing the substrings.
Here’s how you can use the split() method:
let playerInfo = "Anuj,Akhil,Suraj";
let playerInfoString = playerInfo.split(",");
console.log(playerInfoString); // [ 'Anuj', 'Akhil', 'Suraj' ]Delete
The delete operator in JavaScript is used to remove a specific property from an object. However, it is not intended for use with arrays to remove elements. When used with arrays, it doesn’t actually remove the element; instead, it sets the value of the element to undefined and leaves an empty slot in the array.
Here’s an example of using delete with an array:
let playerInfo = ["Anuj","Akhil","Suraj"];
delete playerInfo[0];
console.log(playerInfo); // [ <1 empty item>, 'Akhil', 'Suraj' ]Conclusion
JavaScript array are versatile, high-level objects designed for data manipulation and querying. Through a rich set of methods and properties, developers can perform a wide range of operations, from basic manipulation like adding and removing elements to more complex tasks such as sorting, searching, and transforming data. Understanding these methods and properties enables developers to write cleaner, more efficient code, handle data more effectively, and implement complex logic with ease.
Frequently Asked Questions
push() and unshift() methods? Ans: push() adds elements to the end of an array, while unshift() adds elements to the beginning. Both methods modify the original array and return the new length of the array.
Q2. How do
pop() and shift() differ in their functionality? Ans: pop() removes the last element from an array and returns that element, effectively reducing the array’s length by one. shift(), on the other hand, removes the first element and returns it, shifting all other elements one position to the left.
Q3. Can you remove elements from an array without leaving “empty” slots?
Ans: Yes, you can use the splice() method to remove elements without leaving “empty” slots. This method allows you to specify the index and the number of elements to remove, and it directly modifies the array.
Q4. How does
slice() differ from splice()? Ans: slice() creates and returns a new array containing a copy of a portion of the original array, without modifying the original array. splice(), however, modifies the original array by adding, removing, or replacing elements.
Q5. What is the purpose of the
some() and every() methods? Ans: some() checks if at least one element in the array passes a test implemented by the provided function, returning true or false. every() checks whether all elements pass the test, returning true only if all elements satisfy the condition.
