Vue 3 Lifecycle Overview

In Vue 3, the lifecycle of a component begins when it is created and ends when it is destroyed. The process involves various stages, each serving a specific purpose in managing the component’s behavior. Let’s delve into these stages to gain a comprehensive understanding.

Component Creation

The process starts with the render of a Vue component.

When a component is instantiated, the setup() function, a fundamental part of the Composition API, is called. This function is where you define and organize the component’s properties, methods, and other reactive data.

<script>
import { ref } from 'vue'

export default {
  setup() {
    "ref" is used to create a reactive variable
    const count = ref(0)

    // expose to template and other options API hooks
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

Vue 3 hooks lifecycle: setup

However if you are using Composition API with Single-File Components, <script setup> is strongly recommended for a more succinct and ergonomic syntax, and this is the syntax we will be following throughout this post.

<script setup>
  import { ref, onMounted } from 'vue'

  const count = ref(0)
  
  onMounted(() => {
    console.log(this.count) // 0
  })
</script>

Lifecycle Hooks

Vue introduces the concept of lifecycle hooks, which allows developers to execute code at different stages of a component’s lifecycle, these are specialized methods strategically positioned to run code at different points in a component’s journey.

They’re like checkpoints that let developers execute actions or set up logic at precise moments, such as when a component is born, attached to the DOM, updated, or bids farewell. These hooks offer a structured and effective approach to managing a component’s behavior throughout its lifecycle. They’re the tools developers use to seamlessly weave in functionality, ensuring their Vue components operate smoothly from creation to destruction.

Vue 3 Hook: onBeforeMount()

Let’s begin with our first hook, onBeforeMount(), this hook is called synchronously immediately after the instance has been created but before data observation and event/watcher setup. Useful for configurations that need to be in place before the component is fully initialized.

onBeforeMount(() => {
  // Logic to execute before the component is mounted
});

Common use cases for the onBeforeMount hook include:

• Initialization tasks that should be performed before the component becomes visible.
• Fetching initial data from an external source or API.
• Setting up event listeners or subscriptions.

Keep in mind that modifications to the component’s reactive state within the onBeforeMount hook will be reflected in the initial render. If you need to perform tasks after the component is mounted, you might want to use our next hook instead.

Initial render

The initial render process in Vue 3, facilitated by the setup syntax, represents a streamlined approach that combines various aspects of component definition. To provide some context for readers who may be less familiar with these terms, let’s briefly explore the key concepts involved: compilation, reactive state creation, virtual DOM, and automatic mounting.

Here’s how the initial render process works with the setup syntax:

1. Compilation and Render Function:
   • Vue compiles the template and automatically generates the render function based on the setup block.
2. Reactive State Creation:
   • Variables declared in the setup block, such as count, become reactive. This means changes to these variables trigger reactivity in the component.
3. Virtual DOM Creation:
   • The virtual DOM is automatically created based on the template and the reactive state.
4. Create and Insert DOM Nodes:
   • Vue automatically creates the necessary DOM nodes based on the virtual DOM, and inserts them into the actual DOM.
5. Automatic Mounting:
   • With the script setup syntax, you don’t need a separate mounted hook. Code after the setup block is automatically executed after the component is mounted.

Vue 3 Hook: onMounted()

After the initial render, the onMounted hook is called in Vue. This lifecycle hook is part of the Composition API, and its primary purpose is to execute logic or tasks after a component has been mounted into the DOM.

onMounted(() => {
  // Logic to execute when the component is mounted
});

The onMounted hook is particularly useful for tasks that require access to the DOM, as it ensures that the component has been fully rendered and inserted into the document.

Common use cases for the onMounted hook include:

• Initializing third-party libraries or plugins.
• Fetching initial data from an API.
• Setting up event listeners or subscriptions.

By placing your code tasks into the onMounted hook, you make sure they get done right when they should be in the component’s life. It’s like making sure you take out the trash before the garbage truck arrives—it keeps things neat and efficient in your Vue app.

After that, the component is finally mounted.

Vue 3 Hook: onBeforeUpdate

The onBeforeUpdate hook provides a moment in the component’s lifecycle just before changes are applied to the DOM. It is beneficial when you need to perform tasks or checks that should happen right before a component re-renders. This hook is particularly useful for scenarios where you want to clean up or prepare the component before an update.

onBeforeUpdate(() => {
  // Logic to execute before the component updates
});

Common use cases for the onBeforeUpdate hook include:

• Performing cleanup or teardown tasks before a re-render.
• Comparing the current state with the upcoming state for specific operations.
• Interacting with external services or APIs to synchronize data.

Keep in mind that whatever tweaks you make to the reactive state in the onBeforeUpdate hook won’t kick off an extra round of re-rendering.

In Vue 3, a “reactive state” refers to the ability of certain variables to automatically trigger updates in the user interface whenever their values change. The reactivity system in Vue ensures that the view is always in sync with the underlying data. When you declare a variable in the setup function using the Composition API, Vue makes it reactive, meaning any changes to that variable will be efficiently tracked, and the necessary updates will be applied to the DOM.

So if you’re looking to reactively respond to state changes, your go-to buddies would be the watch function or other reactive tools instead.

Vue 3 Hook: onUpdated

The onUpdated hook is called immediately after a component and its child components have been updated in the DOM. It’s useful when you need to execute logic that depends on the updated state of the component or when you want to perform actions after the component has re-rendered.

onUpdated(() => {
  // Logic to execute when the component is updated
});

Common use cases for the onUpdated hook include:

• Fetching Fresh Data: Imagine your component just got a facelift, and now you need some updated data to go with it. That’s where onUpdated comes in handy. You can kick off an API call or grab new information right when the component changes.
• Dynamic UI Adjustments: Maybe your component needs to react dynamically to its own changes. onUpdated is perfect for adjusting the UI based on the latest state. It’s like giving your component a quick mirror check before it goes out.
• Handling External Events: If your component is plugged into external events or services, onUpdated is the moment to sync everything up. Whether it’s handling new messages, updates from other components, or whatever else, onUpdated is your go-to time slot.

Vue 3 Hook: onBeforeUnmount

In Vue 3, the onBeforeUnmount hook is a part of the Composition API and plays a crucial role just before a component is about to be unmounted or destroyed. This hook provides a space for you to perform any cleanup tasks or finalizations right before Vue removes the component from the DOM.

onBeforeUnmount(() => {
  // Logic to execute before the component unmounts
});

Common use cases for the onBeforeUnmount hook include:

• Clearing up resources like timers or subscriptions.
• Unregistering event listeners.
• Performing any necessary cleanup before the component is removed from the DOM.

By utilizing onBeforeUnmount, you ensure that your component has a chance to tidy up and release resources before it bids farewell. It contributes to maintaining a clean and efficient Vue application by handling necessary cleanup tasks at the right time in the component’s lifecycle.

Vue 3 Hook: onUnmounted

In Vue 3, the onUnmounted hook, part of the Composition API, allows you to set up logic that kicks in after a component has finished its job and is about to be removed. It’s a practical tool for handling cleanup duties and releasing resources, contributing to a smoother and more efficient component lifecycle.

onUnmounted(() => {
  // Logic to execute when the component unmounts
});

Common use cases for the onUnmounted hook include:

• Clearing up resources such as timers or subscriptions.
• Unregistering event listeners.
• Performing any necessary cleanup after the component has been removed from the DOM.

By making use of onUnmounted, you guarantee that your component undergoes a proper cleanup, releasing resources efficiently before being removed from the application. This practice significantly enhances the overall health and efficiency of your Vue application.

Wrapping Up:

Alright, that’s a wrap on our Vue 3 lifecycle journey! Understanding how components come to life, change, and eventually say their goodbyes is key to unleashing Vue’s full potential. Those nifty hooks, like onBeforeUpdate and onUnmounted, act as your trusty sidekicks throughout this adventure.

And let’s not forget the setup function—it’s like the cool magician behind the scenes, combining all your component’s moves into one slick block. This not only keeps your code looking sharp but also ensures your Vue app stays snappy and responsive.

So, as you continue tinkering with Vue and its Composition API, keep these hooks in your toolkit. They’re your secret sauce for creating web magic that users will love. Happy coding, and may your Vue journey be smooth and glitch-free!

Javascript Objects and Javascript arrays are two of the most important data structures in JavaScript. They are used to store and organize data in a variety of ways, and they are essential for building complex web applications.

Objects are used to represent real-world things, such as users, products, or posts. They are made up of properties, which are pairs of keys and values. For example, a user object might have properties for the user’s name, email address, and profile picture.

Arrays are used to store lists of data. Each item in an array has a numerical index, which is used to access the item. For example, an array of products might contain objects for each product, with each object containing information such as the product name, price, and description.

Here are some of the benefits of working with objects and arrays in JavaScript:

• Organization: Objects and arrays can help you organize your code and make it more readable and maintainable.
• Efficiency: Objects and arrays can help you write more efficient code by reducing the amount of code you need to write and by improving the performance of your applications.
• Flexibility: Objects and arrays are very flexible data structures, and they can be used to store and organize a wide variety of different types of data.

By the end of this post, you will have a good understanding of how to work with objects and arrays in JavaScript, and you will be able to use these data structures to build more powerful and efficient web applications.

Accessing Object Properties in JavaScript

How to access object properties using dot notation and bracket notation

There are two ways to access object properties in JavaScript: dot notation and bracket notation.

Dot notation is the simplest way to access object properties. It involves using a dot (.) to separate the object name from the property name. For example, to access the name property of the person object, you would use the following syntax:

const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const personName = person.name;

Bracket notation is more flexible than dot notation, but it is also more verbose. It involves using square brackets ([]) to enclose the property name. This allows you to access properties that are not valid JavaScript identifiers, such as properties that contain spaces or special characters. For example, to access the occupation property of the person object using bracket notation, you would use the following syntax:

const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const personOccupation = person["occupation"];

Here are some examples of how to use dot notation and bracket notation to access object properties:

// Dot notation
const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const personName = person.name;
const personAge = person.age;
const personOccupation = person.occupation;

// Bracket notation
const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const personName = person["name"];
const personAge = person["age"];
const personOccupation = person["occupation"];

Creating and Using Objects in JavaScript

Creating objects in JavaScript

There are two ways to create objects in JavaScript: object literal notation and constructor functions.

Object literal notation is the most common way to create objects in JavaScript. It involves using curly braces ({}) to enclose a list of key-value pairs. The keys are the property names, and the values are the property values.

For example, to create an object for a person, you would use the following syntax:

const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

Constructor functions are another way to create objects in JavaScript. They are more verbose than object literal notation, but they offer more flexibility. To create a constructor function, you use the function keyword to define a function with a constructor body. The constructor body is the code that will be executed when a new object is created using the constructor function.

For example, to create a constructor function for a person, you would use the following syntax:

function Person(name, age, occupation) {
  this.name = name;
  this.age = age;
  this.occupation = occupation;
}

To create a new object using a constructor function, you use the new keyword followed by the name of the constructor function and the arguments that you want to pass to the constructor function.

For example, to create a new person object using the Person constructor function, you would look like this:

const person = new Person("John Doe", 30, "Software Engineer");

Using objects in JavaScript

Once you have created an object, you can use it in your code by accessing its properties and methods. To access a property, you use the dot notation or the bracket notation. To access a method, you use the dot notation followed by the name of the method.

Here is an example of how to create and use an object in JavaScript:

// Create a person object using object literal notation
const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

// Access the person's name
const personName = person.name;

// Access the person's occupation
const personOccupation = person.occupation;


// Create a person object using a constructor function
function Person(name, age, occupation) {
  this.name = name;
  this.age = age;
  this.occupation = occupation;

  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const anotherPerson = new Person("Jane Doe", 25, "Web Developer");

// Access the person's name
const anotherPersonName = anotherPerson.name;

// Access the person's occupation
const anotherPersonOccupation = anotherPerson.occupation;

// Call the person's greet() method
anotherPerson.greet();

This code will create two person objects, one using object literal notation and the other using a constructor function. It will then access the properties and methods of the objects and call the greet() method on both objects.

Accessing Array Properties in JavaScript

Accessing array elements and properties

JavaScript arrays are like an organised lists of things, and each item in the list gets a special number, which we call an index. The first item starts with index 0, and the last one’s index is the total number of items minus 1.

To grab one of these items from the list, you use square brackets like this: ([]). Inside those brackets, you put the number of the item you want. So, if you want the very first item, you’d do something like this:

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

const firstElement = myArray[0]; // 1

To access the last element in an array, you’d do something like this:

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

const lastElement = myArray[myArray.length - 1]; // 5

You can also use square brackets to get information about arrays. For instance, the “length” property of an array tells you how many things are in it. To find the length of an array, you’d do something like this:

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

const arrayLength = myArray.length; // 5

Using forEach to iterate over arrays and access their elements

In JavaScript, there’s a handy tool called the forEach() method. It’s like a built-in helper that lets you go through an array and look at each item. To make it work, you need to give it a special function to do something with each item. This function is called a callback, and it gets the item’s position in the array as a parameter.

Here’s how you’d use the forEach() method to loop through an array and check out its items:

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

For instance, in the following code, we’ve employed the forEach() method to stroll through the myArray and display each item within it on the console:

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

myArray.forEach((element, index) => {
  console.log(element);
}); 

// 1
// 2
// 3
// 4
// 5

The forEach() method is like a Swiss Army knife for dealing with arrays. It’s your go-to for doing all sorts of things with the stuff inside an array, like picking out specific items, putting them in order, or changing them in some way.

Filtering Arrays in JavaScript

The filter() method in JavaScript

The filter() method is like a virtual sieve for your arrays. It’s a built-in tool in JavaScript that lets you make a new array with only the items that meet certain requirements. You provide a special function as a filter, and it gets called for each item in the array. If the function gives a thumbs-up (a truthy value), the item makes it into the new array.

If you want to level up, check out this post.

Here’s how you’d work this magic with the filter() method:

const newArray = myArray.filter((element, index) => {
  // Return a truthy value to include the element in the new array
});

Using filter to create new arrays based on specific criteria

The filter() method is a versatile tool that allows you to craft new arrays in numerous ways. You can use it to gather items that meet specific conditions, like those greater or smaller than a certain value, items containing a particular string, or any other criteria you set up in your callback function.

Here are some examples of how to use the filter() method to filter arrays based on various conditions:

// Filter an array to only include items that are greater than 10
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const filteredArray = myArray.filter((element) => element > 10);

// Filter an array to only include items that are less than 5
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const filteredArray = myArray.filter((element) => element < 5);

// Filter an array to only include items that contain the string "foo"
const myArray = ["foo", "bar", "baz", "qux"];
const filteredArray = myArray.filter((element) => element.includes("foo"));

// Filter an array to only include items that have a property "name" equal to "John Doe"
const myArray = [{ name: "John Doe" }, { name: "Jane Doe" }, { name: "Peter Parker" }];
const filteredArray = myArray.filter((element) => element.name === "John Doe");

The filter() method is a powerful tool for filtering arrays and creating new arrays based on specific criteria. It can be used to perform a variety of tasks, such as cleaning data, preparing data for analysis, and creating dynamic user interfaces.

Does filter Return a New Array?

The filter() method returns a new array, without modifying the original array. This is known as immutability.

Immutability in JavaScript arrays

Immutability in JavaScript is like a rule that says once you create something, you can’t directly change it. Instead, if you want to make a change, you create a new version with the modifications. It’s similar to having an old book that you don’t want to write in. So, if you need to add a note or make a change, you copy the page, make the edits in the copy, and leave the original book untouched. This approach helps keep your original data safe and predictable. We use immutability when we want to be extra careful with our data.

Example

The following example shows how to use the filter() method to filter an array and create a new array without modifying the original array:

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

// Filter the array to only include items that are greater than 10
const filteredArray = myArray.filter((element) => element > 10);

// The original array is still intact
console.log(myArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// The filtered array contains only items that are greater than 10
console.log(filteredArray); // [11, 12]

Benefits of immutability

Immutability has a number of benefits, including:

• Predictability: Immutable data structures are more predictable because you know that they will never be modified. This makes it easier to debug your code and to reason about the behavior of your program.
• Thread safety: Immutable data structures are thread-safe, which means that they can be safely accessed by multiple threads at the same time without causing any conflicts.
• Performance: Immutable data structures can often be more performant than mutable data structures because they do not need to copy the data when they are modified.

Filtering Arrays by Index

How to filter arrays based on their index

To filter arrays based on their index, you can use the filter() method with a callback function that checks the index of the element.

The callback function for the filter() method takes two arguments: the element and the index. The index argument is the index of the element in the array.

To filter the array based on the index, you can simply return true from the callback function if the index matches the criteria that you are looking for.

Examples of filtering arrays by index using filter

The following example shows how to filter an array to only include items that have an even index:

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

// Filter the array to only include items that have an even index
const filteredArray = myArray.filter((element, index) => index % 2 === 0);

// The filtered array contains only items that have an even index
console.log(filteredArray); // [2, 4, 6, 8, 10]

The following example shows how to filter an array to only include items that have an index that is greater than or equal to 5:

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

// Filter the array to only include items that have an index that is greater than or equal to 5
const filteredArray = myArray.filter((element, index) => index >= 5);

// The filtered array contains only items that have an index that is greater than or equal to 5
console.log(filteredArray); // [6, 7, 8, 9, 10]

Conclusion

Object properties and array filtering are essential for working with data in JavaScript. By mastering these concepts, you can write more efficient, effective, and maintainable code.

Why is it important?

• Efficiency: Reduces the amount of code you need to write and improves the performance of your applications.
• Flexibility: Works with a variety of data types.
• Maintainability: Makes your code easier to read and understand.

I encourage you to continue learning about object properties and array filtering.

React Hooks are a powerful tool for all React developers, but they are especially beneficial for beginners and intermediate developers who are looking to improve their code readability, reusability, and maintainability.

Imagine transitioning from using complex building blocks to perfectly tailored ones that stabilise and streamline your application. That’s what React Hooks can do for you.

There’s a full example on how to create a To-do list using react right here, check it out!

What are React Hooks and why are they useful?

React Hooks have made managing state and side effects in React functional components much easier. They were introduced to simplify and clean up our code, making it easier to read, reuse, and maintain.

Before Hooks, we were dealing with class components, which were a bit like a Rubik’s Cube – you could solve it, but it could take a while and be a bit frustrating, especially as your app grew. Imagine having to find the right piece of code among a thousand lines – a real hide and seek game!

Imagine you’re building a tower out of blocks. Before, it was like using big, heavy blocks that didn’t always fit well. But with React Hooks, it’s like having these special blocks that fit perfectly and make your tower steady and neat.

For example, want a counter that goes up when you click a button? Super simple with useState. And when you want something to happen whenever that counter changes, just use useEffect. Check the difference between implementing this using React Hooks and class components.

// Without React Hooks
class Counter extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `Count: ${this.state.count}`;
    }
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

// With React Hooks
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

In short, React Hooks, especially useState and useEffect, are like a cool toolbox that can make your React development experience much more enjoyable and productive. They encourage you to write more modular and reusable code, which can lead to cleaner, more maintainable applications.

React Hooks also include useRef, useContext, and useReducer and a few others. You can check the full list here. These hooks can be used to manage state, perform side effects, and access context data in a variety of ways.

1. Only use useState to manage state that is essential to your component

useState is a powerful React Hook that allows you to manage state in functional components. It can be used to keep track of anything that changes over time, such as the value of a form input field, the score in a game, or the list of items in a shopping cart.

Every time you use useState, you’re creating a new state variable. This can add up and make your components slow and difficult to reason about, so make sure to use it wisely.

Do:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // Essential state: count

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default Counter;

Here we’re using useState to manage the essential state (count) needed for the counter component which is the correct way.

Managing essential state in your component helps to keep your code organised and maintainable. It also makes it easier to reason about how your component works and how it changes over time.

Don’t

import React, { useState } from 'react';

const UserProfile = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);  // Non-essential state: isLoggedIn

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <p>User is logged in: {isLoggedIn ? 'Yes' : 'No'}</p>
      <button onClick={handleLogin}>Log In</button>
      <button onClick={handleLogout}>Log Out</button>
    </div>
  );
};

