DEV Community: Muhammad Rizwan Ashiq

Logic Making

Muhammad Rizwan Ashiq — Sun, 09 Jul 2023 16:37:35 +0000

Logic is the foundation of programming and software development, regardless of your experience level. Whether you're a beginner or an experienced developer, having a strong grasp of logic is crucial for writing efficient and bug-free code. In this blog post, we will dive into the world of logic, exploring its concepts, principles, and practical applications in programming. By following a systematic approach, you can effectively solve coding problems. We will walk you through the step-by-step process, using a simple example to illustrate each stage and help you apply these techniques to real-world scenarios. By the end, you'll have the confidence and clarity to approach any programming problem with the necessary tools and skills.

Let's consider the following problem:

Problem: Given a list of numbers, write a program to find the largest number in the list.

Inputs: A list of integers.

Outputs: The largest number in the list.

To solve this problem, we can follow the following steps:

Understand the problem
Plan your solution & Break down the problem
Identify the inputs and outputs
Pseudocode
Write the code
Test and debug
Optimize
Conclusion

Understand the problem

The first step in solving a coding problem is to understand the problem statement. Read the problem carefully and make sure you understand what the problem is asking you to do. Identify the inputs and outputs, and any constraints or requirements of the problem.

Constraints: The list may contain duplicates, and may have up to 10,000 elements.

Plan your solution & Break down the problem

Once you understand the problem, think about how you can solve it. Break down the problem into smaller steps or sub-problems, more manageable sub-problems. This will help you to tackle the problem step by step, and avoid getting overwhelmed.

For example, for the problem above, we can break it down into the following sub-problems:

Create a list of numbers.
Find the largest number in the list.

Identify the inputs and outputs

Before you start writing code, you need to determine what the input(s) to your program will be and what output(s) are expected. This will help you design your code with the necessary data structures and algorithms.

For example, for the problem above, we know that the input is a list of integers, and the output is a single integer (the largest number in the list).

Pseudocode

Once you have identified the inputs and outputs and broken down the problem, it's time to write a high-level plan of what your program should do. This doesn't have to be actual code, but rather a series of steps in plain English that you can translate into code later.

What is pseudocode?

Pseudocode is a way of writing code that is not specific to any programming language. It's a way of expressing an algorithm in plain English, without worrying about the syntax of a particular programming language. Pseudocode is often used to plan out a program before writing the actual code.

For example, here's some pseudocode for the problem above:

create a list of numbers
for loop to iterate over the list
if the current number is larger than the largest number
        set the largest number to the current number
return the largest number

Write the code

With a clear plan in mind, it's time to start writing the code. Use the pseudocode as a guide, but don't be afraid to make adjustments as you go along.

Here's some C++ code that implements the pseudocode above:

int find_largest_number(int numbers[], int size) {
    int largest_number = numbers[0];
    for (int i = 1; i < size; i++) {
        if (numbers[i] > largest_number) {
            largest_number = numbers[i];
        }
    }
    return largest_number;
}

Test and debug

Once you've written the code, it's important to test it on different inputs and make sure the output matches the expected output. If there are any errors or bugs, go back and debug your code.
For example, let's test our code with the input [4, 1, 7, 2, 8, 3]. The expected output is 8 since that's the largest number in the list.

find_largest_number({4, 1, 7, 2, 8, 3}, 6) // returns 8

What is debugging?

Debugging is the process of finding and fixing errors in your code. It's an important skill for any programmer, and it can be challenging at times. However, with practice, you'll get better at it.

Optimize

Finally, if your code works correctly, but is slow or uses too much memory, consider optimizing it to improve performance. However, for simple problems like the one above, optimization may not be necessary.

What is optimization?

Optimization is the process of making your code run faster or use less memory. It's an important skill for any programmer, and it can be challenging at times. However, with practice, you'll get better at it.

Conclusion

That's it! With these steps, you should be able to approach and solve a variety of coding problems. Remember, coding is not just about writing code; it's about problem-solving. Encourage beginners to think critically and creatively about how to approach problems, and to persevere even when they encounter difficulties.

Async Await

Muhammad Rizwan Ashiq — Mon, 26 Jun 2023 18:02:23 +0000

What is Async Await

async/await is a language feature introduced in ECMAScript 2017 (AKA ES8) that makes it easier to work with asynchronous code in JavaScript. It allows you to write asynchronous code that looks and behaves like synchronous code, using the await keyword to pause execution until a Promise is resolved.

async/await is a syntactic sugar over the promises. It makes asynchronous code look like synchronous code. It is a new way to write asynchronous code in JavaScript.

Let's see them individually.

`async`

The async keyword is used to declare an asynchronous function. What happens when you use the async keyword?

It executed asynchronously, meaning that it doesn't block the execution of the program while it's waiting for a certain task to complete. Instead, it returns a Promise that represents the result of the asynchronous operation.

async functions are typically used when dealing with time-consuming operations such as network requests, file I/O, or database queries, where waiting for the result would block the execution of the program. By using async functions, you can avoid blocking and allow the program to continue executing other tasks while waiting for the result.

It Allows you to write promises-based code as if it was synchronous. It ensures that the execution thread is not being broken. The event loop is used for its asynchronous operation. A value is always returned by async functions. It guarantees that promises be fulfilled, and if they are not, JavaScript automatically wraps them in promises that are resolved with their values.

async function myFunction() {
    return "Hello World";
}

The above function returns a promise. The promise is resolved with the value "Hello World".

And in the arrow function:

const myFunction = async () => {
    return "Hello World";
};

`await`

await keyword is used to wait for a Promise to resolve before proceeding to the next line of code. It can only be used inside an asynchronous function (a function that has been declared with the async keyword).

When an async function encounters an await keyword, it pauses its execution until the Promise that is being awaited has been resolved. The value of the resolved Promise is then returned and assigned to the variable that follows the await keyword.

Here's an example of how await can be used:

async function getData() {
    const response = await fetch("https://example.com/data");
    const data = await response.json();
    return data;
}

getData().then((data) => {
    console.log(data);
});

In the example above, the getData function is declared as async, which allows us to use the await keyword inside it. The function first makes a network request to fetch some data from the specified URL. We then wait for the response to come back using await, and then we wait again for the data to be parsed into a JSON object. Finally, we return the parsed data from the function.

When we call getData(), it returns a Promise that resolves to the parsed data. We can then use .then() to log the data to the console once it's been resolved.

`async`/`await` vs `promises`

async/await is modified version (wrapper) of promises. async/await just replaces the .then() and .catch() methods with await keyword and try and catch blocks. It is a syntactic sugar over promises. It makes asynchronous code look like synchronous code. It is a new way to write asynchronous code in JavaScript.

`async`/`await`

async function myFunction() {
    const fetchData = async () => {
        const res = await fetch(resource);
        const data = await res.json();
        return data;
    };

    const result = await fetchData(); // wait till the promise resolves (*)

    console.log(result); // "Promise was resolved"
}

promises

function myFunction() {
    const fetchData = () => {
        return fetch(resource)
            .then((res) => res.json())
            .then((data) => data);
    };

    fetchData().then((result) => console.log(result)); // "Promise was resolved"
}

Both the above code snippets do the same thing. The only difference is that the async/await version is easier to read and write. But in some cases, where I need to run multiple promises in parallel, I prefer to use promises instead of async/await. Because async/await will wait for the previous promises to resolve before moving to the next line of code. But in promises, I can run multiple promises in parallel like this

Examples

HTTP requests with `async`/`await`

Here's an example of using async/await to make an HTTP request:

// to use async/await, you must use a function that is labeled as `async`, like this:
async function getData() {
    try {
        const response = await fetch("https://example.com/");
        // `await` will pause the execution of the function until the Promise is resolved
        const data = response.json();
        console.log(data);
    } catch (error) {
        // if there is an error, it will be caught here
        console.error(error);
    }
}

getData(); // calling the function

In this example, we define an async function called getData. Inside the function, we use the await keyword to pause execution until the fetch Promise is resolved.

If there is an error making the request, the catch block will be executed.

async/await makes it easier to work with asynchronous code in JavaScript and can help make your code more readable and maintainable. It is particularly useful for working with Promises and is widely used in modern JavaScript code.

:::info

async/await is a language feature that is built on top of Promises. It is not a replacement for Promises. It is a syntactic sugar that makes asynchronous code look and behave like synchronous code.

If you are new to Promises, you should read the Promises article first.

:::

`async`/`await` with `Promises`

Here's an example of how to use async/await with a Promise:

