npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pure-assign

v1.0.2

Published

Drop-in replacement for Object.assign() for "updating" immutable objects.

Downloads

880

Readme

Pure Assign

Drop-in replacement for Object.assign() for "updating" immutable objects. Unlike Object.assign(), pureAssign() will not create a new object if no properties change.

Build
Status

Installation

With Yarn:

yarn add pure-assign

With NPM:

npm install pure-assign

Usage

pureAssign() takes one or more arguments. The first argument is a base object, and the remaining arguments are any number of objects whose properties should be merged with those of the base object to produce a new object. Unlike Object.assign(), the first argument is not modified. For example:

import pureAssign from "pure-assign";

const user = { firstName: "Anastasia", lastName: "Steele" };
const updatedUser = pureAssign(user, { firstName: "Ana" });
console.log(user); // -> { firstName: "Anastasia", lastName: "Steele" }
console.log(updatedUser); // -> { firstName: "Ana", lastName: "Steele" }

If the resulting object would differ from the original, then a new object is created and returned. Otherwise, the original instance is returned. For example:

const user = { firstName: "Anastasia", lastName: "Steele" };
const updatedUser = pureAssign(user, { firstName: "Anastasia" });
console.log(user === updatedUser); // -> true

In other words, the following are equivalent:

pureAssign(object, ...updates);
Object.assign({}, object, ...updates);

except that when using pureAssign the original instance is returned if no changes would be applied.

For TypeScript users, pureAssign has an additional advantage in that it catches type errors of the following form, which would be uncaught if using Object.assign() or object spread:

const user = { firstName: "Anastasia", lastName: "Steele" };
const updatedUser = pureAssign(userObject, { firstNarm: "Ana" });
// Type error because "firstNarm" is not a property of userObject.

Motivation

Many JavaScript programs treat objects as immutable data. For instance, this is recommended by React and required by Redux. Such programs typically replace object mutation:

const user = { firstName: "Anastasia", lastName: "Steele" };
user.firstName = "Ana";

with calls to Object.assign(), creating a new object with the updated values:

const updatedUser = Object.assign({}, user, {
    firstName: "Ana",
});

or alternatively with ES7's spread operator and an appropriate transpiler:

const updatedUser = { ...user, firstName: "Ana" };

A drawback of this approach is that a new object is created even if the new properties are identical to the old ones. This may have performance implications if certain updates are triggered by data "changes." For example, React developers may attempt to avoid unnecessary re-renders by using PureComponent or React.memo(), which only performs an update if its props have "changed" according to a shallow-equality check. This means that if your updates create new objects with the same values, they will trigger unnecessary rerenders since the old props do not have object-equality with the new props, despite being functionally identical.

This is where pureAssign() comes in. By returning the same instance in cases where the values haven't changed, pureAssign avoids triggering unnecessary updates which use object-equality to determine whether the state has changed.

Copyright © 2017 David Philipson