Nowadays, JavaScript is a must for any developer working with web technologies. Even those focused on back-end have to touch the client-side one time or another, and maybe you are a Node developer so you basically breath JS.

The point is, doesn't matter your position, you probably faced ugly codes and thought: "Really, that's how I must write this?"

Well, people are working to make it better, and probably we are at the best spot so far, also TypeScript is being great, allows us to do amazing stuff, but let's see some cool things our old friend JavaScript is providing us.

** None of the following features are compatible with IE. But who cares? ¯\_(ツ)_/¯

Nullish coalescing

Usually, when you need to define a variable, but the value can't be null or undefined, the alternative is to resort to a ternary if you want to provide a default value:

const person = { name: 'Richard', age: 21 };
const age = person.age ? person.age : 'Age not determined';
console.log(age); // Output: 21

Let's see how it works now!

const person = { name: 'Richard', age: 21 };
const age = person.age ?? 'Age not determined';
console.log(age); // Output: 21

The nullish coalescing operator (??) is a logical operator that handles both null or undefined values, and returns the right-hand side operand when its left-hand operand is null or undefined.

If you have a situation where you have to consider false values as well, not only null or undefined, then you can try OR operator (||). Following our previous example, let's say that we need to guarantee that name must exists and can't be empty ('') and age can't be 0 (We start at zero I know, it's just an example... =P). Then we do:

const person = { name: '', age: 0 };
const name = person.name || 'This person has no name';
const age = person.age || 'Age not determined';
console.log(name); // Output: 'This person has no name'
console.log(age); // Output: 'Age not determined'

Logical nullish assignment

Imagine that you need to assign a value to a property, but only if this property is null or undefined:

const person = { name: 'Richard', age: 21 };
const person2 = { name: 'Michael', lastname: 'Glass', age: 21 };

person.lastname ??= 'Banks';
console.log(person.lastname); // Output: Banks

person2.lastname ??= 'Kimber';
console.log(person2.lastname); // Output: Glass

Optional chaining

I had nightmares with situations like this, sometimes you are working with a deep object and you have to access some property, but not only the attribute you need might be undefined, but its parent nodes as well, so you have to do a beautiful if like this:

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role && 
                sector.role.manager &&
                sector.role.manager.name ? 
                sector.role.manager.name : '';

How painful is that? Hopefully, we can do something different now:

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role?.manager?.name ?? '';

Exactly, just by adding the operator ? before each property, you don't need to expressly validate each reference in the chain. undefined is returned if a reference is nullish. Works with functions as well:

let result = someInterface.nonExistingMethod?.();
console.log(result); // Output: undefined

Conclusion

That's not all, I definitely recommend you to check the oficial docs, JavaScript is getting better every day, changes are becoming available to fast, so make sure you are up to date always!

That's all folks, see you in the next post.