async function getData() {
    try {
        const response = await fetch("https://example.com/");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

getData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

In this example, we define an async function called getData. The await operator is used to wait for the resolved value of a Promise. In this case, we use it to wait for the fetch function to complete and for the json method to complete.

If the Promise is rejected, the catch block will be executed.

`async`/`await` with `for` loops

Here's an example of how to use async/await with a for loop:

async function getData() {
    try {
        const response = await fetch("https://example.com/");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

async function getMultipleData() {
    const data = [];
    for (let i = 0; i < 5; i++) {
        const response = await getData();
        data.push(response);
    }
    return data;
}

getMultipleData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

If the Promise is rejected, the catch block will be executed.

`async`/`await` with `Promise.all()` and `Promise.settleAll()` methods

Imagine a situation where you have to make multiple HTTP requests and put await in front of each request, in result you have to wait for all of them to complete sequentially, and it would take a lot of time, as you can see in the example below:

```js title="sequential requests"
async function getData() {
try {
const users = await getUser();
const posts = await getPosts(); // wait for the previous request to complete
const comments = await getComments(); // wait for the previous request to complete
const followers = await getFollowers(); // vice versa
const following = await getFollowing();
const likes = await getLikes();

    return {
        users,
        posts,
        comments,
        followers,
        following,
        likes,
    };
} catch (error) {
    console.error(error);
}

}




You can see that we have to wait for each request to complete before moving on to the next one. This is where `Promise.all` comes in handy.

#### `Promise.all`

It allows you to hit multiple async processes at the same time (in parallel) and wait for all of them to complete. Here's an example:



```js title="parallel requests"
async function getData() {
    try {
        const usersPromise = getUser(); // no await here
        const postsPromise = getPosts(); // no await here
        const commentsPromise = getComments(); // vice versa
        const followersPromise = getFollowers();
        const followingPromise = getFollowing();
        const likesPromise = getLikes();

        // wait for all promises to resolve, and then destructure the result
        const [users, posts, comments, followers, following, likes] =
            await Promise.all([
                usersPromise,
                postsPromise,
                commentsPromise,
                followersPromise,
                followingPromise,
                likesPromise,
            ]);

        /**
         * or you can use the following syntax if you don't need to use the promises again
         * which is more concise and readable, and I prefer this syntax
         *
         * const [users, posts, comments, followers, following, likes] = await Promise.all([
         *     getUser(),
         *     getPosts(),
         *     getComments(),
         *     getFollowers(),
         *     getFollowing(),
         *     getLikes(),
         *  ]);
         *
         */

        return {
            users,
            posts,
            comments,
            followers,
            following,
            likes,
        };
    } catch (error) {
        console.error(error);
    }
}

In this example, we use Promise.all to wait for all the promises to be resolved and then we destructure the array to get the resolved values. These are parallel requests, which means that the requests are made at the same time.

`Promise.allSettled`

But Promise.all has a problem, imagine a situation where one of the promises is rejected, in this case, the whole promise will be rejected and the catch block will be executed. If we want to get the resolved values, and ignore the rejected ones, we can use Promise.allSettled:

async function getData() {
    try {
        const [users, posts, comments, followers, following, likes] =
            await Promise.allSettled([
                getUser(),
                getPosts(),
                getComments(),
                getFollowers(),
                getFollowing(),
                getLikes(),
            ]);

        return {
            users,
            posts,
            comments,
            followers,
            following,
            likes,
        };
    } catch (error) {
        console.error(error);
    }
}

In this example, we use Promise.allSettled to wait for all the promises to be resolved or rejected and then we destructure the array to get the resolved values.

`async`/`await` in series

Promise.all and Promise.allSettled are useful if all the promises are independent of each other, but if you have a situation where you have to wait for one promise to be resolved before moving on to the next one. You can also use Promise.all, or Promise.allSettled for few promises, and then await the next promise, as shown in the example below:

async function getData() {
    try {
        const [users, posts, comments] = await Promise.all([
            getUser(),
            getPosts(),
            getComments(),
        ]);

        const followers = await getFollowers();
        const following = await getFollowing();
        const likes = await getLikes();

        return {
            users,
            posts,
            comments,
            followers,
            following,
            likes,
        };
    } catch (error) {
        console.error(error);
    }
}

In this example, we use Promise.all to wait for the first three promises to be resolved, and then we await the next three promises.

Conclusion

In this article, we learned about async/await and how to use it with Promises. We also learned how to use async/await with for loops and how to use async/await with Promise.all and Promise.allSettled methods.

Promises

Muhammad Rizwan Ashiq — Mon, 26 Jun 2023 17:40:57 +0000

What is a Promise?

Promises are used to handle asynchronous operations introduced in ES6. It is an object that represents the eventual completion or failure of an asynchronous operation.

They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code. Callback functions were used before promises, but they had limited functionality and resulted in unmanageable code. The nightmare that would result from having several callback functions would make the code unmanageable.

Create a Promise

A promise is created using the new keyword, and it takes a function as an argument. This function takes two parameters, resolve and reject. The resolve function is called when the asynchronous operation is successful, and the reject function is called when the asynchronous operation fails.

const promiseFunction = () => {
    new Promise((resolve, reject) => {
        // do something
        if (everythingIsOk) {
            resolve("success");
        } else {
            reject("failure");
        }
    });
};

How to use a Promise?

A promise is used by calling the then() method on the promise object. The then() method takes two functions as arguments, the first function is called when the promise is resolved, and the second function is called when the promise is rejected.

promiseFunction()
    .then((result) => {
        // if everyThingIsOK, and promise is resolved, then this function is called
    })
    .catch((error) => {
        // if something went wrong, and promise is rejected, then this function is called
    });

States of a Promise

A promise (in JS context) takes some time to execute. There are possible states of a promise:

fulfilled✅: Action related to the promise succeeded
rejected❌: Action related to the promise failed
pending⏳: Promise is still pending i.e. not fulfilled or rejected yet

As promise takes in two functions as parameters. That is, resolve and reject in declaring it.

Here is an example of a promise:

const myPromise = new Promise((resolve, reject) => { // resolve and reject are functions
  if (/* condition */) {
    resolve("Promise was fulfilled ✅");
  } else {
    reject("Promise was rejected ❌");
  }
});

The resolve function is called when the promise is fulfilled and the reject function is called when the promise is rejected. The resolve and reject functions are called inside the promise. The resolve and reject functions are passed as parameters to the promise.

The then() method is used to handle the promise. It takes two functions as parameters. The first function is called when the promise is fulfilled ✅. The second function is called when the promise is rejected ❌.

myPromise
    // highlight-start
    .then((value) => {
        console.log(value);
    })
    // highlight-end
    .catch((error) => {
        console.log(error);
    });

The catch() method is used to handle the promise when it is rejected ❌. It takes a function as a parameter. The function is called when the promise is rejected.

myPromise
    .then((value) => {
        console.log(value);
    })
    .catch((error) => {
        console.log(error);
    });

Examples

Return a random number between 1 and 10

Let's create a promise that will return a random number between 1 and 10. If the number is greater than 5, the promise will be resolved, and if the number is less than 5, the promise will be rejected.

const randomNumberGenerator = () => {
    new Promise((resolve, reject) => {
        const randomNumber = Math.floor(Math.random() * 10) + 1;
        if (randomNumber > 5) {
            resolve(randomNumber);
        } else {
            reject(randomNumber);
        }
    });
};

randomNumberGenerator()
    .then((result) => {
        console.log(`Success: ${result}`);
    })
    .catch((error) => {
        console.log(`Error: ${error}`);
    });

Fetching Data from an API using Promises

function getData() {
    return new Promise((resolve, reject) => {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
            // Data will be assigned to the variable `response`, if the promise is fulfilled
            .then((response) => response.json())
            // ☝️ here we are converting the response to JSON, and returning it to the next `then` function
            .then((data) => resolve(data))
            // ☝️ here we are resolving the promise with the data
            .catch((error) => reject(error));
        // ☝️ here we are rejecting the promise with the error
    });
}

// Calling the function `getData`
getData()
    // 👇 `then()` will be called if the promise is resolved
    .then((data) => {
        console.log(data);
    })
    // 👇 `catch()` will be called if the promise is rejected
    .catch((error) => {
        console.log(error);
    });

In the above example, getData() is a function that returns a promise. It fetches the data from the API. The then() method is used to handle the promise when it is fulfilled. The catch() method is used to handle the promise when it is rejected.

Promise Chaining

Promise chaining is a way to handle multiple promises. It is used to handle asynchronous operations in a better way. It is a replacement for callbacks and events. It is used to handle asynchronous operations in JavaScript, such as making HTTP requests to a server, reading from a file, or interacting with a database. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code. Callback functions were used before promises, but they had limited functionality and resulted in unmanageable code. The nightmare that would result from having several callback functions would make the code unmanageable.

const promise1 = Promise.resolve("Promise 1 resolved");
const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 2 resolved");
    }, 2000);
});

promise1
    .then((value) => {
        // `value` will be "Promise 1 resolved"
        console.log(value);
        return promise2; // returning the `promise2` to the next `then` function
    })
    .then((value) => {
        // `value` will be "Promise 2 resolved"
        console.log(value);
    })
    .catch((error) => {
        console.log(error);
    });

In the above example, the promise1 is resolved first. Then the promise2 is resolved after 2 seconds. The then() method is used to handle the promise when it is fulfilled. The catch() method is used to handle the promise when it is rejected.

`Promise.all()`

It takes an array of promises as an argument. It returns a single promise. It resolves when all of the promises in the argument array have resolved. It rejects with the reason of the first promise that rejects.

const promise1 = Promise.resolve("Promise 1 resolved");
const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 2 resolved");
    }, 2000);
});

Promise.all([promise1, promise2])
    .then((values) => {
        console.log(values);
    })
    .catch((error) => {
        console.log(error);
    });

