Forem: Richard Torres

Array Mutation Methods in JavaScript

Richard Torres — Fri, 15 Mar 2024 18:35:05 +0000

Introduction

Mutating is the concept of changing the assignment of a value in Javascript.

const fruits = ['apple', 'banana', 'cherry']; // arr = ['apple', 'banana', 'cherry']
fruits.push('date'); // arr = ['apple', 'banana', 'cherry', 'date']

Certain array methods in Javascript mutate the original array. This may lead to unintended consequences in your code if you're not cautious when using such methods.

const fruits = ['apple', 'banana', 'cherry']; // arr = ['apple', 'banana', 'cherry']
const newFruits = arr.push('date'); // arr = ['apple', 'banana', 'cherry', 'date']

In the example above, newFruits is intended to be a copy of fruits with the value of dates added, however the push method mutates the original array, leading to fruits being mutated and the newFruits assignment likely being redundant.

Mutation is not inherently bad; there are times in which we likely want to mutate an array without keeping a reference to the original array.

const flowers = ['lilac', 'daisy', 'rose']
flowers.sort();

In the example above, you can imagine a list of flowers a user is adding in no particular order but would like to see in alphabetical order. We don't care to store the unsorted list in this scenario, so we can mutate the original array.

Mutating Methods

The following is a list of methods that mutate an array:

copyWithin: Copies part of the array to another location in the same array
fill: Changes all elements within a range in an array to a static value
pop: Removes the last element from an array
push: Adds the specified elements to the end of an array
reverse: Reverses an array
shift: Removes the first element from an array
sort: Sorts an array
splice: Removes or replaces existing elements and/or adds new elements
unshift: Adds the specified elements to the beginning of an array

In general, methods that mutate change the array's length or the values at particular indices of the array.

Resources

Does it Mutate is an excellent resource which lists array methods in JavaScript, provides, examples, and classifies each one as "mutates" or "no mutation".

mdn web docs provides a comparison table of mutating methods and their non-mutating alternative, if one exists.

Conclusion

While the concept of mutation of arrays in JavaScript warrants merit, often it can lead to error-prone code if an array-mutating method is used unintentionally. If you're finding that values in your arrays in your code are inexplicably changing, you may have an array-mutating method in use. It's worthwhile investigating, and if find this is your case, set up testing around this functionality to prevent regression.

GraphQL Files in Next.js

Richard Torres — Tue, 27 Sep 2022 04:20:50 +0000

Introduction

Next.js allows for utilizing a GraphQL API but its implementation may be less clear based on documentation, tutorials, or other resources found online. Most such resources (using Apollo) will make use of a query string in the component, such as:

const GET_MISSIONS = gql`
  query missions {
    launchesPast {
      mission_name
    }
  }
`;

function Missions() {
  const { loading, error, data } = useQuery(GET_MISSIONS);
}

While this is not incorrect, such an implementation loses the benefits of an IDE which can format, lint, etc the query because it is wrapped in a JavaScript string. Instead, we want to take full advantage of separating GraphQL calls into distinct files such as .graphql or .gql as we would .md for markdown or .json for JSON content.

Next.js and Webpack

In order to use .graphql files in Next.js, we have to configure the webpack configuration Next.js provides. In order to do so, create or edit the next.config.js file at the root level of your Next.js application:

module.exports = {
  webpack: (config, options) {
    config.module.rules.push({
      test: /\.(graphql|gql)/,
      exclude: /node_modules/,
      loader: "graphql-tag/loader"
    });

    return config;
  }
};

What the code above does is tell the webpack configuration of Next.js to parse .graphql or .gql files through the graphql-tag loader. In order for this to work, install graphql at the root level of the application.

npm install graphql-tag

Now we can refactor the previous component to make use of the new filetype.

import { missions } from 'queries/mission.graphql';

function Component() {
  const { loading, error, data } = useQuery(missions);
}

In our new .graphql file, we can list each query which are exported and can be used in components.

query missions {
  launchesPast {
    title
    author
  }
}

Next.js and TypeScript

If using TypeScript with Next.js, you may find the new import will result in TypeScript warning that no modules or type declarations are found.

Cannot find module 'queries/mission.graphql' or its corresponding type declarations.ts

To resolve this, we will need to create a custom type definition. If you don't already have custom types, create a @types folder at the root level of your application with a graphql.d.ts file. In this new file, declare the corresponding module.

declare module '*.graphql'

If using .gql files, create a gql.d.ts file with declare module '*.gql' written inside.

Conclusion

