JavaScript Array Methods Explained with Examples
JavaScript Array Methods Explained: pop(), shift(), unshift(), splice(), map(), forEach()
JavaScript array methods are very important for day-to-day coding, interviews, and frontend development. If you are working with lists of data, then methods like pop(), shift(), unshift(), splice(), map(), and forEach() will be used again and again.
In this article, we will understand what these methods do, when to use them, and how they work with simple examples. The explanation is kept easy so that beginners can understand properly.
Why These Array Methods Are Important
Arrays are used to store multiple values in JavaScript. For example, a list of students, products, marks, cities, or users can all be stored inside an array.
These methods help you add, remove, replace, loop through, and transform array data easily.
1. pop()
The pop() method removes the last element from an array and returns that removed value.
What it does
Removes the last item from the array.
Use case
Useful when you want to delete or process the last element.
let emotions = ["😊", "😱", "😐"];
let lastEmotion = emotions.pop();
console.log(emotions); // ["😊", "😱"]
console.log(lastEmotion); // "😐"Here, pop() removed the last element "😐" from the array and returned it.
2. shift()
The shift() method removes the first element from an array and returns it.
What it does
Removes the first item from the array.
Use case
Useful when you want to process or remove the first element.
let emotions = ["😊", "😱", "😐"];
let firstEmotion = emotions.shift();
console.log(emotions); // ["😱", "😐"]
console.log(firstEmotion); // "😊"In this example, the first value "😊" is removed from the array.
3. unshift()
The unshift() method adds one or more elements at the beginning of an array.
What it does
Adds items to the start of the array.
Use case
Useful when you want to prepend new values.
let emotions = ["😱", "😐"];
emotions.unshift("😊");
console.log(emotions); // ["😊", "😱", "😐"]Here, "😊" is added to the beginning of the array.
4. splice()
The splice() method is used to add, remove, or replace elements in an array.
What it does
Modifies the original array directly.
Use case
Useful when you need to update array items by position.
Syntax:
array.splice(startIndex, deleteCount, item1, item2, ...)let emotions = ["😊", "😱", "😡"];
emotions.splice(1, 1, "😐");
console.log(emotions); // ["😊", "😐", "😡"]In this example:
- 1 means start from index 1
- 1 means remove 1 element
- "😐" is the new element to insert
Important: splice() changes the original array, so use it carefully.
5. map()
The map() method is used to transform every element of an array and create a new array.
What it does
Runs a function on each item and returns a new array.
Use case
Useful when you want to modify all items without changing the original array.
let emotions = ["😊", "😱", "😡"];
let updatedEmotions = emotions.map((emotion) => emotion + "✨");
console.log(updatedEmotions); // ["😊✨", "😱✨", "😡✨"]
console.log(emotions); // ["😊", "😱", "😡"]The original array stays the same, and map() gives back a new transformed array.
6. forEach()
The forEach() method executes a function once for each array element. It is mainly used for looping through an array.
What it does
Loops through all array items one by one.
Use case
Useful when you want to perform an action on each element.
let emotions = ["😊", "😱", "😡"];
emotions.forEach((emotion) => {
console.log(emotion);
});
// Output:
// 😊
// 😱
// 😡One important point is that forEach() does not return a new array like map(). It is mostly used when you only want to run some logic on each item.
Difference Between map() and forEach()
| Method | Returns New Array? | Main Purpose |
|---|---|---|
| map() | Yes | Transform array items |
| forEach() | No | Run logic for each item |
Quick Summary
- pop() removes the last element.
- shift() removes the first element.
- unshift() adds elements at the beginning.
- splice() adds, removes, or replaces elements.
- map() creates a new transformed array.
- forEach() loops through an array without returning a new array.
More In Javascript
Read more articles from the same category or open the full category archive directly.
Javascript
JavaScript ES6+ Interview Questions & Concepts (Destructuring, Spread, Rest)
Javascript
JavaScript Basics Explained: Variables, Data Types & Functions with Examples
Javascript