`Promise.allSettled()`

It returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

const promise1 = Promise.resolve("Promise 1 resolved");
const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 2 resolved");
    }, 2000);
});

Promise.allSettled([promise1, promise2])
    .then((values) => {
        console.log(values);
    })
    .catch((error) => {
        console.log(error);
    });

Conclusion

Here we have learned about promises in JavaScript. We have learned about the Promise object, the then() method, the catch() method, promise chaining, Promise.all(), and Promise.allSettled(). We have also learned about the examples of promises in JavaScript.

Array.some() Method

Muhammad Rizwan Ashiq — Sun, 18 Jun 2023 16:02:16 +0000

What is Some Method?

The some() method is used to check if at least one element in an array passes a test implemented by a provided function. It returns a boolean value.

Syntax

Here's the syntax for using some():

const result = arr.some((element, index, array) => {
    // Return true if at least one element passes the test, false otherwise
});

The callback function is called for each element in the array and takes the following arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that some() is being applied to

The some() method calls the callback function once for each element in the array, in order, and stops when it finds an element for which the callback returns true. If such an element is found, the method returns true. Otherwise, if the callback returns false for all elements, some() returns false.

Here's an example of how to use some() to check if at least one number in an array is even:

const numbers = [1, 3, 5, 7, 9];

const result = numbers.some(function (number) {
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

console.log(result); // prints false

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns true if number is even, and false otherwise. The some() method calls this function for each element in the numbers array and stops when it finds an even number. Since none of the numbers in the array are even, the some() method returns false.

You can also use an arrow function as the callback function, like this:

let result = numbers.some((number) => number % 2 === 0);

console.log(result); // prints false

The some() method is useful for checking if at least one element in an array passes a certain condition.

Examples

Here are a few more examples of how you can use some():

Checking if at least one number in an array is greater than 10

const numbers = [1, 3, 5, 7, 9];

const result = numbers.some((number) => number > 10);

console.log(result); // prints false

Checking if at least one word in an array is longer than 5 characters

const words = ["hello", "world", "this", "is", "a", "sentence"];

const result = words.some((word) => word.length > 5);

console.log(result); // prints true

Checking if at least one word in an array contains the letter "a"

const words = ["hello", "world", "this", "is", "a", "sentence"];

const result = words.some((word) => word.includes("a"));

console.log(result); // prints true

Checking if at least one word in an array contains the letter "z" using a regular expression

const words = ["hello", "world", "this", "is", "a", "sentence"];

const result = words.some((word) => /z/.test(word));

console.log(result); // prints false

Checking if at least one object in an array has a property called "name"

const people = [
    { name: "John", age: 20 },
    { name: "Jane", age: 21 },
    { name: "Mary", age: 22 },
];

const result = people.some((person) => person.name);

console.log(result); // prints true

Checking if at least one object in an array has a property called "name" and the value of that property is "John"

const people = [
    { name: "John", age: 20 },
    { name: "Jane", age: 21 },
    { name: "Mary", age: 22 },
];

const isExists = people.some((person) => person.name === "John");

console.log(isExists); // prints true

Checking if student is passed in all subjects

const rizwan = {
    name: "Rizwan",
    age: 14,
    class: 8,
    subjects: [
        { name: "Math", score: 90 },
        { name: "Computer", score: 89 },
        { name: "English", score: 80 },
        { name: "Social Science", score: 60 },
        { name: "Science", score: 70 },
    ],
};

const isFailed = ross.subjects.some((subject) => subject.score < 50);

console.log(isFailed); // prints false

Here true means user is failed in at least one subject.

`some()` vs `find()`

The some() method is similar to the find() method. The difference is that some() returns true if at least one element in the array passes the test implemented by the callback function, while find() returns the value of the first element in the array that passes the test implemented by the callback function. If no elements pass the test, find() returns undefined.

Here's an example of how to use find() to find the first number in an array that is greater than 10:

const numbers = [1, 3, 5, 7, 9, 11, 13, 15];

const result = numbers.find((number) => number > 10);

console.log(result); // prints 11

Here's an example of how to use some() to check if at least one number in an array is greater than 10:

const numbers = [1, 3, 5, 7, 9, 11, 13, 15];

const result = numbers.some((number) => number > 10);

console.log(result); // prints true

Conclusion

In this article, we learned about the some() method, which is used to check if at least one element in an array passes a certain condition. We also learned about the syntax for using some() and a few examples of how to use it.

Array.every() Method

Muhammad Rizwan Ashiq — Sun, 18 Jun 2023 16:01:09 +0000

What is Every Method?

The every() tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Syntax

Here's the syntax for using every():

const result = arr.every((element, index, array) => {
    // Return true if all elements pass the test, false otherwise
});

The callback function is called for each element in the array and takes the following arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that every() is being applied to

The every() method calls the callback function once for each element in the array, in order, and stops when it finds an element for which the callback returns false. If such an element is found, the method returns false. Otherwise, if the callback returns true for all elements, every() returns true.

Here's an example of how to use every() to check if all the numbers in an array are even:

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

const result = numbers.every(function (number) {
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

console.log(result); // prints true

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns true if number is even, and false otherwise. The every() method calls this function for each element in the numbers array and stops when it finds an odd number. Since all the numbers in the array are even, the every() method returns true.

You can also use an arrow function as the callback function, like this:

let result = numbers.every((number) => number % 2 === 0);

console.log(result); // prints true

The every() method is useful for checking if all the elements in an array pass a certain condition.

Examples

Here are a few more examples of how you can use every():

Checking if all the numbers in an array are greater than 10

const numbers = [12, 14, 16, 18, 20];

const result = numbers.every((number) => number > 10);

console.log(result); // prints true

Checking if all the strings in an array are of a certain length

const strings = ["hello", "world", "this", "is", "javascript"];

const result = strings.every((string) => string.length > 5);

console.log(result); // prints false

Checking if all the elements in an array are of a certain type

const mixedArray = [1, 2, 3, "hello", "world", true, false];

const result = mixedArray.every((element) => typeof element === "number");

console.log(result); // prints false

Checking if student is passed in all subjects

const ross = {
    name: "Ross",
    age: 14,
    class: 8,
    subjects: [
        { name: "Math", score: 90 },
        { name: "Computer", score: 50 },
        { name: "English", score: 80 },
        { name: "Social Science", score: 60 },
        { name: "Science", score: 70 },
    ],
};

const result = ross.subjects.every((subject) => subject.score >= 60);

console.log(result); // prints false

Checking if all the elements in an array are unique

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

const result = numbers.every((number, index, array) => {
    return array.indexOf(number) === index;
});

console.log(result); // prints true

When to use Every Method?

The every() method is useful for checking if all the elements in an array pass a certain condition. It returns true if all the elements pass the test, and false otherwise. For example:

const numbers = [12, 14, 16, 18, 20];

const result = numbers.every((number) => number > 10);

console.log(result); // prints true

In the example above, the every() method checks if all the numbers in the numbers array are greater than 10. Since all the numbers in the array are greater than 10, the every() method returns true.

Conclusion

In this article, we learned about the every() method. We learned about its syntax, how to use it, and when to use it. We also learned about a few examples of how to use it.

Array.reduce() Method

Muhammad Rizwan Ashiq — Fri, 16 Jun 2023 19:00:00 +0000

What is Reduce Method?

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Syntax

Here's the syntax for using reduce():

const reducedValue = arr.reduce(
    (accumulator, currentValue, currentIndex, array) => {
        // Return the new value of the accumulator
    },
    initialValue
);

The callback function is called for each element in the array and takes the following arguments:

accumulator: the accumulator accumulates the callback's return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied (see below).
currentValue: the current element being processed in the array.
currentIndex (optional): the index of the current element being processed in the array.
array (optional): the array reduce() was called upon.
initialValue (optional): a value to use as the first argument to the first call of the callback. If no initial value is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue. Calling reduce() on an empty array without an initial value will throw a TypeError.

The reduce() method calls the callback function once for each element present in the array, excluding holes in the array, and it persists the return value of the callback function. The first time the callback is called, the accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce(), then accumulator will be equal to initialValue and currentValue will be equal to the first value in the array. If no initialValue was provided, then accumulator will be equal to the first value in the array and currentValue will be equal to the second.

Here's an example of how to use reduce() to sum all the numbers in an array:

const numbers = [1, 2, 3];

const sum = numbers.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // prints 6

In the example above, the callback function is an anonymous function that takes two arguments, accumulator and currentValue, and returns the sum of the two values. The reduce() method calls this function for each element in the numbers array. The first time the callback is called, accumulator is equal to 0 and currentValue is equal to 1. The second time the callback is called, accumulator is equal to the return value of the first call to the callback, which is 1, and currentValue is equal to 2. The reduce() method continues calling the callback function until all the elements in the array have been processed. The return value of the reduce() method is equal to the return value of the last call to the callback function.

You can also use an arrow function as the callback function, like this:

const numbers = [1, 2, 3];

const sum = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0
);

console.log(sum); // prints 6

The reduce() method can also be used to flatten an array of arrays into a single array. Here's an example:

const flattened = [
    [0, 1],
    [2, 3],
    [4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

console.log(flattened); 
// prints [0, 1, 2, 3, 4, 5]

Examples

Count the students who passed

const students = [
    { name: "John", score: 6.4 },
    { name: "Maria", score: 8.2 },
    { name: "Peter", score: 9.8 },
    { name: "Ann", score: 9.2 },
];

const passed = students.reduce((acc, curr) => {
    if (curr.score >= 7) {
        acc++;
    }
    return acc;
}, 0);

console.log(passed); // prints 3

Grouping objects

const students = [
    { name: "John", score: 6.4 },
    { name: "Maria", score: 8.2 },
    { name: "Peter", score: 9.8 },
    { name: "Ann", score: 9.2 },
];

const groupByScore = students.reduce((acc, curr) => {
    const key = Math.floor(curr.score);
    if (!acc[key]) {
        acc[key] = [];
    }
    acc[key].push(curr);
    return acc;
}, {});

console.log(groupByScore);
// prints
// {
//   6: [
//     { name: 'John', score: 6.4 }
//   ],
//   8: [
//     { name: 'Maria', score: 8.2 }
//   ],
//   9: [
//     { name: 'Peter', score: 9.8 },
//     { name: 'Ann', score: 9.2 }
//   ]
// }

Reduce Right

The reduceRight() method works exactly like reduce(), except it applies the callback function from right to left.

Here's an example of how to use reduceRight() to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduceRight(function (accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // prints 55

Reduce vs. For Loop

The reduce() method is often used to replace a for loop. Here's an example of how to use a for loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum); // prints 55

Here's the same example using reduce():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0
);

console.log(sum); // prints 55

Reduce vs. For Each

The reduce() method is often used to replace a forEach() loop. Here's an example of how to use a forEach() loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = 0;

numbers.forEach(function (number) {
    sum += number;
});

console.log(sum); // prints 55

Here's the same example using reduce():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0
);

console.log(sum); // prints 55

Reduce vs. Map

The reduce() method is often used to replace a map() loop. Here's an example of how to use a map() loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubled = numbers.map(function (number) {
    return number * 2;
});

console.log(doubled); // prints [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

Here's the same example using reduce():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubled = numbers.reduce((accumulator, currentValue) => {
    accumulator.push(currentValue * 2);
    return accumulator;
}, []);

