05 - Collections : Array Methods you must know !

Welcome back and kudos!.. , that you've made it to Array Methods !

As the name suggests, In this article we're going dive more into the world of Arrays .. while checking out multiple Array methods on the way.

So far, in this series , we've covered variables , opeartors , control flow , Array basics .

By the end of this article , you'll have a solid idea of what's an array method , and multiple methods that you'll use in your day-2-day dev life.

---

What are array methods anyways?

It's always good to understand what something actually is before we start throwing it around everywhere.

Array methods are simply built-in functions that JavaScript gives us out of the box to work with array.
It makes your life easier , as you don't need to write the logic manually .. you can perform several actions and these helper functions will do the heavy lifting for you.

We'll see what actions I am talking about in a moment.

Let's first talk about why array methods to draw a clear picture in your head about them, before we actually start checking out actual array methods.

---

Why array methods?

I believe you're pretty skilled with arrays and iterations over it.. so here's a task. You don't need to code it.. just imagine.

Suppose you have a list of 1000 numbers. And your task is to

• remove all numbers less than 10

• double the remaining values

• find the total sum of final numbers

You could do this with loops.. maybe a couple of variables.. some conditions and a long code..

It would work.

But it would also feel a little... messy.

Now imagine doing the same thing using array methods like filter() map() and reduce() .

Suddenly the intent of the code becomes very clear.
You're not worrying about how to loop anymore.. you're simply describing what you want to happen to the data .

---

How to Use an Array Methods

To access array methods, we use the dot notation on an array variable. It looks like this :

1 . push() - Add an item to the end

The push method add one or more elements to the end of an array and returns the new length of the array.

• Modifies the original array? - Yes

Example :

let fruits = ["apple","banana"] ; 
console.log(fruits); // Output : ["apple" , "banana"]

// Add "orange" to the end
let newLength = fruits.push("Orange");

console.log(newLength); // Output : 3 
console.log(fruits); // Output : ["apple" , "banana" , "orange"]

2. pop() - Remove an item from the end

The pop() method removes the last element from an array and returns that element.

• Modifies the original array? - Yes

Example :

let fruits = ["apple" , "banana" , "orange"];
console.log(fruits) ; // Ouptut : ["apple" , "banana" , "orange"];


// Remove the last element ("orange")
let lastFruit = fruits.pop();

console.log(lastFruit); // Output: "orange"
console.log(fruits);    // Output: ["apple", "banana"]

3. unshift() - Add an item to the beginning

The unshift() method adds one more more array elements to the beginning of an array and returns the new length.

• Modifies the original array? - Yes

Example :

let fruits = ["banana", "orange"];
console.log(fruits); // Output: ["banana", "orange"]

// Add "apple" to the beginning
let newLength = fruits.unshift("apple");

console.log(newLength); // Output: 3
console.log(fruits);    // Output: ["apple", "banana", "orange"]

4. shift() - Remove an item from the beginning

The shift() method removes the first element from an array and returns that element.

• Modifes the original array? - Yes

Example :

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // Output: ["apple", "banana", "orange"]

// Remove the first element ("apple")
let firstFruit = fruits.shift();

console.log(firstFruit); // Output: "apple"
console.log(fruits);     // Output: ["banana", "orange"]

5. forEach()- Do something with each item

The forEach() method executes a provided function once for each array element. It's a cleaner way to write a traditional for loop. It does NOT return a new array.

• Modifies the original array? - NO (unless you explicitally modify it inside the function)

Example :

let numbers = [1, 2, 3, 4];

// Traditional for loop
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * 2);
}

// Using forEach (cleaner!)
numbers.forEach(function(number) {
  console.log(number * 2);
});

// Even shorter with an arrow function
numbers.forEach(number => console.log(number * 2));
// Output: 2, 4, 6, 8

6. map() - Transform each item

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. It's used for transformation.

• Modifies the original array? - NO

How it works :

Each element is transformed !

Example :

let numbers = [1, 2, 3, 4];

// Double each number and store the result in a new array
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

// Using an arrow function (even shorter!)
let doubledNumbers2 = numbers.map(number => number * 2);

console.log(numbers);         // Output: [1, 2, 3, 4] (original unchanged)
console.log(doubledNumbers2); // Output: [2, 4, 6, 8]

7. filter() - Keep only some items

The filter() method creates a new array with all elements that pass a test implemented by the provided function. It's used for selection.

• Modifies the original array? - No

How it works :

Example

let numbers = [1, 2, 3, 4, 5];

// Keep only numbers greater than 2
let filteredNumbers = numbers.filter(function(number) {
  return number > 2;
});

// Using an arrow function
let filteredNumbers2 = numbers.filter(number => number > 2);

console.log(numbers);          // Output: [1, 2, 3, 4, 5] (original unchanged)
console.log(filteredNumbers2); // Output: [3, 4, 5]

8. reduce() - Combine all items into one

The reduce() method exectues a "reducer" function on each element of the array, resulting a single output value. This is the most powerful (and initially, most confusing) method. It's used for acuumulation.

Think of it like this : you have a pile of numbers.. and you want to fold them into a single total.

• Modifes the original array ? - NO

How it works :

Example :

let numbers = [1, 2, 3, 4];

// Calculate the total sum
let totalSum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0); // The 0 here is the starting value of the accumulator

// Using an arrow function
let totalSum2 = numbers.reduce((sum, num) => sum + num, 0);

console.log(totalSum2); // Output: 10

How it works step-by-step:

1. The reducer function runs for the first time. sum (accumulator) starts at 0 . num (currentValue) is 1 . The function returns 0 + 1 = 1 .

2. It runs again. sum is now 1 (the result from the last step) . num is 2 . the function returns 1+2 =3.

3. Next : sum is 3 , num is 3. Returns 6.

4. Last : sum is 6 , num is 4. Returns 10.

Put your skills to the test!!

Now it's your turn . Open your browser's console (Right-click -> Inspect -> Console) and try this challenge :

1. Create an array of numbers : [5, 12 , 8, 130 , 44 , 3 , 55] .

2. User filter() to get a new array containing only numbers greater than 10.

3. Use map() on the new array to double each of those numbers.

4. Use reduce() to calculate the total sum of the final numbers.

BONUS : Try to do it in one line by chaining the methods together..

---

Wrapping Up

Array methods are your friends. They make your code more readable, less error-prone , and more expressive. We've covered the core ones here:

• Adding/Removing : push() , pop() , shift() , unshift()

• Looping : forEach()

• Transforming : map()

• Selecting : filter()

• Accumulating : reduce()

Avoid chaining them together until you're comfortable with each one individually. Practice them one by one, and soon they'll become.. and indispensable part of ur JS TOOLKIT..

Happy coding! will see you in next article..