JavaScript Array Methods and Promises: A Comprehensive Guide

Understanding JavaScript Array Methods: find, findIndex, filter, map, forEach

JavaScript provides several powerful methods for working with arrays. These methods can streamline your code and make it more efficient. Let’s dive into some commonly used array methods and see how they work.

1. find

The find method is used to retrieve the first element in an array that satisfies a provided condition. If no elements pass the condition, it returns undefined.

const arr = ["karachi", "lahore", "islamabad"];

const findCity = arr.find((value, index) => {
    return value === "lahore";
});

console.log("findCity:", findCity); // Output: lahore

2. findIndex

Similar to find, findIndex returns the index of the first element in the array that satisfies the provided testing function. If no elements pass the condition, it returns -1.

const arr = [
    { name: "karachi" },
    { name: "lahore" },
    { name: "islamabad" },
];

const cityIndex = arr.findIndex((value, index) => {
    return value.name === "islamabad";
});

console.log("cityIndex:", cityIndex); // Output: 2

3. filter

The filter method creates a new array with all elements that pass the test implemented by the provided function.

const arr = [8, 2, 4, 8, 6, 8, 8, 10];

const filterValue = arr.filter((value, index) => {
    return value === 8;
});

console.log("filterValue:", filterValue); // Output: [8, 8, 8, 8]

4. map

The map method creates a new array populated with the results of calling a provided function on every element in the calling array.

const arr = [2, 4, 6, 8, 10];

const newArr = arr.map((value, index) => {
    return value * 2;
});

console.log("newArr:", newArr); // Output: [4, 8, 12, 16, 20]

5. forEach

The forEach method executes a provided function once for each array element.

const arr = [1, 11, 113, 8, 2, 4, 8, 6, 8, 8, 10];
var tempArr = [];

arr.forEach((value, index) => {
    if (value % 2 === 0) {
        tempArr.push(value);
    }
});

console.log("tempArr:", tempArr); // Output: [8, 2, 4, 8, 6, 8, 8, 10]

---

Promises in JavaScript

Promises are used in JavaScript to handle asynchronous operations. They provide a way to deal with the result or failure of an asynchronous operation once it's completed.

const loginPromise = new Promise((resolve, reject) => {
    var requestLogin = false; // Change to true to see "Login successfully"
    if (requestLogin) {
        resolve("Login successfully");
    } else {
        reject("something went wrong!");
    }
});

loginPromise
    .then((success) => {
        console.log(success);
    })
    .catch((error) => {
        console.log(error);
    });

In this example, loginPromise demonstrates a simple promise that resolves if requestLogin is true and rejects if requestLogin is false.

---

By mastering these array methods and understanding how promises work, you can write cleaner and more efficient JavaScript code. Experiment with these methods in your own projects to see their full potential!

This concludes our overview of the find, findIndex, filter, map, and forEach array methods, as well as an introduction to promises in JavaScript.

---

Feel free to adjust the explanations and examples to suit your teaching style and the level of understanding of your audience. Happy coding!