console.log(doubled); // prints [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

Reduce vs. Filter

The reduce() method is often used to replace a filter() loop. Here's an example of how to use a filter() loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter(function (number) {
    return number % 2 === 0;
});

console.log(evens); // prints [2, 4, 6, 8, 10]

Here's the same example using reduce():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.reduce((accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);

console.log(evens); // prints [2, 4, 6, 8, 10]

Reduce vs. Find

The reduce() method is often used to replace a find() loop. Here's an example of how to use a find() loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const found = numbers.find(function (number) {
    return number > 5;
});

console.log(found); // prints 6

Here's the same example using reduce():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const found = numbers.reduce((accumulator, currentValue) => {
    if (currentValue > 5) {
        accumulator = currentValue;
    }
    return accumulator;
}, 0);

console.log(found); // prints 6

When to use Reduce

Reduce is not a method that you will use every day, but it is a very useful method to know about. It is a great tool to have in your JavaScript toolbox. When you need to use it, you will be glad you know how to use it.

To honestly, I don't use it very often. I prefer to use forEach() loops, map() loops, filter() loops, and find() loops. I only use reduce() when I need to flatten an array of arrays into a single array, or when I need to sum all the numbers in an array.

If you want to learn more about the reduce() method, check out the MDN documentation.

Conclusion

The reduce() method is a powerful tool for working with arrays. It can be used to sum all the numbers in an array, flatten an array of arrays into a single array, and much more. It can also be used to replace for loops, forEach() loops, map() loops, filter() loops, and find() loops. The reduce() method is a great tool to have in your JavaScript toolbox. I hope this article has helped you understand how to use the reduce() method.

Array.find() Method

Muhammad Rizwan Ashiq — Thu, 15 Jun 2023 19:00:00 +0000

What is Find Method?

The find() method returns first element in the array that satisfies the provided condition. Otherwise, undefined is returned. It does not modify the original array.

Syntax

Here's the syntax for using find():

const findFirst = arr.find((element, index, array) => {
    // Return true to return the element, false otherwise
});

The callback function is called for each element in the array and takes the following arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that find() is being applied to

The find() method calls the callback function once for each element in the array, in order, until it finds an element that returns true. If it finds such an element, it returns the value of that element and does not call the callback function for any of the remaining elements. If it does not find an element that returns true, it returns undefined.

Here's an example of how to use find() to find the first even number in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstEven = numbers.find(function (number) {
    return number % 2 === 0;
});

console.log(firstEven); // prints 2

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns true if number is even, and false otherwise. The find() method calls this function for each element in the numbers array and returns the first element that returns true

You can also use an arrow function as the callback function, like this:

const firstEven = numbers.find((number) => number % 2 === 0);

console.log(firstEven); // prints 2

The find() method is useful for finding a single element in an array that satisfies a certain condition.

Examples

Here are a few more examples of how you can use find():

Find the first element that is greater than 10

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const firstGreaterThan10 = numbers.find((number) => number > 10);

console.log(firstGreaterThan10); // prints 11

Find the first element that is a string

const mixedArray = [1, 2, 3, "a", "b", "c", 4, 5, 6];

const firstString = mixedArray.find((element) => typeof element === "string");

console.log(firstString); // prints 'a'

Find the first element that is an object

const mixedArray = [1, 2, 3, "a", "b", "c", 4, 5, 6, { name: "John" }];

const firstObject = mixedArray.find((element) => typeof element === "object");

console.log(firstObject); // prints { name: 'John' }

Implement the login functionality

Here is an example of how you might use the find() method to implement a login function for an e-commerce website.

Imagine that you have an array of users, and each user is represented by an object with the following properties:

id: the unique ID of the user
name: the name of the user
email: the email address of the user
password: the password of the user

You can use the find() method to find the user with the given email address and password, and return the user object if the login is successful, or undefined if the login is unsuccessful.

Here's the code that does this:

let users = [
    { id: 1, name: "Alice", email: "alice@example.com", password: "password1" },
    { id: 2, name: "Bob", email: "bob@example.com", password: "password2" },
    {
        id: 3,
        name: "Charlie",
        email: "charlie@example.com",
        password: "password3",
    },
];

function login(email, password) {
    const user = users.find(
        (user) => user.email === email && user.password === password
    );

    if (user) {
        console.log(`Welcome, ${user.name}!`);
        return user;
    } else {
        console.log("Incorrect email or password");
        return undefined;
    }
}

const loggedInUser = login("alice@example.com", "password1");
// prints 'Welcome, Alice!' and returns the user object

const loggedInUser = login("abc@gmail.com", "password1");
// prints 'Incorrect email or password' and returns undefined

Find product by id

Imagine that you have an array of products, and each product is represented by an object with the following properties:

id: the unique ID of the product
name: the name of the product
price: the price of the product
categories: an array of categories that the product belongs to

You can use the find() method to find a product by its ID, and return the product object if it is found, or undefined if it is not found.

Here's the code that does this:

let products = [
    {
        id: 1,
        name: "Product 1",
        price: 10,
        categories: ["Category 1", "Category 2"],
    },
    {
        id: 2,
        name: "Product 2",
        price: 15,
        categories: ["Category 2", "Category 3"],
    },
    {
        id: 3,
        name: "Product 3",
        price: 20,
        categories: ["Category 1", "Category 3"],
    },
];

function getProductById(id) {
    const product = products.find((product) => product.id === id);

    if (product) {
        console.log(`Product found: ${product.name}`);
        return product;
    } else {
        console.log("Product not found");
        return undefined;
    }
}

let product = getProductById(2);
// prints 'Product found: Product 2' and returns the product object

product = getProductById(4);
// prints 'Product not found' and returns undefined

In the example above, the callback function is an anonymous function that takes a single argument, product, and returns true if product.id is equal to the given id, and false otherwise. The find() method calls this function for each element in the products array and returns the first element that returns true. If no element returns true, it returns undefined.

`findIndex()`

The findIndex() method is similar to the find() method, except that it returns the index of the element that satisfies the condition, instead of the element itself.

Here's an example of how to use findIndex() to find the index of the first even number in an array:

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

const firstEvenIndex = numbers.findIndex((number) => number % 2 === 0);

console.log(firstEvenIndex); // prints 1

const firstOddIndex = numbers.findIndex((number) => number % 2 === 1);

console.log(firstOddIndex); // prints -1

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns true if number is even, and false otherwise. The findIndex() method calls this function for each element in the numbers array and returns the index of the first element that returns true. If no element returns true, it returns -1.

When to use `find()`

The find() method is useful when you want to find a single element in an array that satisfies a certain condition. For example, you can use it to find the first element that is greater than 10, or the first element that is a string, or the first element that is an object.

Conclusion

In this article, you learned about the find() and findIndex() methods, which are used to find a single element in an array that satisfies a certain condition. You also learned how to use these methods to implement the login functionality for an e-commerce website, and to find a product by its ID.

Array.filter() Method

