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.

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. ✌