Mastering JavaScript Array Methods: A Beginner's Guide

1) Introduction to Arrays ?

An array is a special type of object in programming that can store multiple values under a single name. These values are stored in an ordered list, which means each value has a specific position (called an index) starting from 0. Arrays make it easier to organize, access, and manipulate data without having to create many separate variables.

Key Points About Arrays :

• Arrays can store numbers, strings, or even other arrays.

• Values in arrays are ordered, so each value has an index.

• You can access any item in the array using its index.

• Arrays are useful for looping through data, performing operations on each item, or storing large collections of data efficiently.

Example :

• fruits is the array variable that holds all the fruit names.

• "Apple" is at index 0, "Banana" is at index 1, and "Orange" is at index 2.

• To access a specific fruit, we use the index inside square brackets.

// Starting array
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // Before: ["Apple", "Banana", "Orange"]

// Access the second element (index 1)
let secondFruit = fruits[1];
console.log(secondFruit); // Output: "Banana"

Before: ["Apple", "Banana", "Orange"]

After accessing fruits[1]: "Banana"

---

2) push() and pop() ?

i. push() – Add Element to the End

The push() method is used to add one or more elements to the end of an array. It changes the original array and returns the new length of the array. This is a mutating method, meaning the array itself is updated.

Key Points:

• Adds elements at the end of the array.

• Modifies the original array.

• Returns the new length of the array.

• To avoid changing the original array, you can use concat() instead.

• Add a new item to the end of the array.

Example :

• "Orange" is added to the end of the fruits array.

• The original array now contains three elements.

• push() returns the new length of the array, which is 3.

let fruits = ["Apple", "Banana"];
console.log(fruits); // Before: ["Apple", "Banana"]

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

console.log(fruits);     // After: ["Apple", "Banana", "Orange"]
console.log(newLength);  // New length: 3

Before: ["Apple", "Banana"]

After push("Orange"): ["Apple", "Banana", "Orange"]

ii. pop() – Remove Last Element

The pop() method is used to remove the last element from an array. It modifies the original array and returns the removed element. If the array is empty, it returns undefined.

Key Points :

• Removes the last element of the array.

• Modifies the original array (mutating method).

• Returns the removed element.

• If the array is empty, it returns undefined.

Example :

• pop() removes "Orange" from the end of the array.

• The array now contains only "Apple" and "Banana".

• The removed element "Orange" is returned by the method.

// Remove the last item from the array..

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // Before: ["Apple", "Banana", "Orange"]

// Remove the last element
let removed = fruits.pop();

console.log(fruits);   // After: ["Apple", "Banana"]
console.log(removed);  // Removed element: "Orange"

Before: ["Apple", "Banana", "Orange"]

After pop(): ["Apple", "Banana"]

---

3) shift() and unshift()

i. shift() – Remove First Element

The shift() method is used to remove the first element from an array. It modifies the original array and returns the removed element. After removing the first element, all other elements shift one position to the left, and the array length decreases by 1. If the array is empty, it returns undefined.

Key Points:

• Removes the first element of the array.

• Modifies the original array (mutating method).

• Shifts all remaining elements to the left.

• Returns the removed element.

Example:

• shift() removes "Apple" from the start of the array.

• The array now contains "Banana" and "Orange".

• "Banana" moves to index 0, "Orange" moves to index 1.

• The removed element "Apple" is returned by the method.

//Remove the first item from the array..

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // Before: ["Apple", "Banana", "Orange"]

// Remove the first element
let removed = fruits.shift();

console.log(fruits);   // After: ["Banana", "Orange"]
console.log(removed);  // Removed element: "Apple"

Before: ["Apple", "Banana", "Orange"]

After shift(): ["Banana", "Orange"]

ii) unshift() – Add Element to the Start

The unshift() method is used to add one or more elements to the beginning of an array. It modifies the original array and returns the new length of the array. After adding elements, all existing elements shift one or more positions to the right to make space at the start.

The unshift() method of Array instances adds the specified elements to the beginning of an array and returns the new length of the array.

Key Points:

• Adds elements at the start of the array.

• Modifies the original array (mutating method).

• Shifts existing elements to the right.

• Returns the new length of the array.

Example:

• unshift() adds "Apple" to the start of the array.

• The array now contains "Apple", "Banana", and "Orange".

• "Banana" moves to index 1, "Orange" moves to index 2.

• The method returns the new length, which is 3.

let fruits = ["Banana", "Orange"];
console.log(fruits); // Before: ["Banana", "Orange"]