Muhammad Rizwan Ashiq — Thu, 15 Jun 2023 09:18:36 +0000

What is Filter Method?

The filter() method is used to filter the elements of an array based on a condition. It returns a new array containing all elements that pass the test implemented by the provided function. The filter() method does not change the original array.

Syntax

Here's the syntax for using filter():

const filteredArray = arr.filter((element, index, array) => {
    // Return true to keep the element, false otherwise
});

The callback function is called for each element in the array and takes the following arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that filter() is being applied to

The filter() method calls the callback function once for each element in the array, in order, and constructs a new array from the elements for which the callback function returns true. The length of the new array will be equal to or less than the length of the original array, depending on the elements that pass the test.

Here's an example of how to use filter() to get all the even numbers from an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function (number) {
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns true if number is even, and false otherwise. The filter() method calls this function for each element in the numbers array and creates a new array with the elements that return true.

You can also use an arrow function as the callback function, like this:

let evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]

The filter() method is useful for creating a new array from a subset of the elements in an array, based on a certain condition.

Examples

Here are a few more examples of how you can use filter():

Getting the products with a price greater than 10

const products = [
    { id: 1, name: "Product 1", price: 10 },
    { id: 2, name: "Product 2", price: 15 },
    { id: 3, name: "Product 3", price: 20 },
];

const expensiveProducts = products.filter((product) => product.price > 10);

console.log(expensiveProducts); 
// prints [{ id: 2, name: 'Product 2', price: 15 }, { id: 3, name: 'Product 3', price: 20 }]

Getting the users which live in a particular city

const users = [
    { id: 1, name: "John", city: "Islamabad" },
    { id: 2, name: "Jane", city: "Lahore" },
    { id: 3, name: "Jack", city: "Karachi" },
    { id: 4, name: "Jill", city: "Rahim Yar Khan" },
    { id: 5, name: "Joe", city: "Islamabad" },
    { id: 6, name: "Jen", city: "Lahore" },
];

const usersInIslamabad = users.filter((user) => user.city === "Islamabad");
console.log(usersInIslamabad);
// prints [{ id: 1, name: 'John', city: 'Islamabad' }, { id: 5, name: 'Joe', city: 'Islamabad' }]

const usersInLahore = users.filter((user) => user.city === "Lahore");
console.log(usersInLahore);
// prints [{ id: 2, name: 'Jane', city: 'Lahore' }, { id: 6, name: 'Jen', city: 'Lahore' }]

const usersInKarachiOrRahimYarKhan = users.filter(
    (user) => user.city === "Karachi" || user.city === "Rahim Yar Khan"
);
console.log(usersInKarachiOrRahimYarKhan);
// prints [{ id: 3, name: 'Jack', city: 'Karachi' }, { id: 4, name: 'Jill', city: 'Rahim Yar Khan' }]

const usersInKarachiAndRahimYarKhan = users.filter(
    (user) => user.city === "Karachi" && user.city === "Rahim Yar Khan"
);
console.log(usersInKarachiAndRahimYarKhan);
// prints []

Getting the users which are not admins

const users = [
    { id: 1, name: "John", isAdmin: true },
    { id: 2, name: "Jane", isAdmin: false },
    { id: 3, name: "Jack", isAdmin: false },
    { id: 4, name: "Jill", isAdmin: true },
    { id: 5, name: "Joe", isAdmin: false },
    { id: 6, name: "Jen", isAdmin: true },
];

const nonAdminUsers = users.filter((user) => !user.isAdmin);
console.log(nonAdminUsers);
// prints [{ id: 2, name: 'Jane', isAdmin: false }, { id: 3, name: 'Jack', isAdmin: false }, { id: 5, name: 'Joe', isAdmin: false }]

Getting the users which are not admins and live in a particular city

const users = [
    { id: 1, name: "John", city: "Islamabad", isAdmin: true },
    { id: 2, name: "Jane", city: "Lahore", isAdmin: false },
    { id: 3, name: "Jack", city: "Karachi", isAdmin: false },
    { id: 4, name: "Jill", city: "Rahim Yar Khan", isAdmin: true },
    { id: 5, name: "Joe", city: "Islamabad", isAdmin: false },
    { id: 6, name: "Jen", city: "Lahore", isAdmin: true },
];

const nonAdminUsersInIslamabad = users.filter(
    (user) => !user.isAdmin && user.city === "Islamabad"
);
console.log(nonAdminUsersInIslamabad);
// prints [{ id: 5, name: 'Joe', city: 'Islamabad', isAdmin: false }]

Get the list of products which belong to a particular category

const products = [
    { id: 1, name: "Phone", category: "Electronics" },
    { id: 2, name: "Laptop", category: "Electronics" },
    { id: 3, name: "Shirt", category: "Clothing" },
    { id: 4, name: "Pants", category: "Clothing" },
    { id: 5, name: "Socks", category: "Clothing" },
    { id: 6, name: "Watch", category: "Accessories" },
    { id: 7, name: "Tie", category: "Accessories" },
    { id: 8, name: "Belt", category: "Accessories" },
];

const electronicsProducts = products.filter(
    (product) => product.category === "Electronics"
);
console.log(electronicsProducts);

const clothingProducts = products.filter(
    (product) => product.category === "Clothing"
);
console.log(clothingProducts);

const accessoriesProducts = products.filter(
    (product) => product.category === "Accessories"
);
console.log(accessoriesProducts);

`filter()` vs `map()`

The filter() method is similar to the map() method. Both methods create a new array from an existing array. The difference is that the filter() method returns a new array that contains only the elements that pass a certain condition, while the map() method returns a new array with the results of calling a callback function on every element in the original array. Here's an example:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((number) => number % 2 === 0);

const evenNumbersSquared = evenNumbers.map((number) => number * number);

console.log(evenNumbersSquared); 
// prints [4, 16, 36, 64, 100]

In the example above, we first use the filter() method to create a new array with only the even numbers. Then we use the map() method to create a new array with the squares of the even numbers.

`filter()` vs `forEach()`

The filter() method is similar to the forEach() method. Both methods iterate over an array and call a callback function on each element in the array. The difference is that the filter() method returns a new array that contains only the elements that pass a certain condition, while the forEach() method does not return anything. Here's an example:

In forEach():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = [];

numbers.forEach((number) => {
    if (number % 2 === 0) {
        evenNumbers.push(number);
    }
});

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]

In the example above, we first create an empty array called evenNumbers. Then we use the forEach() method to iterate over the numbers array and push the even numbers into the evenNumbers array.

In filter():

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); 
// prints [2, 4, 6, 8, 10]

In the example above, we use the filter() method to create a new array with only the even numbers.

When to use `filter()`

The filter() method is useful when you want to create a new array that contains only the elements that pass a certain condition. It's also useful when you want to remove elements from an array that don't pass a certain condition. Here are some examples:

Like Getting the users which are not admins

const users = [
    { id: 1, name: "John", isAdmin: true },
    { id: 2, name: "Jane", isAdmin: false },
    { id: 3, name: "Jack", isAdmin: false },
    { id: 4, name: "Jill", isAdmin: true },
    { id: 5, name: "Joe", isAdmin: false },
    { id: 6, name: "Jen", isAdmin: true },
];

const nonAdminUsers = users.filter((user) => !user.isAdmin);

console.log(nonAdminUsers);

// prints [{ id: 2, name: 'Jane', isAdmin: false }, { id: 3, name: 'Jack', isAdmin: false }, { id: 5, name: 'Joe', isAdmin: false }]

Conclusion

In this article, we learned about the filter() method. We learned how to use the filter() method to create a new array with only the elements that pass a certain condition.

We also learned about the filter() method's similarities and differences with the map() and forEach() methods.

Array.map() Method

Muhammad Rizwan Ashiq — Thu, 15 Jun 2023 09:10:24 +0000

What is Map Function?

In JavaScript, the map() method is a function that creates a new array with the results of calling a provided function on every element in the calling array.

Syntax

Here's the syntax for using map():

const newArray = array.map(function (element, index, array) {
    // return element for newArray
});

The map() function takes a callback function as an argument, which is applied to each element of the array. The callback function takes three arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that map() is being applied to

The map() function returns a new array with the same length as the original array, but with each element transformed by the callback function.

Here's an example of using map() to double the value of each element in an array:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
    return number * 2;
});

console.log(doubledNumbers); // prints [2, 4, 6, 8, 10]

In the example above, the callback function is an anonymous function that takes a single argument, number, and returns its value multiplied by 2. The map() method calls this function for each element in the numbers array and creates a new array with the returned values.

You can also use an arrow function as the callback function, like this:

const doubledNumbers = numbers.map((number) => number * 2);

The map() method is useful for transforming an array into a new array of a different shape or structure. It is similar to the forEach() method, but it returns a new array, whereas forEach() does not return a new array.

Examples

Here are a few more examples of how you can use map():

Example 1: Transforming an array of strings to Uppercase

const names = ["Alice", "Bob", "Charlie"];

const upperCaseNames = names.map((name) => name.toUpperCase());

console.log(upperCaseNames); 
// prints ['ALICE', 'BOB', 'CHARLIE']

Example 2: Transforming an array of numbers to its square

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