export default UserProfile;

On this component the isLoggedIn state is considered non-essential because it doesn’t directly pertain to the core functionality or purpose of the UserProfile component. The purpose of this component is to display user profile information, and the primary goal is not focused on managing the user’s login status.

Keeping track of non-essential state in your component can add complexity and make your code harder to read. Additionally, it may result in performance issues, particularly when handling a large amount of state.

2. Use useState to manage state that is immutable.

Consider your state to be unchangeable. This means that you should never directly edit the state variable. Instead, anytime you wish to make a change, make a new copy of the state variable. This helps to maintain the reliability of your data and prevents unexpected changes, ensuring that your programme functions as expected.

Do:

import React, { useState } from 'react';

const ImmutableCounter = () => {
  const [count, setCount] = useState(0);  // Immutable state: count

  const handleIncrement = () => {
    // Update count immutably by using the function form of setCount
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default ImmutableCounter;

In this example, we’re using a special way to update a number (count) that cannot be changed directly. This helps follow the rules of React which make things more organized and reliable. Keeping things unchangeable makes it easier to understand and find mistakes in your code.

Don’t:

const MutableCounter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

The reason why it is incorrect to update state variables directly in useEffect is because it can lead to infinite loops.

In this example, useEffect will be triggered after every render, and it will increment the count state variable. This means that the count state variable will be incremented continuously, which will lead to an infinite loop.

3. Use useState to manage state that is normalised.

This means you should organize your state in a neat and organised way. Instead of lumping all your data together in one big pile, you break it down into smaller, well-organised pieces, like a well-sorted shelf of books. Each piece of data (like a book) has its own unique identifier, making it easy to find, update, or work with.

Do:

import React, { useState } from 'react';

const NormalizedProducts = () => {
  const [products, setProducts] = useState({
    1: { id: 1, name: 'Product A' },
    2: { id: 2, name: 'Product B' }
  });  // Normalized state: products

  return (
    <div>
      <ul>
        {Object.values(products).map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default NormalizedProducts;

In this case, we’re using useState to keep our data super organised. Each product has its own special ID, making it easy to find and work with. This way, we can quickly get to our stuff and make changes when needed. It’s like having a well-organised toolbox where each tool has its own slot – you can find the right tool fast.

Don’t:

import React, { useState } from 'react';

const UnnormalizedProducts = () => {
  const [products, setProducts] = useState([
    { id: 1, name: 'Product A' },
    { id: 2, name: 'Product B' }
  ]);  // Unnormalized state: products

  return (
    <div>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UnnormalizedProducts;

Unnormalized state means that the data is not organized in the most efficient way. In this example, we’re using useState to manage a list of products, and each product is represented as an object in an array. If you have a lot of products in your list, using unnormalized state can make it difficult to find and update specific products. It can also lead to performance problems, especially if you are rendering a list of all of your products.

4. Only use useEffect for side effects.

Stick to using useEffect for doing extra stuff in your React components, like grabbing data or setting up subscriptions. It’s not meant for updating the state or making the component show up on the screen. Think of it as the tool to handle things happening in the background while your component is doing its thing. So, if you need to fetch data from an API or listen for updates, that’s when you call in useEffect to do the job.

Do:

import React, { useState, useEffect } from 'react';

const SubscriptionManager = () => {
  useEffect(() => {
    // Simulating a subscription to an event
    const subscription = someEventEmitter.on('event', () => {
      // Handle the event
      console.log('Received event!');
    });

    // Cleanup: Unsubscribe when the component unmounts
    return () => {
      someEventEmitter.off('event', subscription);
    };
  }, []); // Empty dependency array

  return <p>Subscription Manager</p>;
};

export default SubscriptionManager;

This example use the useEffect to manage a subscription to an event. This is a typical side effect scenario where we subscribe to an event and ensure to unsubscribe when the component is unmounted.

Don’t:

import React, { useEffect, useState } from 'react';

const InvalidExample = () => {
  const [message, setMessage] = useState('Initial message');

  useEffect(() => {
    // This is incorrect: Effect is updating state and causing re-renders
    setMessage('Updated message');
  }, []); // Empty dependency array

  return <p>{message}</p>;
};

export default InvalidExample;

Here we’re using useEffect to update the component’s state directly. This is an incorrect use of useEffect, as its purpose is to handle side effects, not to trigger re-renders or update state directly. Always use useEffect for side effect-related tasks only.

5. Specify dependencies

useEffect takes a list of dependencies as an argument and it will only run when one of the dependencies changes. This means telling React about the specific things (like variables or pieces of data) that it needs to keep an eye on. If any of those things change, React knows it should do something.

Do:

import React, { useState, useEffect } from 'react';

const DependencyExample = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(1);

  useEffect(() => {
    // This effect will run whenever 'count' or 'multiplier' changes
    console.log('Effect ran! Count:', count, 'Multiplier:', multiplier);
  }, [count, multiplier]); // Specify dependencies: 'count' and 'multiplier'

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier * 2)}>Double Multiplier</button>
    </div>
  );
};

export default DependencyExample;

We’re specifying [count, multiplier] as dependencies in useEffect. Specifying dependencies in useEffect can help to improve the performance and efficiency of your code, as it prevents the effect from running unnecessarily.

Don’t:

import React, { useState, useEffect } from 'react';

const IncorrectDependencyExample = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(1);

  useEffect(() => {
    // This effect will run after every render
    console.log('Effect ran! Count:', count, 'Multiplier:', multiplier);
  }); // No dependencies specified

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier * 2)}>Double Multiplier</button>
    </div>
  );
};

