HomeAboutBlog

A Solution for Banishing Unwanted Elements in an Array

January 29, 2024

Array.filter(Boolean): A Swift Solution for Banishing Unwanted Elements

In the vast realm of arrays, not all elements are created equal. Some may lurk within your array, unwanted and elusive, taking the form of null or undefined values. Whether they infiltrate from an API or linger as remnants of your code, these pesky elements can wreak havoc when you attempt uniform actions on every item in the array.

The Culprits: null and undefined

Picture this scenario: your array is an eclectic mix of useful objects and silent saboteurs.

const array = [
  { name: "Mary", age: 25 },
  null,
  { name: "Linda", age: 34 },
  undefined,
];

If you attempt to loop over this array and perform consistent operations, disaster awaits.

const newArray = array.map((item) => {
  // Danger! This won't work with null or undefined values.
  const name = item.name;
});

The treacherous null and undefined values can sabotage your code execution, causing errors that are both frustrating and time-consuming to debug.

The Null Check Dilemma

One common approach is to insert null checks before using each item.

const newArray = array.map((item) => {
  if (!item) {
    return item; // Discard the null or undefined values.
  }

  return item.name;
});

However, this introduces clutter to your code, and worse, the array with its concealed empty values persists. The next time you use newArray, you'll find yourself navigating another round of precarious null checks.

Nullish Coalescing: A Valiant Ally

Fear not! A concise and elegant solution exists to purge your array of these malevolent null and undefined entities. Enter the mighty Array.filter(Boolean):

const array = [{ good }, null, { great }, undefined];

const truthyArray = array.filter(Boolean);
// truthyArray = [{ name: "Mary", age: 25 }, { name: "Linda", age: 34 }]

Let's break down the magic that filter(Boolean) performs:

  1. Each item in the array encounters the Boolean constructor.
  2. The Boolean constructor coerces each item to true or false based on its truthiness or falsiness.
  3. If the item is truthy, it earns its place in the filtered array.

You might be wondering why we aren't explicitly passing item to Boolean(). Fear not, for this is a manifestation of the elegant "tacit" or "point-free" style in JavaScript. The expression array.filter(Boolean) is functionally equivalent to array.filter(item => Boolean(item)). The second version explicitly names and passes item to Boolean(), while the former relies on JavaScript's understanding that Boolean() accepts a single argument, thus automatically passing the array item.

The choice between the two styles boils down to personal preference and readability. Opt for the version that resonates best with your coding sensibilities.

Elevating Mapping with Safety

Armed with our newfound trick, we can elevate our mapping operations and bid farewell to null checks.

const newArray = array.filter(Boolean).map((item) => {
  return item.name;
});

Now, our map() function can focus on its intended purpose, unburdened by the need for null checks. The filtering step has successfully cleansed our array pipeline of empty values, paving the way for smoother and safer transformations.

To further fortify your defenses against null and undefined values, consider the formidable Nullish Coalescing operator (??). This operator plays a crucial role in ensuring that your assumptions about null or undefined values are met with a default fallback.

const safeValue = potentiallyNullValue ?? defaultValue;

The ?? operator evaluates potentiallyNullValue. If it is null or undefined, the defaultValue is returned. Otherwise, the potentiallyNullValue is deemed safe and takes precedence.

Another way to check if an object exists, especially when dealing with optional properties or potential null or undefined values, is to use the optional chaining (?.) operator in JavaScript. The optional chaining operator allows you to access properties of an object without the need for explicit null checks.

Here's an example:

const user = {
  id: 1,
  name: "John Doe",
  address: {
    city: "Example City",
    zipcode: "12345",
  },
};

// Using optional chaining to check if 'user.address' and 'user.address.city' exist
const city = user?.address?.city;

if (city) {
  console.log(`User lives in ${city}`);
} else {
  console.log("User address information not available");
}

In this example, user?.address?.city will only try to access city if both user and address are not null or undefined. If any of them is null or undefined, the expression will short-circuit, and city will be assigned undefined.

This way, you can gracefully handle situations where certain properties might be absent without resorting to explicit conditional checks at each level. The optional chaining operator is particularly useful when dealing with nested objects or accessing properties that may not always be present.

Let's integrate the Nullish Coalescing operator into our arsenal, enhancing the robustness of our code.

const safeArray = array.map((item) => item?.property ?? defaultValue);

Now, our mapping operation gracefully handles null or undefined values. The ?. (optional chaining) ensures that we safely access the property, and the ?? operator provides a fallback if the value is null or undefined.

In the ever-evolving landscape of JavaScript, mastering such elegant tricks ensures not only efficient code but also a delightful coding experience. Embrace the power of Array.filter(Boolean) and fortify your defenses against the tyranny of null and undefined in your arrays!

Related posts:

javascript