const squareNumbers = numbers.map((number) => number * number);

console.log(squareNumbers); 
// prints [1, 4, 9, 16, 25]

Example 3: Extracting the values of an object

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
];

const names = users.map((user) => user.name);

console.log(names); 
// prints ['Alice', 'Bob', 'Charlie']

Example 4: Transforming an array of objects

const users = [
    { id: 1, firstName: "Alice", lastName: "Wonderland" },
    { id: 2, firstName: "Bob", lastName: "Marley" },
    { id: 3, firstName: "Charlie", lastName: "Brown" },
];

const newUsers = users.map((user) => ({
    id: user.id,
    fullName: user.name + " " + user.lastName,
}));

console.log(newUsers);

// prints [{ id: 1, fullName: 'Alice Wonderland' }, { id: 2, fullName: 'Bob Marley' }, { id: 3, fullName: 'Charlie Brown' }]

Note: We can also use Object Destructuring to make the code more readable. Here's how:

const newUsers = users.map(({ id, firstName, lastName }) => ({
    id,
    fullName: `${firstName} ${lastName}`,
}));

Example 5: Transforming an array of objects

Here is an example of how you might use the map() method in the context of an e-commerce website.

Imagine that you have an array of products, and each product is represented by an object with the following properties:

id: the unique ID of the product
name: the name of the product
price: the price of the product

You can use the map() method to create a new array that contains the names and prices of all the products.

Here's the code that does this:

const products = [
    { id: 1, name: "Product 1", price: 10 },
    { id: 2, name: "Product 2", price: 15 },
    { id: 3, name: "Product 3", price: 20 },
];

const namesAndPrices = products.map((product) => {
    return {
        name: product.name,
        price: product.price,
    };
});

// or

const anotherWay = products.map(({ name, price }) => ({ name, price }));

console.log(namesAndPrices);

// prints [{ name: 'Product 1', price: 10 }, { name: 'Product 2', price: 15 }, { name: 'Product 3', price: 20 }]

`map()` vs `forEach()`

The map() method is similar to the forEach() method, but there are a few key differences:

The map() method returns a new array, whereas forEach() does not return a new array.
The map() method can be used to transform an array into a new array of a different shape or structure, whereas forEach() can only be used to iterate over the elements of an array.
The map() method is chainable, whereas forEach() is not.

Chainable Methods

A chainable method is a method that can be called on an object and returns the object itself. This allows us to chain multiple methods together.

For example, the map() method is chainable, so we can call it on an array and then call another method on the returned array. Here's an example:

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

const doubledNumbers = numbers
    .map((number) => number * 2)
    .filter((number) => number > 5);

console.log(doubledNumbers); // prints [6, 8, 10]

Note: We're going to learn more about array.filter() in coming doc. For now just remember it is used to filter the data from the array based on condition

In the example above, we first call the map() method on the numbers array to create a new array with the doubled values. Then we call the filter() method on the returned array to create a new array with only the values that are greater than 5.

The forEach() method is not chainable, so we can't call another method on the returned value. Here's an example:

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

const doubledNumbers = numbers
    .forEach((number) => number * 2)
    .filter((number) => number > 5);
// This will error
// TypeError: numbers.forEach(...).filter is not a function

In the example above, we first call the forEach() method on the numbers array to create a new array with the doubled values. Then we try to call the filter() method on the returned array to create a new array with only the values that are greater than 5. But this will error because the forEach() method does not return a new array, so we can't call another method on the returned value.

Conclusion

In this article, we learned about the map() method in JavaScript. We learned about the syntax for using map(), how to use it to transform an array, and how to use it to extract the values of an object.

Array.forEach() Method

Muhammad Rizwan Ashiq — Tue, 13 Jun 2023 15:30:51 +0000

What is ForEach Function?

The forEach() method is a method that is used to iterate over the elements of an array. It takes a callback function as an argument, and the callback function is called for each element in the array.

Syntax

Here's the syntax for using forEach():

arr.forEach((element, index, array) => {
    // Do something with element
});

The callback function is invoked with three arguments:

element: the current element being processed in the array
index (optional): the index of the current element
array (optional): the array that forEach() is being called on

The callback function is executed for each element in the array, in ascending order.

Here's an example of how to use forEach() to print all the elements of an array to the console:

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

numbers.forEach(function (number) {
    console.log(number);
});

// Output:
// 1
// 2
// 3
// 4
// 5

I prefer arrow functions in array functions because of cleaner syntax

array.forEach(item => {}) instead of array.forEach(function (item) {})

Both are OK, it's totally upto you what you prefer

You can also use an arrow function as the callback, like this:

numbers.forEach((number) => console.log(number));

In the examples above, the callback function logs each element of the numbers array to the console. The callback function takes a single argument, which is the current element being processed.

You can also pass the index of the current element and the array itself as arguments to the callback function. Here's an example that prints both the element and its index:

numbers.forEach(function (number, index, array) {
    console.log(index + ": " + number);
});

// Output:
// 0: 1
// 1: 2
// 2: 3
// 3: 4
// 4: 5

The forEach() function does not return a value. It simply executes the callback function for each element in the array.

ForEach vs For Loop

The forEach() method is similar to the for loop. The main difference is that the for loop can be used to iterate over any type of collection, not just arrays. The forEach() method is only used to iterate over arrays.

Here's an example of how to use a for loop to iterate over an array:

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

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// Output:
// 1
// 2
// 3
// 4
// 5

Here's an example of how to use forEach() to iterate over an array:

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

numbers.forEach((number) => console.log(number));

// Output:
// 1
// 2
// 3
// 4
// 5

When to use `forEach()`?

The forEach() method is useful when you want to iterate over an array and perform some action on each element. It's a cleaner way to write a for loop.

Example

Here is an example of how you might use the forEach() function in the context of an e-commerce website.

Imagine that you have an array of products, and each product is represented by an object with the following properties:

id: the unique ID of the product
name: the name of the product
price: the price of the product
quantity: the number of units in stock

You can use the forEach() function to iterate over the array of products and perform some action on each product.

Example 1: Displaying total price of all products

You might want to calculate the total value of all the products in stock. You can do this by using the forEach() function to sum the price of each product multiplied by its quantity.

Here's the code that does this:

const products = [
    { id: 1, name: "Product 1", price: 10, quantity: 5 },
    { id: 2, name: "Product 2", price: 15, quantity: 2 },
    { id: 3, name: "Product 3", price: 20, quantity: 3 },
];

let totalValue = 0;

products.forEach((product) => {
    totalValue += product.price * product.quantity;
});

console.log(totalValue); // prints 105 (10 * 5 + 15 * 2 + 20 * 3)

Example 2: Apply 10% discount to all products having quantity > 3.

Here's the code that does this:

products.forEach((product) => {
    if (product.quantity > 3) {
        product.price *= 0.9; // apply 10% discount
    }
});

Now the products array will contain the modified objects.

[
    { id: 1, name: "Product 1", price: 10, quantity: 5 },
    { id: 2, name: "Product 2", price: 15, quantity: 2 },
    { id: 3, name: "Product 3", price: 18, quantity: 3 },
];

Example 3: Removing an object from the array

We can also use the forEach() function to remove elements from an array. For example, you might want to remove all the products that have a quantity of 0.

Here's the code that does this:

products.forEach((product, index, array) => {
    if (product.quantity === 0) {
        array.splice(index, 1);
    }
});

Now the products array will contain the modified objects.

[
    { id: 1, name: "Product 1", price: 10, quantity: 5 },
    { id: 2, name: "Product 2", price: 15, quantity: 2 },
    { id: 3, name: "Product 3", price: 18, quantity: 3 },
];

All done! 🎉 Quick recap:

The forEach() function is useful for iterating over an array and performing some action on each element. It is similar to the for loop, but it is more concise and easier to read.

forEach() is not supported by Internet Explorer (which most of the user doesn't use anymore). If you need to support older browsers, you can use a for loop or the forEach() function from a polyfill library like Array.prototype.forEach.

What is Array

Muhammad Rizwan Ashiq — Tue, 13 Jun 2023 15:28:34 +0000

What is Array?

Array is a type of object that represents an ordered list of values. Each value in an array is called an element, and the elements are separated by commas (,), and enclosed in square brackets ([]). Here's an example of an array of numbers:

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

You can also create an array of strings:

const words = ["apple", "banana", "mango"];

Or an array of mixed data types:

const values = [true, "hello", 42, null];

You can also create an array of arrays:

const values = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];

Accessing Array Elements

You can access the elements of an array using the [] operator and the index of the element you want to access. The index of the first element is 0, and the index of the last element is array.length - 1,

Note: array.length is the number of elements in the array.

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

console.log(numbers[0]); // 1
console.log(numbers[1]); // 2
console.log(numbers[2]); // 3
console.log(numbers[3]); // 4
console.log(numbers[numbers.length - 1]); // 5

Iterating Over Array Elements using loops

Can iterate over the elements of an array using the for loop.

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

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

It will print the following output:

You can also use the for...of loop to iterate over the elements of an array.

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

for (const number of numbers) {
    console.log(number);
}

It will print the following output:

Array Methods

There are many functions that you can use to manipulate arrays in JavaScript. Some of the most common ones are:

`push()`

Adds one or more elements to the end of an array and returns the new length of the array.

const numbers = [1, 2, 3];
numbers.push(4); 
// the array is now [1, 2, 3, 4]
numbers.push(5, 6); 
// the array is now [1, 2, 3, 4, 5, 6]

Check the following code:

const numbers = [1, 2, 3];

numbers[6] = 7;

console.log(numbers.length); // 7
console.log(numbers); // [1, 2, 3, , , , 7]

The length of the array is 7, but the array has only 4 elements.

`pop()`

Removes, and returns the last element from an array. If the array is empty, it returns undefined.

const numbers = [1, 2, 3, 4, 5];
const last = numbers.pop(); 
// the array is now [1, 2, 3, 4] and last is 5

`shift()`

Removes the first element from an array and returns that element. If the array is empty, it returns undefined.

const numbers = [1, 2, 3, 4, 5];
const first = numbers.shift(); 
// the array is now [2, 3, 4, 5] and first is 1

`unshift()`

Adds one or more elements to the beginning of an array and returns the new length of the array.

const numbers = [4, 5];
numbers.unshift(3); 
// the array is now [3, 4, 5]
numbers.unshift(1, 2); 
// the array is now [1, 2, 3, 4, 5]

`slice()`

Extracts a section of an array and returns a new array. You can specify the starting index and the ending index (not inclusive) of the section you want to extract.

const numbers = [1, 2, 3, 4, 5];
const middle = numbers.slice(1, 4); 
// middle is [2, 3, 4]

`splice()`

Can be used to remove or replace elements from an array. It takes at least two arguments: the starting index and the number of elements to remove.

const numbers = [1, 2, 3, 4, 5];
const removed = numbers.splice(1, 2); 
// numbers is now [1, 4, 5] and removed is [2, 3]

`sort()`

Sorts the elements of an array in place and returns the sorted array.

const numbers = [5, 2, 4, 1, 3];
numbers.sort(); 
// the array is now [1, 2, 3, 4, 5]

By default, the sort() method sorts ascendingly, but you can also sort descendingly by passing a function to the sort() method.

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

numbers.sort(a => -a); 
// the array is now [5, 4, 3, 2, 1]

Here's how the sort() method works:

The sort() method compares the first element with the second element (like here: a with b).
If you want to sort ascendingly, the sort() then checks if a is greater than b using a - b.
1. If a is greater than b, it returns a positive number.
2. If a is less than b, it returns a negative number.
3. If a is equal to b, it returns 0.
If it returns:
1. A positive number, the sort() method will swap the two elements.
2. A negative number, or zero, the sort() method will not swap the two elements.
The sort() method will then compare the second element with the third element, and so on, and will repeat this process until the array is sorted.
If you want to sort descendingly, then you will need to return b - a instead of a - b.
If you want to sort strings, you can use a.localeCompare(b) instead of a - b, like this:

   const names = ["John", "Mary", "Bob"];
   names.sort((a, b) => a.localeCompare(b)); 
   // the array is now ["Bob", "John", "Mary"]

If you want to sort objects, you can use a.property - b.property instead of a - b, like this:

   const people = [
     { name: "John", age: 20 },
     { name: "Mary", age: 30 },
     { name: "Bob", age: 25 },
   ];
   people.sort((a, b) => a.age - b.age); 
   // the array is now sorted by age

`reverse()`

Reverses the order of the elements in an array in place and returns the reversed array.

const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); 
// the array is now [5, 4, 3, 2, 1]

`concat()`

Creates a new array by merging (concatenating) existing arrays.

const numbers = [1, 2, 3];
const letters = ["a", "b", "c"];
const numbersAndLetters = numbers.concat(letters); 
// numbersAndLetters is [1, 2, 3, "a", "b", "c"]

`join()`

Creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.

const numbers = [1, 2, 3];
const numbersString = numbers.join(); 
// numbersString is "1,2,3"
const numbersStringWithSpaces = numbers.join(" "); 
// numbersStringWithSpaces is "1 2 3"

`indexOf()`

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

const numbers = [1, 2, 3, 4, 5];
numbers.indexOf(3); // returns 2
numbers.indexOf(10); // returns -1

`lastIndexOf()`

Returns the last index at which a given element can be found in the array, or -1 if it is not present.

const numbers = [1, 2, 3, 4, 5, 3];
numbers.lastIndexOf(3); // returns 5
numbers.lastIndexOf(10); // returns -1

`includes()`

Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const numbers = [1, 2, 3, 4, 5];
numbers.includes(3); // returns true
numbers.includes(10); // returns false

There are many other useful functions as well like foreach(), map(), filter(), find(), etc. I will explain them in detail in the next chapters.

Conclusion

In this chapter, we learned about arrays and how to use them. We learned about the different ways to create an array, how to access elements in an array, how to add and remove elements from an array, and how to use some of the most useful array methods.

Object Manipulation

Muhammad Rizwan Ashiq — Tue, 13 Jun 2023 03:27:33 +0000

What is Object?

An object is a collection of properties, and a property is an association between a key and a value. A property's value can be a number, string, boolean, null, undefined, object, or function. A property's key can be any string, including an empty string.

We can create an object, assign it to a variable, add properties to it, and delete properties from it, and we can also access the values of the properties using the dot notation or the bracket notation. Consider the following example:



const obj = {
    name: "Rizwan",
    dobYear: 1996,
    isDeveloper: true,
    hobbies: ["Coding", "Gaming", "Reading"],
    age: function () {
        return 2023 - this.dobYear;
    },
    address: {
        city: "Karachi",
        country: "Pakistan",
    },
};

console.log(obj.name); // Rizwan
console.log(obj.dobYear); // 1996
console.log(obj.isDeveloper); // true
console.log(obj.hobbies); // ["Coding", "Gaming", "Reading"]
console.log(obj.age); // 27
console.log(obj.address); // { city: 'Karachi', country: 'Pakistan' }

delete obj.isDeveloper; // delete property from object

console.log(obj.isDeveloper); // undefined

// add new property to object

obj.stacks = ["JavaScript", "React", "Node"];

// update property value

obj.name = "Rizwan Ashiq";

// Can also use bracket notation to access properties

console.log(obj["name"]); // Rizwan Ashiq
console.log(obj["dobYear"]); // 1996
console.log(obj["hobbies"]); // ["Coding", "Gaming", "Reading"]

Setting properties of `undefined`

Consider the following example:



const obj = {
    name: "Rizwan",
};

// This will error
obj.address.city = "Karachi"; // Cannot set properties of undefined (setting 'city')

In the above example, we are trying to access (update) the city property of the address property of the obj object. But the address property is not defined in the obj object. So, we will get an error. To avoid this error, we can use the && operator, or optional chaining ? to check if the address property is defined or not.



const obj = {
    name: "Rizwan",
}

// And operator
obj.address && (obj.address.city = "Karachi");
// It will not throw an error, but it will simply not move forward after the && operator.

// Optional chaining
obj.address?.city = "Karachi";
// Same as above, if the address property is not defined, it will not go forward.

Even if the address property is not defined, the above code will not throw an error, but it will not create the address property either. To create the address property, we can use the ternary operator.



const obj = {
    name: "Rizwan",
};

// Ternary operator
obj.address
    ? (obj.address.city = "Karachi")
    : (obj.address = { city: "Karachi" });

`for..in` loop

The for..in loop iterates over the enumerable properties of an object, in an arbitrary order. For each distinct property, statements can be executed.



const obj = {
    name: "Rizwan",
    dobYear: 1996,
    isDeveloper: true,
    hobbies: ["Coding", "Gaming", "Reading"],
    age: function () {
        return 2023 - this.dobYear;
    },
    address: {
        city: "Karachi",
        country: "Pakistan",
    },
};


for (let key in obj) {
    console.log(key); // name, dobYear, isDeveloper, hobbies, age, address
    console.log(obj[key]); 
    // Rizwan, 1996, true, ["Coding", "Gaming", "Reading"], 27, { city: 'Karachi', country: 'Pakistan' }
}

It's good tool to iterate over the object properties.

What is enumerable property?

It's a lot more boring than something that should be visualized 😒. And you won't be dealing with this. It's just for information.

An enumerable property is one that can be included in and visited during for..in loops (or a similar iteration of properties, like Object.keys()). By default, all properties of an object are enumerable, unless you set the enumerable attribute to false.



const person = { age: 18 };
Object.defineProperty(person, "name", { value: "Joshua", enumerable: false });

person.name; // 'Joshua'
for (prop in person) {
    console.log(prop);
} // 'age'
Object.keys(person); // ['age']
Object.getOwnPropertyNames(person); // ['age', 'name'] (non-enumerable properties are included)

Object Methods

In JavaScript, there are many methods that we can use to manipulate objects. Here are some of them:

Object.keys()
Object.values()
Object.entries()
Object.fromEntries()
Object.assign()
Object.seal()
Object.freeze()
Object.preventExtensions()
Object.isSealed()
Object.isFrozen()
Object.isExtensible()
Object.is()

`Object.keys()`

Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

console.log(Object.keys(obj)); // [ 'name', 'age', 'city' ]