export default IncorrectDependencyExample;

In this instance, useEffect does not contain any dependencies. This could lead to odd behaviour since the effect will run after every render. Add all relevant dependencies at all times to ensure that the impact functions as intended. useEffect will run the effect after each render even if none of its dependents have changed if dependencies are left empty. In particular, if the effect is computationally costly, this may result in performance issues.

6. Clean up after

UseEffect returns a cleanup function back. It will call this function before either the effect rerunning or the component unmounting. If the effect creates any resources, like timers or subscriptions, they should be cleaned up using the cleaning function.

Do:

import React, { useEffect } from 'react';

const SubscriptionExample = () => {
  useEffect(() => {
    const subscription = subscribeToSomething();

    // Cleanup: Unsubscribe when the component unmounts
    return () => {
      unsubscribeFromSomething(subscription);
    };
  }, []); // Empty dependency array

  return <p>Subscription Example</p>;
};

const subscribeToSomething = () => {
  // Simulate subscription setup
  console.log('Subscribed!');
  return 'subscription_token';
};

const unsubscribeFromSomething = (subscription) => {
  // Simulate subscription cleanup
  console.log('Unsubscribed!', subscription);
};

export default SubscriptionExample;

To tidy up after a subscription, we unsubscribe when the component is unmounted. This ensures that there aren’t any lingering subscriptions that might be problematic.