// Add "Apple" to the start
let newLength = fruits.unshift("Apple");

console.log(fruits);     // After unshift("Apple"): ["Apple", "Banana", "Orange"]
console.log(newLength);  // New length: 3

Before: ["Banana", "Orange"]

After unshift("Apple"): ["Apple", "Banana", "Orange"]

---

4) Use map() to Double each number ?

The map() method is used to create a new array by applying a function to every element of an existing array. It does not change the original array. Instead, it returns a new array with the updated values.

Key Points:

• Applies a function to each element in the array.

• Returns a new array with the transformed values.

• Does not modify the original array.

Example: Double Each Number

• map() goes through each number in the array.

• Each number is multiplied by 2.

• A new array is created with the doubled values.

let numbers = [1, 2, 3, 4];
console.log(numbers); // Before: [1, 2, 3, 4]

// Double each number
let doubled = numbers.map(num => num * 2);

console.log(doubled); // After map(): [2, 4, 6, 8]

Before: [1, 2, 3, 4]

After map(): [2, 4, 6, 8]

---

5) filter()

The filter() method is used to create a new array that includes only the elements that match a specific condition. It checks each element in the array and keeps only those that satisfy the condition. The original array is not modified.

Key Points:

• Checks each element in the array.

• Returns a new array with elements that meet the condition.

• Does not change the original array.

Example : Use filter() to Get Numbers Greater Than 10

• filter() goes through each number in the array.

• It keeps only the numbers that are greater than 10.

• A new array is created with those numbers.

let numbers = [5, 12, 8, 20, 3];
console.log(numbers); // Before: [5, 12, 8, 20, 3]

// Get numbers greater than 10
let result = numbers.filter(num => num > 10);

console.log(result); // After filter(): [12, 20]

Before: [5, 12, 8, 20, 3]

After filter(): [12, 20]

---

6) reduce() (basic explanation only) ?

The reduce() method is used to reduce all elements of an array into a single value. It applies a function to each element and keeps updating a result (called an accumulator). This method is often used for calculating totals, sums, or combined results.

Key Points:

• Processes each element in the array.

• Uses an accumulator to store the running result.

• Returns one final value.

• Does not change the original array.

Example: Use reduce() to Calculate Total Sum :

• reduce() goes through each number in the array.

• It adds each number to the accumulator.

• The final result is the total sum of all numbers.

let numbers = [10, 20, 30, 40];
console.log(numbers); // Before: [10, 20, 30, 40]

// Calculate total sum
let total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total); // After reduce(): 100

Before: [10, 20, 30, 40]

After reduce(): 100

---

7) forEach() – Run a Function for Each Element

The forEach() method is used to execute a function once for every element in an array. It goes through each item in the array and performs an action, such as printing values or performing calculations. It does not return a new array.

Key Points:

• Runs a function for each element in the array.

• Used for performing actions like printing or updating values.

• Does not return a new array.

• Does not modify the original array unless you change it inside the function.

Example:

• forEach() goes through each fruit in the array.

• It prints every fruit one by one.

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // Before: ["Apple", "Banana", "Orange"]

// Print each fruit
fruits.forEach(fruit => console.log(fruit));

Before: ["Apple", "Banana", "Orange"]

Output:
Apple
Banana
Orange

---

8) Assignment Idea

1. Create an Array of Numbers

First, create an array that contains several numbers.

Code:

const numbers = [2, 5, 8, 12, 15];

---

2. Use map() to Double Each Number

Use the map() method to create a new array where each number is multiplied by 2.

Code:

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// Output: [4, 10, 16, 24, 30]

---

3. Use filter() to Get Numbers Greater Than 10

Use the filter() method to keep only numbers that are greater than 10.

Code:

const filtered = doubled.filter(num => num > 10);

console.log(filtered);
// Output: [16, 24, 30]

---

4. Use reduce() to Calculate Total Sum

Use the reduce() method to add all the numbers in the array and get the final total.

Code:

const totalSum = filtered.reduce((accumulator, current) => accumulator + current, 0);

console.log("Final Sum:", totalSum);
// Output: Final Sum: 70

---

9) Overall Conclusion

Arrays are a powerful way to store and manage multiple values in a single variable. They help organize data and make it easier to perform operations on many items at once.

Using array methods such as push(), pop(), shift(), and unshift(), we can easily add or remove elements from an array. Methods like map(), filter(), reduce(), and forEach() allow us to process and manipulate array data efficiently.