Next.js is a powerful framework that allows for a GraphQL API and harnessing the power of utilizing separate GraphQL files for queries just requires a few changes to configurations as mentioned above. A full working example can be found in the repo richardtorres314/graphql-files.

Lazy Loading vs Virtualization

Richard Torres — Sun, 18 Sep 2022 03:26:55 +0000

Lazy loading and virtualization are two terms related to user experience that are at times mistaken to be synonymous. While they both related to the concept of loading large amounts of data onto the user's screen (think applications with infinite scroll), they describe different techniques in dealing with the data.

Lazy Loading

Lazy loading is a technique which makes asynchronous calls to fetch new data (from an API endpoint, a store, etc) as the data appear in the viewport. This improves the user experience as the user does not need to wait for all the data to load at once but only what is needed at the moment.

The social media platform Triller is a good example of a site that lazily loads content into the viewport to produce an infinite feed as a user scrolls. Lazy loading only concerns itself with fetching subsequent data and loading the data into the viewport.

In the figures below, we can see how the data load in the viewport differently. In figure 1, the site will fetch and render all data, even if the data are not yet accessible in the viewport. In figure 2, the data outside of the viewport are not yet fetched until the user requests the data (for example, has reached the bottom of the fetched posts).

Figure 1. Site without lazy loading.

Figure 2. Site with lazy loading.

Virtualization

Virtualization is another technique for loading content asynchronously but renders only what is in the viewport. As previously fetched data leave the viewport, so do those DOM nodes. This improves the user experience since a user who scrolls for a very long time would otherwise have many DOM nodes and, as a result, may notice a drop in performance.

The social media platform Instagram is a good example of a site that makes use of virtualization for its feed. Only a handful of posts will remain loaded in the DOM while a user scrolls.

In the figures below, we see the differences between strictly lazy loading and virtualization. In figure 3, data previously fetched remain in the DOM as the user makes subsequent fetches. In figure 4, the previously fetched data are removed from the DOM and replaced with subsequently fetched data.

Figure 3. Site without virtualization.

Figure 4. Site with virtualization.

Conclusion

Despite the confusion between the two terms, both techniques are meant to improve the user experience as they offload the fetching of data (especially large data such as images or videos) until the user is ready to access the data. Both techniques have a place in today's content-heavy web, whether it's because a user has restricted access to internet (spotty connection, data caps, bandwidth restrictions) or because a slowly loading page could lead to your users shopping elsewhere.

How to Destructure Class Methods

Richard Torres — Sat, 10 Sep 2022 03:28:57 +0000

The Problem

Suppose you had the following class:

class Dog {
    numOfLegs = 4;

    getLegCount = function() {
        console.log(this.numOfLegs);
    }
}

Now let's say you had an instance of a Dog:

const dog = new Dog();

We can call the getLegCount method like so:

dog.getLegCount();

The output would be "4", as expected. But what if we destructured our Dog object:

const { getLegCount } = new Dog();

Let's update the call to the method accordingly:

getLegCount();

And while we might expect the output to be the same, we instead get

Uncaught TypeError: this is undefined

Why would this be the case? When destructuring a method on a class, the method's this context is no longer bound, leading to the error.

The Solution

How do we keep the this context? There are two ways of doing so. The first option is to explicitly set the binding of the this context to the method in the class constructor:

class Dog {
    constructor() {
        this.getLegCount = this.getLegCount.bind(this);
    }

    numOfLegs = 4;

    getLegCount = function() {
        console.log(this.numOfLegs);
    }
}

This will resolve the issue and output 4, as expected.

The second option is to use an arrow function to define the getLegCount method:

class Dog {
    numOfLegs = 4;

    getLegCount = () => {
        console.log(this.numOfLegs);
    }
}

This too resolves the issue of the this context and does so without having to explicitly bind the context to the method. Though often times misunderstood to be completely interchangeable, the arrow function differs from the traditional function expression in that it does not have it's own binding to this and therefore will close over the class's this context.

Note that this only works correctly over classes and not traditional objects due the fact of the class having its own this context whereas an object's this context would be the global this.

For example, having the following object:

const dog = {
    numOfLegs: 4,
    getLegCount: () => {
        console.log(this.numOfLegs);
    }
};

In calling the destructured method:

const { getLegCount } = dog;

You would see the output as:

undefined

Conclusion

Arrow functions were introduced in ES6 or ECMAScript 2015 so as long as you don't need to support older legacy systems or are using a tool to ensure backwards compatibility (such as Babel or TypeScript), arrow functions are a fine approach. Whichever approach you take, you now have a deeper insight into the differences between () => {} and function() {}.