Don’t:

import React, { useEffect } from 'react';

const IncorrectCleanupExample = () => {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log('Hello!');
    }, 1000);

    // Oops! No cleanup, this will cause a memory leak
  }, []); // Empty dependency array

  return <p>Incorrect Cleanup Example</p>;
};

export default IncorrectCleanupExample;

In this case, we forgot to clean up after creating an interval. This can result in a memory leak because the interval will continue to run even after the component is unmounted. Always remember to clear up after any resources or subscriptions to keep your application efficient and bug-free.

7. Use hooks to create custom hooks

this means that you can make your own reusable tools for handling specific tasks in your React components. It’s like creating your custom LEGO pieces that fit perfectly into your projects, making your work easier and more organized. For example, if you often need to manage user authentication, you can build a custom hook that handles login, logout, and checking if a user is logged in. This way, you don’t have to recreate the same code in every component – you just use your custom hook, like a special tool in your toolbox, whenever you need it. It’s a neat and efficient way to make your React projects more manageable.

Do:

import React, { useState } from 'react';

// Create a custom hook to manage authentication state
const useAuth = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // Function to handle login
  const login = () => {
    setIsLoggedIn(true);
  };

  // Function to handle logout
  const logout = () => {
    setIsLoggedIn(false);
  };

  // Return the authentication state and functions to login and logout
  return {
    isLoggedIn,
    login,
    logout
  };
};

// A component that uses the custom authentication hook
const AuthComponent = () => {
  // Use the custom hook to get authentication state and functions
  const { isLoggedIn, login, logout } = useAuth();

  return (
    <div>
      <p>User is logged in: {isLoggedIn ? 'Yes' : 'No'}</p>
      <button onClick={login}>Log In</button>
      <button onClick={logout}>Log Out</button>
    </div>
  );
};

export default AuthComponent;

To manage the authentication status in this example, we have constructed a new hook called useAuth. This unique hook is used by the AuthComponent to manage the login and logout process.

Don’t

import React, { useState } from 'react';

// This component is incorrectly handling authentication without using a custom hook

const InvalidAuthComponent = () => {
  // State to track if the user is logged in or not
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // Function to handle login
  const handleLogin = () => {
    setIsLoggedIn(true); // Set isLoggedIn to true when the 'Log In' button is clicked
  };

  // Function to handle logout
  const handleLogout = () => {
    setIsLoggedIn(false); // Set isLoggedIn to false when the 'Log Out' button is clicked
  };

  return (
    <div>
      {/* Display whether the user is logged in or not */}
      <p>User is logged in: {isLoggedIn ? 'Yes' : 'No'}</p>
      <button onClick={handleLogin}>Log In</button> {/* Button to trigger login */}
      <button onClick={handleLogout}>Log Out</button> {/* Button to trigger logout */}
    </div>
  );
};

export default InvalidAuthComponent; // Export the component for use in other parts of the application

Instead of enclosing the logic in a custom hook, we are using useState directly within the component in this example. In addition to being against recommended practises, which call for encapsulating related logic within a custom hook for reusability, this can result in code duplication. Creating these special tools (custom hooks) is the way to go. It keeps your code clean, easy to understand, and you can use them in many places.

Conclusion

React Hooks, such as useState and useEffect, are powerful tools that can make your code more modular, reusable, clean, and maintainable.

Use useState to manage essential component state, ensuring immutability and normalization. Use useEffect to handle side effects, such as data fetching and subscriptions.

By following these principles, you can unlock a new level of efficiency and elegance in your React development journey.

Happy hooking!

1. Filter an array by multiple conditions with the filter() method

Ever been faced with the task of navigating through a vast dataset in JavaScript? It might seem like a formidable challenge at first, but fear not! With the filter() method, this task becomes surprisingly easy and efficient.

The filter() method in JavaScript comes to the rescue by creating a new array that holds elements passing a specific test defined by a function. Whether you’re tidying up your data, removing unwanted elements, or simply seeking specific elements, filter() is your go-to tool.

Let’s say you have an array of numbers, like this:

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

The filter() method takes a callback function as an argument and this function is called for each element in the array, and if the callback function returns true, the element is included in the new array.

You can use the filter() method to create a new array that only contains elements that meet multiple conditions. For example, to create a new array that only contains numbers that are both even and greater than 5, you would do this:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
const evenNumbersGreaterThan5 = numbers.filter(number => number % 2 === 0 && number > 5); 

In the above code snippet, the callback function checks if the number is both even and greater than 5. If it is, the element is included in the new array evenNumbersGreaterThan5.

Here is an example of how to filter the numbers array to only include numbers that are both even and less than 10:

const evenNumbersLessThan10 = numbers.filter(number => number % 2 === 0 && number < 10); 

And here is an example of how to filter the numbers array to only include numbers that are odd and greater than 5:

const oddNumbersGreaterThan5 = numbers.filter(number => number % 2 !== 0 && number > 5); 

You can use the filter() method to filter arrays by any number of conditions.

2. Filter an array by value type using the filter() method

Let’s say you have an array of different data types, like this:

const mixedArray = [1, "string", true, {}, [], null];

You can use the filter() method to create a new array that only contains elements of a specific type. For example, to create a new array that only contains strings, you would do this:

const strings = mixedArray.filter(element => typeof element === "string");

If the element is a string it is included in the new array strings (the typeof operator returns the data type of a value).

You can use the filter() method to filter arrays by any type of data, such as numbers, objects, arrays, and even null and undefined.

Here is an example of how to filter the mixedArray array to only include numbers:

const numbers = mixedArray.filter(element => typeof element === "number");

And here is an example of how to filter the mixedArray array to only include objects:

const objects = mixedArray.filter(element => typeof element === "object");

The filter() method is a very powerful tool for filtering arrays in JavaScript. It can be used to create new arrays that only contain the data that you need.

3. Filter an array by object property using the filter() method

Let’s say you have an array of objects, like this:

const users = [
  { name: "Alice", age: 25, occupation: "Software Engineer", location: "United States" },
  { name: "Bob", age: 30, occupation: "Business Analyst", location: "Bahamas" },
  { name: "Carol", age: 20, occupation: "Analyst Programmer", location: "London" },
];

You can use the filter() method to create a new array that only contains objects where a specific property has a specific value. For example, to create a new array that only contains users who are over 25 years old, you would do this, we’ll use the dot notation here to access te object’s properties.

const adultUsers = users.filter(user => user.age > 25);

The callback function in this example checks if the age property of the user object is greater than 25. If it is, the object is included in the new array adultUsers.

You can use the filter() method to filter arrays of objects by any property value. For example, you could filter an array of users by their name, location, or occupation.

Here is an example of how to filter the users array to only include users who live in the United States:

const usUsers = users.filter(user => user.location === "United States");

And here is an example of how to filter the users array to only include users who are employed as software engineers:

const softwareEngineerUsers = users.filter(user => user.occupation === "Software Engineer");

The filter() method is a very powerful tool for filtering arrays of objects in JavaScript. It can be used to create new arrays that only contain the data that you need.

4. Filter an array by nested object property using the filter() method

Imagine you have a list of products, like this:

const products = [
  {
    name: "Smart TV",
    categories: ["Electronics", "Home & Garden"],
    isOnSale: true,
  },
  {
    name: "Sunglasses",
    categories: ["Clothing", "Accessories"],
    isOnSale: false,
  },
  {
    name: "Printer",
    categories: ["Electronics", "Office Supplies"],
    isOnSale: true,
  },
];

You can use the filter() method to filter the products array by any property of the nested categories object, such as the category name. For example, to filter the products array to only include products that are in the “Electronics” category, you would do this:

const electronicProducts = products.filter(product => product.categories.includes("Electronics"));

