JavaScript Tips


(note: the header photo from this article is from [Dakota Roos](https://unsplash.com/photos/dSRhwPe6v9c?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/structure?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).  Thank you for your work!)

[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax in es6 (or es2015, etc) JavaScript is a wonderfully useful bit of the language.  It allows you to extract values from an `Object` and assign them to a new variable in one statement.  If you've not come across destructuring before, a fairly basic case looks like this:

```jsx
const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};
const { name } = person;
console.log(name); // this will print 'Mike Bifulco'
```

So - what's happening here is pretty simple.  We are creating a `const` called `name`, and filling it with the value found in `person.name` . This is accomplished using the bracket structure to the left of the `=`.

(If you haven't seen or used this before, it can definitely be confusing.  Don't fault yourself for that - it'll become second-nature before long.)

There's are many other useful things you can do by way of destructuring.  For me, the most common among them are:

## Renaming

If you want to pluck a value from within an object, but also need to rename it (for purposes of code readability, perhaps), you can do so in one line:

```jsx
const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};

const { height: currentHeight } = person;

console.log(currentHeight); // 556
console.log(height); // undefined!
```

Just like that, we've assigned `person.height` to `currentHeight` in one line.  Sweet!

## Extracting

You can extract one value from an object, and create another variable with everything else, you can do that, too:

```jsx
const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};

const { fears, ...fearlessPerson } = person;

console.log(fearlessPerson.fears); // undefined!
console.log(fears[0]); // heights
```

This is a combination of destructuring syntax and the spread operator (`...` ). Very handy!

## Hard mode: complex destructuring

So both extracting and renaming things with destructuring are fairly straightforward.  I've been using both of those tricks comfortably for a while now.  In the past few months, I've been poking around with [GatsbyJS](https://gatsbyjs.org) for a few different projects (including my own website).  When I was starting to customize and implement my own Gatsby theme, I started to see some _really_ complex looking destructuring syntax, used to pull nested values from GraphQL queries throughout the site.

I was really thrown - at first glance, it's not obvious what's going on.  Let's take a look at an example, pulled from a React component used to render a single page in a Gatsby theme:

```jsx
const singlePage = ({
  data,
  location,
  pageContext: { nextPagePath, previousPagePath },
}) => {
  return <p>...react component markup</p>;
};
```

There's a combination of things happening in the definition of the `singlePage` React component.  Let's look at just that destructure, and simplify it a bit:

```jsx
const {
  data,
  location,
  pageContext: { nextPagePath, previousPagePath },
} = props;
```

It took some staring, and some playing around to figure out what was being accomplished here, so let's run through it step by step:

1.  The right side of this `const` is `= props` which tells us that all of these values are being destructured from an object called `props` .
2.  The first two values, `data` and `location` make good sense - they look just like the examples above.  This line will create a `const` from each of those two paths in the `props` object.
3.  `pageContext` is where things get interesting -  this is _another_ destructuring.  Somewhat confusingly, the values that are being pulled from `props` here are `nextPagePath` and `previousPagePath` . There is no variable being created for `pageContext` .

If that description didn't help - I don't blame you.  It really took some practice for me to understand what's going on.  I'm not even sure I would recommend using this syntax - it's not particularly easy to read, especially when tools like `prettier` squish it onto fewer lines.

With that said, it seems to be the way-to-go when pulling data from GraphQL queries on Gatsby (and likely elsewhere). If you're going to be working in that world, it's a good idea to familiarize yourself with what's going on here.

## Homework

I think the best way to get used to this syntax is just play around with it yourself.  I've created a JSBin which you can use to experiment a bit.  I'd love to hear how you do with it! [Check it out here](https://jsbin.com/kifizij/2/edit?js,console).

Some challenges for you:

- Rename the variable `displayName` to `currentUserName`
- Extract `editedBy` into its own variable
- Create an object called `meta` which contains everything in `directions` except for the `contactNumber`

## Wrapping up

I'd love to hear how you fare with this - I found myself writing this post as a matter of self-help.  Often times these things won't be made concrete until I practice in isolation for a while.  What creative uses do you have for destructuring? Did I get anything wrong here? Let's talk about it.


Understanding JavaScript Destructuring Syntax


## What does .filter(Boolean) do on Arrays?

This is a pattern I've been coming across quite a bit lately in JavaScript code, and can be extremely helpful once you understand what's going on. In short, it's a bit of [functional programming](https://mikebifulco.com/tags/functional-programming) which is used to remove `null` and `undefined` values from an array.

```js
const values = [1, 2, 3, 4, null, 5, 6, 7, undefined];

console.log(values.length);
// Output: 9

console.log(values.filter(Boolean).length);
// Output: 7

// note that this does not mutate the value original array
console.log(values.length);
// Output: 9
```

## How does the Boolean part of .filter(Boolean) work?

We're using a function built into arrays in JavaScript, called [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/array/filter), which _creates a new array_ containing all elements that pass the check within the function it takes as an argument. In this case, we're using the JavaScript `Boolean` object wrapper's constructor as that testing function.

`Boolean` is a helper class in JavaScript which can be used to test whether a given value or expression evaluates to `true` or `false`. There's a subtle, but **really important point** here - `Boolean()` follows the JavaScript rules of _truthiness_. That means that the output `Boolean()` might not always be what you imagine.

In this context, passing `Boolean` to `.filter` is effectively shorthand for doing this:

```js
array.filter((item) => {
  return Boolean(item);
});
```

which is also approximately the same as

```js
array.filter((item) => {
  return !!item; // evaluate whether item is truthy
});
```

or, simplified

```js
array.filter((item) => !!item);
```

I suspect that you may have seen at least one of these variations before. In the end, `array.filter(Boolean)` is just shorthand for any of the other options above. It's the kind of thing that can cause even seasoned programmers to recoil in horror the first time they see it. Near as I can tell, though, it's a perfectly fine replacement.

### Examples of Boolean evaluating for _truthiness_

```js
// straightforward boolean
Boolean(true); // true
Boolean(false); // false

// null/undefined
Boolean(null); // false
Boolean(undefined); // false

// hmm...
Boolean(NaN); // false
Boolean(0); // false
Boolean(-0); // false
Boolean(-1); // true

// empty strings vs blank strings
Boolean(''); // false
Boolean(' '); // true

// empty objects
Boolean([]); // true
Boolean({}); // true

// Date is just an object
Boolean(new Date()); // true

// oh god
Boolean('false'); // true
Boolean('Or any string, really'); // true
Boolean('The blog of Mike Bifulco'); // true
```

## Warning: Be careful with the truth(y)

So - `someArray.filter(Boolean)` is really helpful for removing `null` and `undefined` values, but it's important to bear in mind that there are quite a few confusing cases above... this trick will remove items with a value of `0` from your array! That can be a significant difference for interfaces where displaying a `0` is perfectly fine.

**EDIT: ** Hi, Mike from The Future™️ here - I've edited the next paragraph to reflect the _actual_ truth... I had confused `-1` with `false` from my days as a BASIC programmer, where we'd sometimes create infinite loops with `while (-1)`... but even that means "while `true`"!

I also want to call some attention to cases that evaluate to `-1`. <s>for _many_ programmers, `-1` is synonymous with `false`, because that is _absolutely_ the case in many langauges... but not here.</s> The `-1` case can also be unintuitive if you're not expecting it, but true to form, in JavaScript, `-1` is a truthy value!

## Array.filter(Boolean) For React Developers

I tend to come across this pattern being used fairly often for iterating over collections in React, to clean up an input array which may have had results removed from it upstream for some reason. This protects you from scary errors like `Can't read property foo of undefined` or `Can't read property bar of null`:

```jsx

const people = [
  {
    name: 'Mike Bifulco',
    email: 'hello@mikebifulco.com',
  },
  null,
  null,
  null,
  {
    name: "Jimi Hendrix",
    email: 'jimi@heyjimihimi@guitarsolo',
  }
]

// display a list of people
const PeopleList = ({people}) => {
  return (
    <ul>
      {people.map(person) => {
        // this will crash if there's a null/undefined in the list!
        return (
          <li>{person.name}: {person.email}</li>
        );
      }}
    </ul>
  );
}

// a safer implementation
const SaferPeopleList = ({people}) => {
  return (
    <ul>
      {people
        .filter(Boolean) // this _one weird trick!_
        .map(person) => {
          return (
            <li>{person.name}: {person.email}</li>
          );
        }
      }
    </ul>
  );
}
```

## Functional Programming reminder

Like I mentioned above, this is a handy bit of functional programming -- as is the case with nearly all clever bits of functional programming, it's important to remember that we're not _mutating_ any arrays here - we are creating new ones. Let's show what that means in a quick example:

```js
const myPets = [
  'Leo',
  'Hamilton',
  null,
  'Jet',
  'Pepper',
  'Otis',
  undefined,
  'Iona',
];

console.log(myPets.length); // 8

myPets
  .filter(Boolean) // filter null and undefined
  .forEach((pet) => {
    console.log(pet); // prints all pet names once, no null or undefined present
  });

console.log(myPets.length); // still 8! filter _does not mutate the original array_
```

## Wrapping up

Hopefully this has helped to demystify this little code pattern a bit. What do you think? Is this something you'll use in your projects? Are there dangers/tricks/cases I didn't consider here?

Tell me all about it on twitter <a href="https://twitter.com/irreverentmike">@irreverentmike</a>. Thanks for reading!

_note: Cover photo for this article is from <a href="https://unsplash.com/@pawel_czerwinski?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Pawel Czerwinski</a> on <a href="https://unsplash.com/s/photos/array?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_


JavaScript Tips: Using Array.filter(Boolean)

How does the Boolean part of .filter(Boolean) work?

Examples of Boolean evaluating for _truthiness_

Array.filter(Boolean) For React Developers


## What does the Nullish Coalescing (`??`) operator do in JavaScript?

JavaScript's Nullish Coalescing operator is two question mark characters next to one another (`??`). It takes a left-hand and right-hand operand, returning the right value _if_ the left is `null` or `undefined`. Otherwise, it returns the left value.

```js
let x;

x = 1 ?? 100; // 1
x = null ?? 100; // 100
x = undefined ?? 100; // 100

x = 'Peas' ?? 'Carrots'; // Peas
x = null ?? 'Carrots'; // Carrots
x = undefined ?? 'Carrots'; // Carrots
```

Note that unlike [using Boolean on array.filter()](https://mikebifulco.com/posts/javascript-filter-boolean), there _aren't_ special cases to consider here for _truthy_ or _falsy_ values in Javascript. Nullish Coalescing _only_ returns the right value for `Null` and `undefined`, and not for `false` and some other cases, like:

```js
let y;

y = -1 ?? 2; // -1
y = false ?? 2; // false

y = true ?? 2; // true
y = NaN ?? 2; // NaN
y = Infinity ?? 2; // Infinity
y = -Infinity ?? 2; // -Infinity

y = new Date() ?? 'soon'; // [the date object created by new Date()]
```

## Use Nullish Coalescing in React Components

This can be used to simplify what has become a fairly common pattern in React components - checking whether a value is present before rendering it, and providing a fallback if not:

```jsx
// use a ternary operator
const LetterIntro = ({ name }) => {
  return <div>Hi {name ? name : 'there'},</div>;
};

const BetterLetterIntro = ({ name }) => {
  return <div>Hi {name ?? 'there'}</div>;
};
```

Both of these are _valid_ syntax, but you might argue that the latter is easier to read, so long as you understand what the `??` operator is doing.

## Make sure to check compatibility on your project

Nullish coalescing is quickly becoming available for use in browsers and JavaScript / Node / Deno, but you should make sure that the project you're working on is using a compatible version of the language before you start to add `??` to all your code.

## Compatibility with Node and Deno

To ensure compatibility with Node, your project must be using **Node version 14.0.0** or later.

To ensure compatibility with Deno, you rproject must be using **Deno version 1.0.0** or later.

## Compatibility with modern browsers

Another thing to condier - as of the writing of this article, Nullish Coalescing isn't available in every web browser quite yet - Internet Explorer and Opera for Android are the two remaining holdouts. I'll leave it to you to decide whether or not that's a showstopper for you - and I don't know if I'd expect to see support in IE _ever_ given its [end-of-life](https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support) announcement in mid 2021.

<picture>
  <source
    type="image/webp"
    srcSet="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.webp"
  />
  <source
    type="image/png"
    srcSet="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.png"
  />
  <img
    src="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.jpg"
    alt="Data on support for the mdn-javascript__operators__nullish_coalescing feature across the major browsers from caniuse.com"
  />
</picture>

## More on Nullish Coalescing

My pal Alexander Karan put together a similar tutorial about [The Nullish Coalescing Operator](https://blog.alexanderkaran.com/nullish-coalescing-operator) on his site. It's worth a read - he's a one heck of a smart developer.

## Additional Reading

If you found this useful, you might also want to check out these other articles:

- [Using array.filter(Boolean)](https://mikebifulco.com/posts/javascript-filter-boolean)
- A primer on [deconstructructing objects in JavaScript](https://mikebifulco.com/posts/deconfusing-javascript-destructuring-syntax)
- [Understanding import syntax in Node](https://mikebifulco.com/posts/picking-apart-javascript-import)


JavaScript Tips: Nullish Coalescing (??)

What does the Nullish Coalescing (`??`) operator do in JavaScript?

Use Nullish Coalescing in React Components

Make sure to check compatibility on your project

💌 Tiny Improvements Newsletter