DEV Community

Cover image for Master JavaScript Array Methods with One Simple Image
Dipesh Jaiswal
Dipesh Jaiswal

Posted on

Master JavaScript Array Methods with One Simple Image

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.

Javascript Array Methods Simplified
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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 ]

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
tracygjg profile image
Tracy Gilmore • Edited

Hi Dipesh,
Very nice illustration and supporting examples.
I have a couple of suggestions.

  1. The pop and shift methods actually return the element they remove from the array but this is not shown in the illustration.
  2. Splice is a more involved method but is in far too common use to be missing from this list.

Regards, Tracy

Collapse
 
dipeshjaiswal profile image
Dipesh Jaiswal

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

Collapse
 
tracygjg profile image
Tracy Gilmore • Edited

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

Collapse
 
gilfewster profile image
Gil Fewster

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.

Collapse
 
dipeshjaiswal profile image
Dipesh Jaiswal

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.