nullish coalescing

|| is unsafe:

let message, input;

message = input || 'default value';

console.log(null || 'default value'); // 'default value'
console.log(undefined || 'default value'); // 'default value'
console.log('valid input' || 'default value'); // 'valid input'
console.log('' || 'default value'); // 'default value' 😱

console.log(null || 100); // 100
console.log(undefined || 100); // 100
console.log(10 || 100); // 10
console.log(0 || 100); // 100 😱

?? is better:

let message, input; 

// nullish coalescing is just a shorthand for a nullish check
message = input ?? 'default value';
message = input == null ? 'default value' : input;

console.log(null ?? 'default value'); // 'default value'
console.log(undefined ?? 'default value'); // 'default value'
console.log('valid input' ?? 'default value'); // 'valid input'
console.log('' ?? 'default value'); // ''

console.log(null ?? 100); // 100
console.log(undefined ?? 100); // 100
console.log(10 ?? 100); // 10
console.log(0 ?? 100); // 0

Optional nullish chaining

let john = {
  name: 'John',
  address: {
    country: 'France',
  }
};

let jane = {
  name: 'Jane',
};

function logPerson(person) {
  console.log('Name:', person.name);
  console.log('Country:', person.address?.country);
}

logPerson(john); // ✅ Name: John, Country: France
logPerson(jane); // ✅ Name: Jane, Country: undefined

Three Syntax forms of Optional Chaining

const jamie = {
  name: 'Jamie',
  cat: {
    name: 'Pixel',
    toys: ['floppy fish']
  }
};

console.log(jamie.dog); // ✅ undefined
console.log(jamie.dog?.name); // ✅ undefined

console.log(jamie.getAddress); // ✅ undefined
console.log(jamie.getAddress?.()); // ✅ undefined

console.log(jamie.cat.hobbies); // ✅ undefined 
console.log(jamie.cat.hobbies?.[0]);  // ✅ undefined

Transcript

00:00

Modern JavaScript comes with a neat operator called Ledge coalescing to provide a default value in the presence of a knowledge that is null or undefined values. Let's say we want to initialize a message variable based on a provided input. People often incorrectly use the bullion or operator for this purpose, but it has an issue where it does more than what you expect. It does work fine if the value is null or undefined. So here you can see that if null or undefined is used, it fallbacks to the default value and for other strings it seems to work fine. For example, here,

00:31

it uses the provided input instead of the fallback default value. But the issue is that in addition to null and undefined, the OR operator actually works on the concept of falsey values. So an empty string will also fall back to the default value in addition to strings. Another example is numbers as well. So nalan and defined. Sure the boin operator does what you expect and for wallet numbers it works except when you provide the number zero. So the OR operator is not the same as a knowledge check, it is more like a falsey check. If you wanted to only include knowledge values, undefined,

01:05

traditionally we would need to do an explicit knowledge check combined with eternity operator. Fortunately, JavaScript now comes with a knowledge coalescing operator that does exactly that. So if the left hand side is naah undefined, it goes to the default value and for everything else, whether it is empty or non empty, as long as it is a string, it uses the provided value. And we can repeat this example with numbers as well. If the left hand side is an NA or undefined, then the right hand side default value is used for everything else like the number 10 or the number zero, it really doesn't matter.

01:39

It's not non-law undefined and therefore the left hand side value is what is used. JavaScript is fairly resilient when it comes to undefined properties, except traditionally it hasn't been resilient enough to demonstrate that. Consider a simple Jamie object that has a name and a CAT member, and then the cat itself is an object that has a name and a toys member which points to an array. And of course we can use wages, access methods, for example, to access the cat name or the cat's first toy. However, we can also access properties that do not exist. For example, Jamie does not have a dog and the JavaScript at runtime will not throw an error

02:13

and simply give us back the special value undefined. However, if he overextend our welcome and try to read the property off of that undefined, then the jow skip runtime will throw an error and exit the stack. Similarly, get address is not a property that exists on Jamie and if he try to get it, the JavaScript runtime gives us undefined but doesn't throw an error. However, then if we try to invoke it, then the JavaScript runtime suddenly says, Hey, you're doing something wrong. And the same for cat hobbies as well. The cat has no hobbies. JS skip runtime is fine. It gives us undefined, but if we try to access like it's first hobby,

02:47

then again the JavaScript runtime will throw an error and exit the program. Modern JavaScript comes with the optional chain operator that allows you to safely use knowledge values without JavaScript throwing an error. Consider the simple data structure for people. We have John with a name and an address, and then we have Jane that only has a name and has not provided us with her address. We have the simple log person function that takes a person object and is designed to log the person name and the person country based on their address. Now of course this function is going to work perfectly fine.

03:19

When we passing John, we see the name John and the country France. However, if you log Jane, the Taos kept on time is going to throw an error because Jane does not have an address and therefore we are trying to look up country from an undefined address. Now of course we can handle national or undefined values explicitly by first checking, Hey, does the person have an address? If they don't, then just return undefined, otherwise read the person address country. And now instead of throwing an error and exiting the program, we get a more reasonable log of undefined. Fortunately with modern JavaScript,

03:54

we don't need to write Aries like this anymore because we can actually use the optional chaining operator where instead of simple dot we use question mark dot. And in terms of behavior, it is exactly the same. If personal address is going to be null or undefined, then we are going to get undefined. Otherwise we are going to get address country. We could see the value of this operator even right now, but it becomes even more significant when we have optional of optional of optional. For example, if a person could potentially be undefined as well, we simply add the question mark dot over there,

04:27

and now we have a much neater syntax, then the nested turny that you might need to write. Otherwise, of course, if the value is going to be there, this is going to have no effect. So we could pretty much go crazy if you wanted to and we still get the same program output as we did before. The JavaScript optional tuning operator actually supports three syntax forms. So in addition to property access, it's supposed to index access and function in vocation. Let's take a trip down memory lane and visit our old friend Jamie again. And of course we can look up Jamie's cat name or the cat's toys, but as we know, Jamie does not have a dog.

04:59

And thanks to optional training we can look up the dog's name and instead of throwing an error, the Taos kept on time, gives us back a polite undefined. Similarly, Jamie does not have a get address function and we can actually use optional chaining question mark.to optionally invoke the method that doesn't exist. And again, instead of throwing an error, the JS kept on time, gives us the polite, undefined, Jamie's cat does have toys, however, she doesn't have hobbies. So hobbies is undefined and we can actually use the optional chaining question mark dot along with an index operator to look up a member from an array that

05:34

potentially doesn't exist. And of course, all of this works as you would expect without any error as we can see in the demo console. I hope you enjoyed this tutorial. As always, thank you for joining me and I will see you in the next one.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

JavaScript Nullish Operators

Subscription Required

nullish coalescing

Optional nullish chaining

Three Syntax forms of Optional Chaining

Transcript

Professional Modern JavaScript