The includes() method returns true if the array contains the specified value, and false otherwise.

Or, to filter the products array to only include products that are in the “Home & Garden” category, you would do this:

const homeAndGardenProducts = products.filter(
  product => product.categories.includes("Home & Garden")
);

You can also use the filter() method to filter the products array by multiple nested object properties. For example, to filter the products array to only include products that are in the “Electronics” category and are also on sale, you would do this:

const electronicProductsOnSale = products.filter(
  product => product.categories.includes("Electronics") && product.isOnSale
);

The filter() method is a powerful tool for filtering arrays of objects by any criteria you want. This is a great way to get the specific data you need from an array of objects

5. Filter an array by regular expression using the Javascript filter() method

Regular expressions (regex) are a powerful tool for filtering arrays by any criteria you want. They allow you to match specific patterns in strings, and you can use them to filter arrays of strings, arrays of objects, or any other type of array. To filter an array with a regular expression, you just need pass a callback function that uses the regex to the filter() method.

For example, to find any string that start with the letter A you could use the regex /^A/i

const strings = ["Apple", "Banana", "Cat", "Dog"];

const aStrings = strings.filter(string => string.match(/^A/i));

console.log(aStrings); // ["Apple"]

Imagine you have a list of email addresses, and you want to filter the list to only include email addresses from a specific domain, such as “example.com”. You can use the filter() method to do this, along with regular expressions.

Here is an example of how to filter an array of email addresses to only include email addresses from the “example.com” domain:

const emailAddresses = ["alice@example.com", "bob@example.com", "carol@gmail.com", "dave@yahoo.com"];

const exampleEmailAddresses = emailAddresses.filter(emailAddress => emailAddress.match(/@example.com$/));

console.log(exampleEmailAddresses); // ["alice@example.com", "bob@example.com"]

The regular expression /@example.com$/ matches any string that ends with “@example.com”. The filter() method will call the callback function for each email address in the emailAddresses array, and if the callback function returns true, the email address will be included in the exampleEmailAddresses array.

You can use regular expressions to filter arrays by any criteria you want. For example, you could filter an array of email addresses by name, domain, or any other property of the email address, including whether it has a valid format:

const emailAddresses = ["alice@example.com", "bob@example.com", "carol@gmail.com", "dave@yahoo.com", "invalid_email_address"];

const validEmailAddresses = emailAddresses.filter(emailAddress => emailAddress.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/));

console.log(validEmailAddresses); // ["alice@example.com", "bob@example.com", "carol@gmail.com", "dave@yahoo.com"]

You could also use regular expressions to filter arrays of other types of objects, such as arrays of products, arrays of customers, or arrays of anything else.

6. Filter an array more efficiently using chained filter() methods

We have seen already that is possible to filter any array by using multiple conditions. Another way to do that is by chaining the filter() method to other filters. Chained filter methods allow you to filter arrays by multiple conditions in a more efficient and readable way.

When you use a single filter() method with multiple conditions, the JavaScript engine has to create a new array for each condition. This can be inefficient if you are filtering a large array.

When you use chained filter methods, the JavaScript engine only has to create one new array. This is because the output of one filter method is used as the input to the next filter method.

Here is an example of a single filter() method with multiple conditions:

const products = [
  { name: "Product A", price: 10, category: "electronics" },
  { name: "Product B", price: 20, category: "clothing" },
  { name: "Product C", price: 30, category: "electronics" },
  { name: "Product D", price: 40, category: "clothing" },
];

const cheapElectronicProducts = products.filter(
  product => product.price < 20 && product.category === "electronics"
);

This code first filters the products array to only include products that cost less than $20. Then, it filters the filtered array to only include products that are in the “electronics” category.

Here is an example of chained filter() methods:

const products = [
  { name: "Product A", price: 10, category: "electronics" },
  { name: "Product B", price: 20, category: "clothing" },
  { name: "Product C", price: 30, category: "electronics" },
  { name: "Product D", price: 40, category: "clothing" },
];

const cheapElectronicProducts = products
  .filter(product => product.price < 20)
  .filter(product => product.category === "electronics");

This code also creates two new arrays, but it does it in a more efficient way. The first filter method creates a new array of products that cost less than $20. The second filter method uses the output of the first filter method as its input to create a new array of products that are in the “electronics” category.

As you can see, chained filter methods can be more efficient than using a single filter method with multiple conditions, especially when filtering large arrays.

7. Filter an array by chaining other methods

What you haven’t see so far, is that you can also chain the filter() method with other useful methods, such as the map() and reduce() methods.

For example, the following code chains the filter() and map() methods to get the names of all the cheap electronic products:

const products = [
  { name: "Product A", price: 10, category: "electronics" },
  { name: "Product B", price: 20, category: "clothing" },
  { name: "Product C", price: 30, category: "electronics" },
  { name: "Product D", price: 40, category: "clothing" },
];

const cheapElectronicProductNames = products.filter(product => product.price < 20)
  .filter(product => product.category === "electronics")
  .map(product => product.name);

console.log(cheapElectronicProductNames); // ["Product A"]

This code first filters the products array to only include products that cost less than $20. Then, it filters the filtered array to only include products that are in the “electronics” category. Finally, it maps the filtered array to a new array containing the names of all the products.

You can chain the filter() method with any other method that takes an array as input and returns an array as output.

Let’s go through some extra examples:

Filter an array of products by price and category, and then map the filtered array to a new array containing the prices of all the products.

const cheapElectronicProductPrices = products.filter(product => product.price < 20)
  .filter(product => product.category === "electronics")
  .map(product => product.price);

console.log(cheapElectronicProductPrices); // [10]

Filter an array of users by age and location, and then reduce the filtered array to get the total number of users.

const totalUsersUnder18InCalifornia = users.filter(user => user.age < 18)
  .filter(user => user.location === "California")
  .reduce((total, user) => total + 1, 0);

console.log(totalUsersUnder18InCalifornia); // 10

Filter an array of products by price and category, and then sort the filtered array by price in ascending order

const sortedCheapElectronicProducts = products.filter(product => product.price < 20)
  .filter(product => product.category === "electronics")
  .sort((productA, productB) => productA.price - productB.price);

console.log(sortedCheapElectronicProducts); // [{ name: "Product A", price: 10, category: "electronics" }]

Chaining the filter() method with other useful methods can be a powerful way to filter and process arrays of data.

8. Filter unique elements of an array using the filter() method

Imagine you have an array of numbers, and you want to filter out all the duplicates. You can use the filter() method to do this by passing it a callback function that checks if the element is already in the array. If the element is not already in the array, the callback function should return true. Otherwise, the callback function should return false.

Here is an example of how to do this:

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

const uniqueNumbers = numbers.filter((number, index) => {
  return numbers.indexOf(number) === index;
});

console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6]

Now imagine you have an array of objects, and you want to filter out all the duplicates based on a specific property of the object. For example, let’s say you have an array of users, and you want to filter out all the duplicates based on the name property.

You can use the same general approach as in the first example, but you’ll need to modify the callback function to check for uniqueness based on the name property.

Here is an example of how to do this:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 35 },
  { name: "Alice", age: 20 },
];

const uniqueUsers = users.filter((user, index) => {
  return users.findIndex((otherUser) => otherUser.name === user.name) === index;
});

console.log(uniqueUsers); // [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Carol", age: 35 }]

As you can see, the filter() method is a very powerful tool for filtering arrays to obtain unique elements. You can use it to filter arrays of numbers, arrays of objects, or any other type of array.

Conclusion

Armed with these potent JavaScript filter hacks, you now possess the prowess to filter arrays with finesse. The filter() method, with its ability to sieve through data based on diverse conditions and criteria, is your loyal companion in the world of JavaScript.

From filtering by multiple conditions to crafting intricate regex patterns, and from filtering based on value types to honing in on object properties and nested objects, you’ve traversed an array of possibilities. Chaining filters and integrating other methods like map() and reduce() into the mix further expand your array-manipulating toolkit.

Remember, the power to shape and tailor arrays to your specific needs is now at your fingertips. Happy filtering!

JavaScript forEach loop is a fundamental tool in a developer’s toolkit, enabling efficient iteration through arrays. However, to truly harness its potential, understanding its nuances and learning how to use it effectively is essential. In this blog post, we’ll delve into ten powerful strategies to maximize the utility of the Javascript forEach loop. These techniques will not only optimize your code but also enhance its readability and maintainability. Let’s unlock the full potential of forEach and elevate your JavaScript programming skills.

1. Leverage Arrow Functions on Javascript forEach

JavaScript arrow functions are a shorter and more concise way to write functions in JavaScript. They use the => syntax, which looks like an arrow. They’re handy for writing one-liner functions or simplifying code. Instead of using the traditional function keyword and curly braces, arrow functions allow you to express functions in a more compact and modern style.