By using Object.keys() we can get all the keys of an object and then we can use forEach loop to iterate over the keys and get the values of the object.



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

Object.keys(obj).forEach((key) => {
    console.log(obj[key]); // Rizwan, 25, Rahim Yar Khan
});

By using Object.keys() we can also get the length of an object.



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

console.log(Object.keys(obj).length); // 3

You can also use Object.keys() to check if an object is empty or not.



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

if (Object.keys(obj).length === 0) {
    console.log("Object is empty");
} else {
    console.log("Object is not empty");
}

I would recommend you to play with Object.keys() and you will find many more use cases of it 😊

`Object.values()`

Returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

console.log(Object.values(obj)); // [ 'Rizwan', 25, 'Rahim Yar Khan' ]

`Object.entries()`

Returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. The order of the array returned by Object.entries() does not depend on how an object is defined. If there is a need for certain ordering, then the array should be sorted first like Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.



const obj = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

console.log(Object.entries(obj)); // [ [ 'name', 'Rizwan' ], [ 'age', 25 ], [ 'city', 'Rahim Yar Khan' ] ]

`Object.fromEntries()`

The Object.fromEntries() method transforms a list of key-value pairs into an object.



const arr = [
    ["name", "Rizwan"],
    ["age", 25],
    ["city", "Rahim Yar Khan"],
];

console.log(Object.fromEntries(arr)); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan' }

`Object.assign()`

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.



const obj1 = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

const obj2 = {
    country: "Pakistan",
};

const obj3 = Object.assign(obj1, obj2);

console.log(obj3); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan', country: 'Pakistan' }

Shallow copy can also do the same thing as Object.assign().



const obj1 = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
};

const obj2 = {
    country: "Pakistan",
};

const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan', country: 'Pakistan' }

Object.assign() is better cause in shallow copy the problem is, if we have a nested object in the source object, then it will only copy the reference of that nested object. So if we change the nested object in the source object, then it will also change in the target object.



const obj1 = {
    name: "Rizwan",
    age: 25,
    city: "Rahim Yar Khan",
    address: {
        street: "Main Road",
        house: 123,
    },
};

const obj2 = {
    country: "Pakistan",
};

const obj3 = { ...obj1, ...obj2 }; // shallow copy

obj3.address.house = 456; // change house number in obj3, it will also change in obj1

console.log(obj1); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan', address: { street: 'Main Road', house: 456 } }
console.log(obj3); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan', address: { street: 'Main Road', house: 456 }, country: 'Pakistan' }

:::

`Object.seal()`

The Object.seal() method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.seal(obj);

obj.country = "Pakistan"; // It will not add country property to obj, and it will not throw any error

obj.name = "Rizwan Khan"; // It will change the value of name property

delete obj.city; // It will not delete city property from obj, and it will not throw any error

console.log(obj); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan' }

`Object.freeze()`

The Object.freeze() method freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object is made effectively immutable. The method returns the object being frozen.



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.freeze(obj);

obj.country = "Pakistan"; // It will not add country property to obj, and it will not throw any error

obj.name = "Ali"; // It will not change the name property, and it will not throw any error

delete obj.city; // It will not delete the city property, and it will not throw any error

console.log(obj); // { name: 'Rizwan', age: 25, city: 'Rahim Yar Khan' }

`Object.preventExtensions()`

The Object.preventExtensions() method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object).



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.preventExtensions(obj);

obj.country = "Pakistan"; // It will not add country property to obj, and it will not throw any error

obj.name = "Ali"; // It will change the name property

delete obj.city; // It will delete the city property

console.log(obj); // { name: 'Ali', age: 25 }

`Object.isSealed()`

The Object.isSealed() method determines if an object is sealed.



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.seal(obj);

console.log(Object.isSealed(obj)); // true

`Object.isFrozen()`

The Object.isFrozen() method determines if an object is frozen.



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.freeze(obj);

console.log(Object.isFrozen(obj)); // true

`Object.isExtensible()`

The Object.isExtensible() method determines if an object is extensible (whether it can have new properties added to it).



const obj = {

    name: "Rizwan",

    age: 25,

    city: "Rahim Yar Khan",

};

Object.preventExtensions(obj);

console.log(Object.isExtensible(obj)); // false

`Object.seal()` VS `Object.freeze()` VS `Object.preventExtensions()`

Difference between Object.seal(), Object.freeze() and Object.preventExtensions() is that Object.seal() and Object.freeze() make the object non-extensible, but Object.preventExtensions() doesn't make the object non-configurable and non-writable.

`Object.is()`

The Object.is() method determines whether two values are the same value.



console.log(Object.is(1, 1)); // true

console.log(Object.is(1, "1")); // false

console.log(Object.is(NaN, NaN)); // true

Operators

`in` operator

The in operator is used to check if an object has a specific property. It returns true if the object has the property, and it returns false if the object does not have the property.

Here is an example of how to use the in operator:



const person = { name: "Ali", age: 30 };

console.log("name" in person); // Output: true

console.log("age" in person); // Output: true

console.log("firstName" in person); // Output: false

console.log("lastName" in person); // Output: false

Summary

In this chapter, we learned about objects in JavaScript. We learned about the different ways to create objects in JavaScript. We also learned about the different ways to access the properties of an object. We learned about the different ways to add, update, and delete the properties of an object. We learned about the different ways to iterate over the properties of an object. We learned about the different ways to copy an object. We learned about the different methods to seal, freeze, and prevent extensions of an object. We learned about the Object.is() method. We learned about the different ways to check if an object is sealed, frozen, or extensible. We learned about the different ways to check if two values are the same value.

Method	Description
`Object.keys()`	Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.
`Object.values()`	Returns an array of a given object's own enumerable property values, in the same order as that provided by a `for...in` loop.
`Object.entries()`	Returns an array of a given object's own enumerable string-keyed property `[key, value]` pairs, in the same order as that provided by a `for...in` loop.
`Object.assign()`	Copies all enumerable own properties from one or more source objects to a target object. It returns the target object.
`Object.seal()`	Prevents new properties from being added to an object and marks all existing properties as non-configurable.
`Object.freeze()`	Prevents new properties from being added to an object, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed.
`Object.preventExtensions()`	Prevents new properties from ever being added to an object (i.e. prevents future extensions to the object).
`Object.isSealed()`	Determines if an object is sealed.
`Object.isFrozen()`	Determines if an object is frozen.
`Object.isExtensible()`	Determines if an object is extensible (whether it can have new properties added to it).
`Object.is()`	Determines whether two values are the same value.

DEV Community: Muhammad Rizwan Ashiq

Logic Making

Understand the problem

Plan your solution & Break down the problem

Identify the inputs and outputs

Pseudocode

What is pseudocode?

Write the code

Test and debug

What is debugging?

Optimize

What is optimization?

Conclusion

Async Await

What is Async Await

async

await

async/await vs promises

async/await

promises

Examples

HTTP requests with async/await

async/await with Promises

async/await with for loops

async/await with Promise.all() and Promise.settleAll() methods

Promise.allSettled

async/await in series

Conclusion

Promises

What is a Promise?

Create a Promise

How to use a Promise?

States of a Promise

Examples

Return a random number between 1 and 10

Fetching Data from an API using Promises

Promise Chaining

Promise.all()

Promise.allSettled()

Conclusion

Array.some() Method

What is Some Method?

Syntax

Examples

Checking if at least one number in an array is greater than 10

Checking if at least one word in an array is longer than 5 characters

Checking if at least one word in an array contains the letter "a"

Checking if at least one word in an array contains the letter "z" using a regular expression

Checking if at least one object in an array has a property called "name"

Checking if at least one object in an array has a property called "name" and the value of that property is "John"

Checking if student is passed in all subjects

some() vs find()

Conclusion

Array.every() Method

What is Every Method?

Syntax

Examples

Checking if all the numbers in an array are greater than 10

Checking if all the strings in an array are of a certain length

Checking if all the elements in an array are of a certain type

Checking if student is passed in all subjects

Checking if all the elements in an array are unique

When to use Every Method?

Conclusion

Array.reduce() Method

What is Reduce Method?

Syntax

Examples

Count the students who passed

Grouping objects

Reduce Right

Reduce vs. For Loop

Reduce vs. For Each

Reduce vs. Map

Reduce vs. Filter

Reduce vs. Find

When to use Reduce

Conclusion

Array.find() Method

What is Find Method?

`async`

`await`

`async`/`await` vs `promises`

`async`/`await`

HTTP requests with `async`/`await`

`async`/`await` with `Promises`

`async`/`await` with `for` loops

`async`/`await` with `Promise.all()` and `Promise.settleAll()` methods

`Promise.allSettled`

`async`/`await` in series

`Promise.all()`

`Promise.allSettled()`

`some()` vs `find()`

`findIndex()`

When to use `find()`

`filter()` vs `map()`

`filter()` vs `forEach()`

When to use `filter()`

`map()` vs `forEach()`

When to use `forEach()`?

`push()`

`pop()`

`shift()`

`unshift()`

`slice()`

`splice()`

`sort()`

`reverse()`

`concat()`

`join()`

`indexOf()`

`lastIndexOf()`

`includes()`

Setting properties of `undefined`

`for..in` loop