Nullish Coalescing Operator
I have been a full-stack developer for twelve years and am currently part of the Cloud FinOps team at Atlassian. I previously ran an App development agency, managing various teams across design and development, leading web, backend and native mobile app developers in Australia and Europe. My strengths are system architecture design and communicating complicated tech to everyday people. Having helped scale tech at numerous startups, I am passionate about making a positive difference. When not working, you can find me writing tech articles and teaching Javascript and React at SheCodes, an initiative helping to get more women into tech. I regularly give talks on various topics, focusing on the impact the technology we build can have. I am devastated by the state of the world, love a good political rant and can often be swearing at no one in particular. I enjoy building things in JavaScript, Deno and Node.
We often use the or operator || in JavaScript to create a fallback value. However, this comes with risks, and you should try to use nullish coalescing operator instead ??. When we use the or operator, it will default to the value provided if the value is falsy, like so:
const user = {_id: 1, name: null}
const name = user?.name || "John Doe"
console.log(name) // "John Doe"
Here we safely unwrap the name in case it is null or undefined if the value is falsy, we fallback to the string John Doe. However, think about what we are doing here. Other values register as falsy not just null or undefined. Let's compare the two operators on a few different values to see the difference.
console.log(false || "Error") // 'Error'
console.log(false ?? "Error") // ??
console.log("" || "No value given") // 'No value given'
console.log("" ?? "No value given") // ''
console.log(0 || "Number missing") // 'Number missing'
console.log(0 ?? "Number missing") // 0
Here you can see the or operator will fall back to the given value for an empty string, the number zero and a false boolean. When you want to provide fallback values when accessing something that might be null or undefined it would be best if you reached for the ?? first, unless, for example, you want to create a fallback for an empty string.
Let's look at a real example of where it can cause problems. Say you have a setting where a user can set the volume, but if it has not, you fall back to default. If the user has set the volume to zero and you use the or operator, you will fall back to the default.
const userSetVolume = 0
const defaultVolume = 5
const volume = userSetVolume || defaultVolume
console.log(volume) // 5
const volume = userSetVolume ?? defaultVolume
console.log(volume) // 0
The nullish coalescing operator is a great way to provide a default value when safely unwrapping or accessing values in JavaScript. Give it a try.
Want to read more on the Nullish Coalescing Operator? My friend Mike put a deep dive blog post on the operator that covers it in more detail and its usage in React, Deno and Node.