Without arrow functions:

const fruits = ["apple", "banana", "orange"];

function printFruit(fruit) {
  console.log(fruit);
}

fruits.forEach(printFruit);

With arrow functions:

const fruits = ["apple", "banana", "orange"];

fruits.forEach(fruit => console.log(fruit));

There is an absolute masterpiece article here on the differences between arrow functions and regular functions that you can check it out for more details.

2. Handle the this Context on Javascript forEach

Understanding the usage of this in JavaScript can indeed be challenging.

In JavaScript, this essentially represents the current context or object in which a function is running. It acts as a placeholder indicating the function’s execution context. The actual value of this is determined by how the function is invoked, and it can vary based on different scenarios.

So, when you call a function, this is all about where and how you called it. It’s like a method actor – it adapts to the role it’s playing.

When working in JavaScript, an object can not only hold data but also functions as properties. Take this example: we have an object called obj with properties such as value, number, and printNumbers. Interestingly, printNumbers is a method that can be accessed using obj.printNumbers().

This method essentially multiplies each number in an array by the value specified. However, to specify the context in which the printNumbers method should execute, we use .bind(this) at the end of the forEach call. This allows us to determine that the method printNumbers() should execute within the context of obj in this case.

const obj = {
  value: 10,
  numbers: [1, 2, 3],
  printNumbers() {
    this.numbers.forEach(function(num) {
      console.log(num * this.value);
    }.bind(this));
  }
};

obj.printNumbers();
// 10
// 20
// 30

Basically, if you attempt to use printNumbers() outside of obj, it won’t work properly. Why? Because it can’t find the value and numbers it needs. It’s like trying to bake a cake without flour and eggs – recipe’s messed up!

Without .bind(this)

const obj = {
  value: 10,
  numbers: [1, 2, 3],
  printNumbers() {
    this.numbers.forEach(function(num) {
      console.log(num * this.value);
    };
  }
};

obj.printNumbers();
// NaN
// NaN
// NaN

3. Early Exit with some or every on Javascript forEach

Think of Array.prototype.some() as a way to check if at least one item in an array meets a specific condition.

Imagine you have a bunch of numbers and you want to know if at least one of these numbers is an even number (like 2, 4, 6) or an odd number (like 1, 3, 5).

In JavaScript terms, using Array.prototype.some() is like going through each card and checking if the number on it is odd. If you find at least one even number, some() happily says, “Yes, there’s an odd number!” If you don’t find any even numbers and they’re all even, it says, “Sorry, no odd numbers”.

Using some() is like having a swift way to check if there’s at least one item in the array that fits what you’re looking for, like finding an even number in a list of numbers.

This becomes incredibly handy when combined with forEach() because you might not want to run a specific chunk of code for all elements in the array. With some() alongside forEach(), you can quickly spot what you need and exit early, saving unnecessary processing for the rest of the elements.

const mixNumbers = [3, 4, 9, 13, 15];

// Checks if some element is even, if yes it will not execute
mixNumbers.forEach(num => {
  if (mixNumbers.some((element) => element % 2 === 0)) return false;
  console.log(num);
});
// It will not print any number


const oddNumbers = [3, 5, 9, 13, 15];

// If all elements are odd it will execute normally
oddNumbers.forEach(num => {
  if (oddNumbers.some((element) => element % 2 === 0)) return false;
  console.log(num);
});
// 3
// 5
// 9
// 13
// 15

This approach also pairs well with the every() method. However, it will halt execution only if every single element meets the condition (like being odd). On the other hand, some() will stop execution the moment it finds an element that fits the condition (like being even). So, every() is like the “check all boxes” approach, while some() is the “stop at the first one that fits” approach.

const mixNumbers = [3, 4, 9, 13, 15];

// Checks if some element is even, if yes it will not execute
mixNumbers.forEach(num => {
  if (mixNumbers.every((element) => element % 2 === 0)) return false;
  console.log(num);
});
// 3
// 4
// 9
// 13
// 15

4. Utilise Array Destructuring with Javascript forEach

JavaScript array destructuring is a way to unpack values from an array into separate variables. It’s like taking things out of a box and giving them names so you can use them easily.

We talked about object destructuring here

Imagine you have a box filled with items (an array). Array destructuring allows you to take out each item and put them into their own labeled containers (variables). So, if you have an array [a, b, c], array destructuring lets you do something like const [x, y, z] = [a, b, c] so that x contains a, y contains b, and z contains c.

A very simple example would be:

const colors = ['red', 'blue', 'green'];

const [first, second, third] = colors;

console.log(first);  // Output: 'red'
console.log(second); // Output: 'blue'
console.log(third);  // Output: 'green'

This makes it simple to work with arrays, especially when you only need specific parts of them for your code.

Imagine you have a list of individuals in an array. Each person is not just a name; they also have a profession. Your task is to display both the person’s name and their profession. Here’s where array destructuring comes into play: it allows you to easily access and use these details as you iterate through the array.

const people = [
  { name: 'John Doe', profession: 'Engineer' },
  { name: 'Jane Smith', profession: 'Teacher' },
  // more people...
];

people.forEach(({ name, profession }) => {
  console.log(`${name} is a ${profession}.`);
});
// "John Doe is a Engineer."
// "Jane Smith is a Teacher."

In this case, the forEach loop is like going through each person, and the destructuring part { name, profession } is like pulling off their name and job tags.

5. Handle Asynchronous Operations with Javascript forEach

Imagine you’re making a sandwich in your kitchen. Now, you realize you’re out of mayonnaise. You need to quickly run to the store to get some.

• Synchronous Action: In a synchronous world, you would pause making the sandwich, go to the store, buy mayonnaise, come back, and then resume making the sandwich. You wait until one task is fully complete before moving on to the next.
• Asynchronous Action: Now, in an asynchronous world, you’d ask your friend to get the mayonnaise while you continue making the sandwich. Your friend will bring it when they can, and you can keep working on the sandwich in the meantime. You don’t stop everything; you do tasks simultaneously.

In programming terms, when we talk about asynchronous operations, it’s like your computer multitasking. It can start a task, like loading a webpage or fetching data, and in the meantime, it can do other things. When the webpage is ready or the data is fetched, it’ll handle that. It’s all about efficiency and not waiting for one thing to finish before moving on to the next.

Okay, for reasons beyond the topic of this post use async/await with Javascript forEach in its not the ideal neither the most readable solution, you can see more the details on this great post. But we can use the for..of approach which is much more readable.

Async/Await Approach:

• Using async/await for API calls is like making requests to fetch data from different endpoints and patiently waiting for each response to arrive in the order they were requested.
• It’s akin to saying, “Fetch data from these endpoints in order, and let me know when each response is ready. I’ll process them as they arrive.”

async function fetchDataFromEndpoints(endpoints) {
  for await (const endpoint of endpoints) {
    const data = await fetchData(endpoint);
    console.log(`Data fetched from ${endpoint}:`, data);
    processData(data);
  }
}

const endpoints = ['api/endpoint1', 'api/endpoint2', 'api/endpoint3'];

fetchDataFromEndpoints(endpoints);

Promises Approach:

• Promises for API calls are like making requests to fetch data from different endpoints without a specific order, trusting that they’ll arrive, and you’ll process them as they do.
• It’s similar to saying, “Fetch data from these endpoints, and let me know whenever the responses are ready. I’ll process them as they come, no specific order.”

function fetchDataFromEndpoints() {
  const endpoints = ['api/endpoint1', 'api/endpoint2', 'api/endpoint3'];

  endpoints.forEach(endpoint => {
    fetchData(endpoint)
      .then(data => {
        console.log(`Data fetched from ${endpoint}:`, data);
        processData(data);
      })
      .catch(error => {
        console.error(`Error fetching data from ${endpoint}:`, error);
      });
  });
}

// Data fetched from api/endpoint3, { street: 1234 Elm St, city: Faketown, state: FS, postalCode: 12345, country: Fakeland}
// Data fetched from api/endpoint1, { user: John Doe }
// Data fetched from api/endpoint2, { cart: { product: smartphone, price: 250 } }

In both scenarios, whether using async/await or Promises, we’re making asynchronous API calls (data retrieval) within a loop. Async/await ensures the responses are processed in the requested order, simulating an organized sequence of data handling. Conversely, Promises handle responses without a specified order, reflecting a more adaptable, response-based approach to data processing from various API endpoints.

6. Combine Javascript forEach with map for Transformation

Using forEach here might seem a bit extra, but it’s cool to know that map and forEach aren’t exactly the same. The examples we’ve shown are pretty straightforward. However, if your loop gets fancier, using forEach could be a smoother ride instead of trying to shoehorn it into map.

Let’s check the difference between the two methods:

• Javascript forEach: It’s like going through a list and doing something with each item one by one. You’re just taking a look at each item.
• Javascript map: It’s also like going through a list, but while doing something with each item, map() creates a new array with the results of transforming each item in the original array. So, you’re not only looking at each item, but you’re also creating a new list based on what you did with each item.

So depending on your use case, one option will sound more appealing than the other.

Using map():

const numbers = [1, 2, 3];

let doubledNumbers = [];
doubledNumbers = numbers.map(num => {
  return num * 2;
});

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

using forEach():

const numbers = [1, 2, 3];

const doubledNumbers = [];
numbers.forEach(num => {
  doubledNumbers.push(num * 2);
});

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

7. Use Set for Unique Values Javascript forEach

In JavaScript, a Set is a built-in data structure that allows you to store a collection of unique values, whether they are primitive types or object references. The key characteristic of a Set is that it will only hold unique elements, meaning no duplicates are allowed.

So I believe we both can see a very clear use for this here, right? Perhaps one of the easiest ways to remove duplicates from your array.

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

const uniqueNumbers = new Set();
numbers.forEach(num => {
  uniqueNumbers.add(num);
});

console.log([...uniqueNumbers]); // [1, 2, 3]

Alright, that example was a bit too straightforward. Let’s spice things up a bit. Picture this: you’ve got a collection of IDs, and these IDs could represent anything—books, products, images, you name it. Your job is to figure out if an item is already in your collection. If it’s there, give the user a heads-up, but if it’s not, toss it into the collection.

const userIDs = new Set();

// Function to register users
function registerUsers(userIDsToAdd) {
  userIDsToAdd.forEach(userID => {
    if (userIDs.has(userID)) {
      console.log(`User ID ${userID} already taken. Please choose another.`);
    } else {
      userIDs.add(userID);
      console.log(`User ID ${userID} registered successfully!`);
    }
  });
}

const newUsers = [123, 456, 123, 789]; // Including a duplicate ID (123)

registerUsers(newUsers);

// User ID 123 registered successfully!
// User ID 456 registered successfully!
// User ID 123 already taken. Please choose another.
// User ID 789 registered successfully!

8. Combine with filter for Selection

Just like the example with forEach along with map, this might seem a little elaborate too. But it ultimately depends on how your application was constructed and how you’re utilizing these loops in your code.

But to clarify the differences, in simple words, forEach lets you perform an action for each item without altering the original set of items. On the other hand, filter assists in crafting a fresh set with only the items that satisfy particular criteria.

So, once again, the choice between these approaches depends entirely on how your application was designed and the way you intend to use these functionalities.

Using filter:

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

let evenNumbers = [];
evenNumbers = numbers.filter(num => {
  return num % 2 === 0
});

console.log(evenNumbers); // [2, 4]

Using forEach:

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

const evenNumbers = [];
numbers.forEach(num => {
  if (num % 2 === 0) {
    evenNumbers.push(num);
  }
});

console.log(evenNumbers); // [2, 4]

9. Error Handling within the forEach loop

Here’s another intriguing example. Picture having an array filled with a diverse range of elements, and the catch is, you’re not entirely in charge of what’s in that array, nor can you easily sift through and pick what you want. The challenge here is identifying and flagging elements that don’t match the expected types, perhaps throwing an error to say, “Hey, this one’s not the right type!” In this particular case, forEach comes to the rescue, offering a way to tackle this interesting challenge. Let me walk you through how this can be done!

const numbers = [1, 2, 3, 'four', 5];

numbers.forEach(num => {
  try {
    if (typeof num !== 'number') {
      throw new Error('Invalid number');
    }
    console.log(num);
  } catch (error) {
    console.error(error.message);
  }
});

// 1
// 1
// 1
// Invalid number
// 1

10. Parallel Execution with Promise.all

Imagine you have a bunch of tasks to do, like watering plants, cooking pasta, and charging your phone. Normally, you’d do one task at a time, waiting for one to finish before starting the next. That’s how your to-do list usually works.

Now, with Promise.all and parallel execution, it’s like having three helpers (like magic clones!) to do these tasks simultaneously. You tell each helper a task, and they go off to do them all at the same time. You don’t have to wait for one to finish before starting the next; they just let you know when they’re done. It’s like being super efficient and multitasking without being overwhelmed!

const asyncOperations = async () => {
  const endpoints = ['api/endpoint1', 'api/endpoint2', 'api/endpoint3'];
  console.log('Start of asyncOperations');
  
  const promises = [];
  
  endpoints.forEach(item => {
    promises.push(asyncFunction(item));
  });

  await Promise.all(promises);
  console.log('All promises have settled');
};

asyncOperations();

If you’re wondering the differences between the approach we presented on example 5, the main difference lies in how the asynchronous operations are handled and how they affect the overall execution flow:

1. asyncOperations using async/await and Promise.all: In the asyncOperations function, items are processed concurrently. The function uses forEach to iterate over the items array, initiating asynchronous operations (asyncFunction) for each item and collecting the promises in an array. Then, it uses Promise.all to wait for all promises in the array to settle. This allows for concurrent execution of async operations.
2. fetchDataFromEndpoints using Promises and forEach:In fetchDataFromEndpoints, the requests are initiated sequentially. It uses forEach to iterate over an array of endpoints, and for each endpoint, it initiates an asynchronous operation (fetchData) which returns a Promise. It then chains .then() to handle successful responses and .catch() to handle errors. However, each request is made one after the other, so they execute in a sequential manner.

In summary, the main difference is in how the asynchronous operations are handled. The first approach allows for concurrent execution of asynchronous operations using Promise.all, while the second approach executes the asynchronous operations sequentially within a forEach loop. The choice between them depends on whether you want concurrent or sequential execution based on your specific use case and requirements.

Conclusion

JavaScript’s forEach loop is more than just a simple array iteration mechanism—it’s a versatile tool that, when used effectively, can significantly enhance your code. By embracing techniques like leveraging arrow functions, managing the this context, and combining it with other array methods, you can write cleaner, more concise, and error-resilient code. Remember, mastering the forEach loop empowers you to write efficient, expressive JavaScript, ultimately improving your development workflow and the overall quality of your applications. Happy coding!

1. Object.keys() method

This method returns an array of all the enumerable properties of an object.

Example:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022
};
console.log(Object.keys(car)); // Output: ["make", "model", "year"]

