Are you tired of scrolling through pages of documentation just to find the perfect array method for your JavaScript code? Look no further! In this blog post, we're going to take the complexity out of arrays and simplify the major methods into one easy-to-digest image. Whether you're a beginner or an experienced developer, this guide will give you a better understanding of the array methods available in JavaScript and how to use them. So, buckle up and get ready to say goodbye to confusion and hello to mastering arrays like a pro.
With the above image, you can see the major array methods and their corresponding descriptions all in one place. And in the following sections, we will take a deep dive into each one individually. Let's get started!🚀
1. push():
The push() method adds one or more elements to the end of an array and returns the new length of the array.
Code Example:
let arr = [1, 2, 3];
let count = arr.push(4);
console.log(arr); // [1, 2, 3, 4]
console.log(count); // 4
2. pop():
The pop() method removes the last element from an array and returns that element.
Code Example:
let arr = [1, 2, 3];
let popped = arr.pop();
console.log(arr); // [1, 2]
console.log(popped); // 3
3. shift():
The shift() method removes the first element from an array and returns that removed element.
Code Example:
let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // [2, 3]
console.log(first); // 1
4. unshift():
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
Code Example:
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
5. map():
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Code Example:
let arr = [1, 2, 3];
let newArr = arr.map((item) => {
return item * 2;
});
console.log(newArr); // [2, 4, 6]
6. filter():
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Code Example:
let arr = [1, 2, 3];
let newArr = arr.filter((item) => {
return item > 1;
});
console.log(newArr); // [2, 3]
7. reverse():
The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
Code Example:
let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
8. at():
The at() method returns the value at the given index in an array. Unlike the bracket notation, it will return undefined for out-of-bounds indices instead of an empty string.
Code Example:
let arr = [1, 2, 3];
console.log(arr.at(1)); // 2
console.log(arr.at(5)); // undefined
9. slice():
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.
Code Example:
let numbers = [2, 3, 5, 7, 11, 13, 17];
// create another array by slicing numbers from index 3 to 5
let newArray = numbers.slice(3, 6);
console.log(newArray); // [ 7, 11, 13 ]
In conclusion, arrays in JavaScript are a powerful and versatile data structure that allows developers to store, manipulate, and retrieve data with ease. I hope that this guide has helped you unlock the true potential of array methods. But there are many more array methods that we didn't cover in this blog, but don't worry! We'll be diving into more in-depth and advanced topics in future blogs, so stay tuned!
Peace out. ✌
Top comments (5)
Hi Dipesh,
Very nice illustration and supporting examples.
I have a couple of suggestions.
Regards, Tracy
Hi Tracy,
Thank you for the feedback, I appreciate your suggestions. You're correct that the pop and shift methods return the element they remove from the array, I will update the illustration to reflect that. I apologize for not including the splice method in the list, it is definitely a commonly used method and should have been included. I will definitely keep it in mind for future updates.
Thanks again for pointing these things out, it helps me make the guide even better.
Best,
Dipesh
Hi again Dipesh, My apologies for misspelling your name before; corrected. It is nice to have well-meaning comments acknowledged and I look forward to seeing the revised illustration. I noticed someone else commenting on the mix of presentation between the function return values and the array out come, which are often different things.
For example the
push
method does not return the revised array but the new length, which is far less helpful.Conversely, the newer methods like map and filter do return the new array, which is more helpful and possibly a reason for their growing popularity, and occasional misuse.
Regards, Tracy
It’s a neat diagram but it is a bit inconsistent, which may be confusing for less experienced developers.
Most of the method illustrations show how the original array will look after the functions has been performed. But it doesn’t explain that some of these functions also return a value.
For pop and shift, you show how the array looks after the function has been called, but for at() you show what the function returns, and not what the array looks like.
For slice, map and filter — the image doesn’t make it clear that the results shown are new arrays returned by the functions while the original array is not changed.
Knowing which functions mutate the target array and which ones create a new array is a vital part of understanding array methods in JS.
Thank you for bringing this to my attention. You're right that consistency in the illustration is important for clarity, especially for beginners. I'll make sure to include information on the return values of the pop and shift methods, as well as make it clear that the slice, map, and filter methods return new arrays rather than modifying the original.
Appreciate your suggestions and will try to implement them in the next update.