What are Array Methods in JavaScript?
- Array methods are built-in functions provided by JavaScript that allow us to perform different operations on arrays easily.
- Instead of writing our own logic to add, remove, search, modify, or process array elements, we can use these predefined methods.
Methods:
| Method | Purpose |
|---|---|
push() |
Adds an element at the end |
pop() |
Removes the last element |
shift() |
Removes the first element |
unshift() |
Adds an element at the beginning |
slice() |
Extracts a portion of an array |
splice() |
Adds, removes, or replaces elements |
includes() |
Checks whether an element exists |
indexOf() |
Finds the index of an element |
find() |
Finds the first matching element |
sort() |
Sorts the elements |
reverse() |
Reverses the array |
push()
- push() is used to add one or more elements to the end of an array.
- It modifies the original array and returns the new length of the array.
Example:
let Animals=["Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
let result=Animals.push("King Cobra");
console.log(Animals);
console.log(result);
Output:
[ 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Tiger', 'Lion', 'Monkey', 'Giraffe', 'King Cobra' ]
5
pop()
- pop() is used to remove the last element from an array.
- It modifies the original array and returns the removed element.
Example:
// Pop
let Animals=["Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
let result=Animals.pop();
console.log(Animals);
console.log(result);
Output:
[ 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Tiger', 'Lion', 'Monkey' ]
Giraffe
unshift()
- unshift() is used to add one or more elements to the beginning of an array.
- It modifies the original array and returns the new length.
Example:
// Unshift
let Animals=["Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
let result=Animals.unshift("Ant");
console.log(Animals);
console.log(result);
Output:
[ 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
5
shift()
- shift() is used to remove the first element from an array.
- It modifies the original array and returns the removed element.
Example:
// shift
let Animals=["Ant","Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
let result=Animals.shift();
console.log(Animals);
console.log(result);
Output:
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
Ant
slice()
- slice() is used to extract a portion of an array and return it as a new array.
- It does not modify the original array.
Syntax:
array.slice(start, end);
Example:
// Slice
let Animals=["Ant","Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
let result=Animals.slice(0,3);
console.log(Animals);
console.log(result);
Output:
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Ant', 'Tiger', 'Lion' ]
splice()
- splice() is used to add, remove, or replace elements in an array.
- splice() modifies the original array.
Syntax:
array.splice(start, deleteCount, item1, item2, ...);
start → Index where the operation should begin.
deleteCount → Number of elements to remove.
item1, item2... → New elements to add.
Add elements using splice()
- To add elements without removing anything, use deleteCount as 0.
Example:
let Animals=["Ant","Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
Animals.splice(1,0,"Zebra");
console.log(Animals);
Output:
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Ant', 'Zebra', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
How does it work?
Original array:
Index: 0 1 2 3 4
Ant Tiger Lion Monkey Giraffe
Animals.splice(1, 0, "Mango");
1 → Start at index 1
0 → Remove 0 elements
"Zebra" → Add this element
So "Zebra" is inserted at index 1.
Remove elements using splice()
- To remove elements, specify the starting index and the number of elements to remove.
Example:
// Splice remove elements
let Animals=["Ant","Tiger" , "Lion" , "Monkey" ,"Giraffe"];
console.log(Animals);
Animals.splice(1,2);
console.log(Animals);
Output:
[ 'Ant', 'Tiger', 'Lion', 'Monkey', 'Giraffe' ]
[ 'Ant', 'Monkey', 'Giraffe' ]
How does it work?
Original array:
Index: 0 1 2 3 4
Ant Tiger Lion Monkey Giraffe
Animals.splice(1,2);
1 → Start at index 1
0 → Remove next 2 elements
[ 'Ant', 'Monkey', 'Giraffe' ]
includes()
- includes() is used to check whether a particular element exists in an array.
- It returns either true or false.
Example:
let languages = ["Java", "Python", "JavaScript"];
console.log(languages.includes("Java"));
console.log(languages.includes("C++"));
Output:
true
false
indexOf()
- indexOf() is used to find the index of a particular element.
- If the element is not found, it returns -1.
Example:
// indexOf
let fruits=["Apple", "Banana" , "Pear" , "Cherry"];
console.log(fruits.indexOf("Pear"));
console.log(fruits.indexOf("Blueberry"));
Output:
2
-1
find()
- find() is used to find the first element that satisfies a condition.
- It returns the element itself.
Example:
// find
let marks = [45, 55, 72, 85, 90];
let result = marks.find(marks => marks>70);
console.log(result);
Output:
72
Even though 85 and 90 also satisfy the condition, find() returns only the first matching element.
sort()
- sort() is used to sort the elements of an array.
- It modifies the original array.
Example:
// sort
let marks = [55, 45 , 100 , 72 , 85, 22 , 8 ,90];
marks.sort((a, b) => a - b);
console.log(marks);
Output:
[
8, 22, 45, 55, 72, 85, 90, 100
]
reverse()
- reverse() is used to reverse the order of elements in an array.
- It modifies the original array.
Example:
let marks=[10,20,30,40,50];
marks.reverse();
console.log(marks);
Output:
[ 50, 40, 30, 20, 10 ]
Top comments (0)