2. Object.values() method

This method returns an array of all the values of the enumerable properties of an object.

Example:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022
};
console.log(Object.values(car)); // Output: ["Toyota", "Camry", 2022]

3. Object.entries() method

This method returns an array of arrays containing the key-value pairs of the enumerable properties of an object.

Example:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022
};
console.log(Object.entries(car)); // Output: [["make", "Toyota"], ["model", "Camry"], ["year", 2022]]

4. for…in loop

The for…in loop allows you to iterate over the enumerable properties of an object.

Example:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022
};
for (const key in car) {
  console.log(`${key}: ${car[key]}`);
}
/* Output:
make: Toyota
model: Camry
year: 2022
*/

5. Object.getOwnPropertyNames() method

This method returns an array of all the properties (enumerable or not) of an object.

Example:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022
};
console.log(Object.getOwnPropertyNames(car)); // Output: ["make", "model", "year"]

These are only a few examples of how to obtain object properties in JavaScript. You can better manipulate objects in your code by understanding these methods and strategies.

Method 1: Using the slice() method

The slice() method is used to extract a portion of an array and return it as a new array. To remove the last 3 elements from an array, you can use the slice() method in the following way:

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
myArray = myArray.slice(0, -3);
console.log(myArray);  // output: [1, 2, 3, 4, 5, 6]

The above code will remove the last 3 elements, [7, 8, 9], from the array myArray, and return a new array with the remaining elements.

Method 2: Using the splice() method

The splice() method is used to add or remove elements from an array. To remove the last 3 elements from an array, you can use the splice() method in the following way:

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
myArray.splice(-3, 3);
console.log(myArray);  // output: [1, 2, 3, 4, 5, 6]

The above code will remove the last 3 elements, [7, 8, 9], from the array myArray. The first argument, -3, is the index of the last element, and the second argument, 3, is the number of elements to remove.

Method 3: Using the pop() method

The pop() method is used to remove the last element from an array and return it. To remove the last 3 elements from an array, you can use the pop() method in a loop:

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < 3; i++) {
  myArray.pop();
}
console.log(myArray);  // output: [1, 2, 3, 4, 5, 6]

The above code will remove the last 3 elements, [7, 8, 9], from the array myArray by using the pop() method 3 times in a loop.

Conclusion:

There are numerous ways to remove the last three members from an array with JavaScript. This can be accomplished using the slice(), splice(), and pop() functions, among others. We trust that this article has made it clear how to eliminate the final three entries from an array in JavaScript.

Basic Syntax

The basic syntax of the forEach loop is as follows:

array.forEach(function(element, index) {
    // code to be executed for each element
});

The forEach method accepts a single argument, which is a callback function that will be executed for each element in the array. The callback function takes two arguments: the current element and its index. You can checkout the official docs for more info.

Example 1: Logging each element to the console

The simplest use case for the forEach loop is to log each element of an array to the console.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element) {
    console.log(element);
});

This code will log each number in the numbers array to the console.

Example 2: Summing up all elements

Another common use case is to sum up all elements of an array.

let numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(element) {
    sum += element;
});
console.log(sum);

This code will calculate the sum of all elements in the numbers array and log it to the console.

Example 3: Modifying each element

You can also use the forEach loop to modify each element of an array.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element, index) {
    numbers[index] = element * 2;
});
console.log(numbers);

This code will double each number in the numbers array and log the modified array to the console.

Example 4: Filtering an array

The forEach loop can also be used to filter an array.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = [];
numbers.forEach(function(element) {
    if (element % 2 === 0) {
        evenNumbers.push(element);
    }
});
console.log(evenNumbers);

This code will filter out all odd numbers from the numbers array and log the even numbers to the console.

Example 5: Removing an element

You can also use the forEach loop to remove an element from an array.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element, index) {
    if (element === 3) {
        numbers.splice(index, 1);
    }
});
console.log(numbers);

This code will remove the element with the value of 3 from the numbers array and log the modified array to the console.

Example 6: Creating a new array

You can also use the forEach loop to create a new array from an existing one.

let numbers = [1, 2, 3, 4, 5];
let squareNumbers = [];
numbers.forEach(function(element) {
    squareNumbers.push(element * element);
});
console.log(squareNumbers);

This code will create a new array called squareNumbers that contains the square of each number in the numbers array and log the new array to the console.

Example 7: Using Javascript forEach with arrow function

You can also use an arrow function as a callback function for the forEach loop.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((element) => console.log(element));

This is equivalent to the first example, but the callback function is written in a shorter form.

Example 8: Using the forEach as an object property

You can also use the forEach loop as object property

let numbers = [1, 2, 3, 4, 5];
let obj = {
    numbers: numbers,
    multiplyByTwo: function() {
        this.numbers.forEach(function(element) {
            console.log(element * 2);
        });
    }
};
obj.multiplyByTwo();

In this example, we defined an object called obj with a property called numbers and a method called multiplyByTwo. Inside the method, we used the forEach loop to iterate over the numbers property and multiply each element by two.

Example 9: Javascript forEach with objects

The forEach loop can also be used with objects.

let obj = {
    a: 1,
    b: 2,
    c: 3
};
Object.keys(obj).forEach(function(key) {
    console.log(obj[key]);
});

This code will extract all the keys of the object and iterate over them using the forEach loop and log the values of the object to the console.

Example 10: Using Javascript forEach with the map method

You can also use the forEach loop in conjunction with the map method.

let numbers = [1, 2, 3, 4, 5];
let squareNumbers = numbers.map(function(element) {
    return element * element;
});
squareNumbers.forEach(function(element) {
    console.log(element);
});

In this example, we first use the map method to create a new array of square numbers, then we use the forEach loop to log each element of the new array to the console.

In conclusion, the forEach loop is a powerful tool in JavaScript that allows you to iterate over arrays and perform specific actions for each element. It’s a great alternative to the traditional for loop, and it’s easy to read and understand. By mastering the forEach loop and understanding the examples in this article, you’ll be able to write more efficient and effective code.

First, let’s start with the Array.prototype.forEach() function. This function allows you to iterate over an array and perform a function on each element. For example, we can use forEach() to print out each element of an array of fruits.

const fruits = ["apple", "orange", "banana"];
fruits.forEach(fruit => console.log(fruit));

Output:

apple
orange
banana

Another useful function is Array.prototype.map(), which creates a new array with the results of calling a provided function on every element in the calling array. For example, we can use map() to create a new array containing the length of each element in the fruits array.

const lengths = fruits.map(fruit => fruit.length);
console.log(lengths);

Output:

[5, 6, 6]

The Array.prototype.filter() function is also an important function that allows you to filter an array based on a provided function. For example, we can use filter() to create a new array containing only the elements in the fruits array that have more than 5 characters.

const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits);

Output:

["orange", "banana"]

The Array.prototype.sort() function is useful for sorting an array in ascending order. For example, we can sort the fruits array in alphabetical order.

fruits.sort();
console.log(fruits);

Output:

["apple", "banana", "orange"]

The Array.prototype.reverse() function is useful for reversing the order of elements in an array. For example, we can reverse the order of the fruits array.

fruits.reverse();
console.log(fruits);

Output:

["orange", "banana", "apple"]

The Array.prototype.includes() function is useful for checking if a particular value exists in an array. For example, we can use includes() to check if “banana” exists in the fruits array.

console.log(fruits.includes("banana"));

Output:

true

The Array.prototype.slice() function is useful for extracting a portion of an array. For example, we can use slice() to extract the last two elements of the fruits array.

const lastTwo = fruits.slice(-2);
console.log(lastTwo);

Output:

["banana", "apple"]

The Array.prototype.indexOf() function is another useful function that allows you to search for a value in an array and returns the index of the first matching value. For example, we can use indexOf() to find the index of “orange” in the fruits array.

console.log(fruits.indexOf("orange"));

Output:

0

The Array.prototype.find() function is similar to indexOf() but returns the first element that satisfies a provided testing function instead of its index. For example, we can use find() to find the first element in the fruits array that starts with the letter ‘o’

console.log(fruits.find(fruit => fruit.startsWith("o")));

Output:

orange

The Array.prototype.reduce() function is useful for reducing an array to a single value by applying a function to each element in the array. For example, we can use reduce() to sum up all the elements in an array of numbers.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);

Output:

15

The Array.prototype.concat() function is also an important function that allows you to merge two or more arrays together. For example, we can concatenate the fruits and vegetables arrays together to create a new array containing all the elements of both arrays.

const vegetables = ["carrot", "potato"];
const all_food = fruits.concat(vegetables);
console.log(all_food);

Output:

["orange", "banana", "apple", "carrot", "potato"]

Finally, the Array.prototype.unique() function can be used to remove duplicate elements from an array. For example, we can use this function to remove duplicate values from the all_food array.

const unique_food = [...new Set(all_food)];
console.log(unique_food);

Output:

["orange", "banana", "apple", "carrot", "potato"]

Finally, arrays are a significant feature of JavaScript that allows you to store and arrange data sets. The array functions covered in this blog article are only a few of the many useful array functions available in JavaScript. By knowing these functions, you will be able to deal with arrays more efficiently and effectively in your JavaScript applications. It is also worth noting that several of these functions have equivalents, such as map(), forEach(), and find(), among others. It is up to the developer to select the best appropriate function based on the unique use case.

So how do you delete an element from an array in Javascript?

Here we will discuss three different ways to solve this problem once and for all.

Removing an element at the end of a Javascript array

Javascript already has a method to handle this, the pop() method.

It removes the last element from the array, returns that element, and updates the length property.

The pop() method modifies the array on which it is invoked, which means that the last element is removed completely and the length of the array is reduced without generating a new array.

let arr = ['', '', '', '', '', ''];

console.log(arr.pop()); // 

console.log(arr); // [ '', '', '', '', '' ]

Removing an element at the beginning of a Javascript array

How to remove the first element from a JavaScript array? Easy…

Using the shift() method. This works much like the pop() method we just saw, except that it removes the first element of a Javascript array instead of the last element.

This method takes no parameters, since its only function is to remove the first element of an array. When the element is removed, the remaining elements are moved. This means that the array index is updated, and you don’t lose the first reference (arr[0]).

It is worth remembering that this method modifies the array on which it is invoked. Also, the shift() method returns the element that was removed and updates the length property.

If there are no elements, or the array length is 0, the method returns undefined.

let arr = ['', '', '', '', '', ''];

console.log(arr.shift()); // 

console.log(arr); // ["", "", "", "", ""]

Removing elements at any position in a Javascript array

The splice() method can be used to add or remove elements from an array. Only the first argument is required.

• The first argument specifies the location at which to start adding or removing elements.
• The second argument specifies the number of elements to be removed.
• From the third argument on, all are optional; they specify the elements to be added to the array.

In the example below, we will use the splice() method to remove 1 element starting at position [2].

let arr = ['', '', '', '', '', ''];

console.log(arr.splice(2,1)); // 

console.log(arr); // ["", "", "", "", ""]

I find it easier to visualise what I am going to remove by thinking in the following way:

“Starting at index position [2], remove one element [ “” ] and keep the rest [“”, “”, “”, “”, “”].”

With these three methods you can already solve many problems.

See you next time!