Write better code with these 5 JavaScript features

JavaScript is one of the most popular computer languages of all time, one of the reasons for this is the highly intuitive syntax of JavaScript. That's not even the best part, the best part is that a lot of new features are added to the language regularly.

Today we will see some of those new features help us with writing more intuitive code.

Nullish coalescing operator (??)

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


false || '@sun_anshuman' // returns '@sun_anshuman'

false ?? '@sun_anshuman' // returns false

0 || '@sun_anshuman' // returns '@sun_anshuman'

null || '@sun_anshuman' // returns '@sun_anshuman'

null ?? '@sun_anshuman' // returns '@sun_anshuman'

undefined ?? '@sun_anshuman' // returns '@sun_anshuman'

The problem with || is that its a boolean operator so it coerces the left-hand operand to a boolean before evaluating, hence making both 0 and '' a false.

Use case by example

Let's assume you are building a game where the minimum score is 0 and you consider -1 an invalid score.

So before you update a user's score you would like to make sure it is set to a valid value or the defined invalid score.


// the server returns 0
let score = fetchScoreFromServer(); 

// we only want the score to be -1 only if the score
// is undefined or null because 0 is a valid value

const finalScore = score || -1; 
// but this will give us the invalid value even if,
// the first operand (0) is a valid value, leading to a bug

How to solve this, you ask? (I know you know it by now, haha)


let score = fetchScoreFromServer(); // returns 0 again

const finalScore = score ?? -1;
// finalScore stays score (0 in this case), 
// unless the server returned null or undefined

Logical nullish assignment (??=)

The logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined).


let user = { name: "anshuman_bhardwaj" };
user.twitter_name ??= "@sun_anshuman"; // assigns '@sun_anshuman'
console.log(user); // {name: "anshuman_bhardwaj", twitter_name: "@sun_anshuman"}

This is basically an assignment operation based on the ?? operator.

Use case by example


// the above example can be rewritten like this
let finalScore = fetchScoreFromServer(); // returns 0 again

finalScore ??= -1;
// keeps value of 0

Another good place to use ?? would be while referencing object properties and using default value. In which case we can use Logical nullish assignment ??= to give default values to undefined properties.


const user = { email: '[email protected]', company: '' }

// assign user.name to email username if it's undefined
user.name ??= email.split("@")[0]

// make company Canoo if company not available on user
user.company ??= 'Canoo'
// this time company stays empty string

in operator

The in operator returns true if the specified property is in the specified object or its prototype chain.


const user = { email: '[email protected]' } 

'email' in user // return true

'name' in user // return false

You remember the time you were using undefined values because the referenced key was missing from Object.

It is worth noting that,

If you set a property to undefined but do not delete it, the in operator returns true for that property.

Use case by example

A good use case is to run sanity checks before running operations on an object's properties to avoid doing undefined checks and mistakes.

// we have an user object
let user = { email: "[email protected]" };

// now we want to assign it a name if its not available

// checks if user has email
if ("email" in user) {
  // checks if user has name
  if (!("name" in user)) {
    user["name"] = user.email.split("@")[0];
  } else {
   console.log("Welcome user: " + user.name);
  }
} else {
  console.error("User does not have required property: email");
}

Using in on an array checks if the given index is an empty slot or not


const emptyList = new Array(5)

empties[2]    // returns undefined
2 in empties  // returns false

empties[2] = 'anshuman_bhardwaj'
2 in empties  // returns true

Optional chaining (?.)

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is (null or undefined), the expression short-circuits with a return value of undefined.


let user = { name: 'anshuman' }

user.address.zipcode // TypeError

user.addess?.zipcode // returns undefined

It is worth noting that,

When used with function calls, it returns undefined if the given function does not exist.
Optional chaining cannot be used on a non-declared root object but can be used with an undefined root object.

Use case by examples


// user can be null or an Object containing email
const user = getUserFromDev() 

// if we do this it will run fine when user is an Object 
// but when user is null this will give a TypeError
console.log(user.email)

// we can fix this by using optional chaining

console.log(user?.email)
// logs the actual user email when user is an Object
// logs undefined if user is null but doesn't crash

Conditional ternary operator (?)

The ternary operator checks whether the condition specified is true, if it's true then return the first expression else return the second expression.

x ? y : z, means if x is true return y else return z.


let user = { age: 22 }

user['status'] = user.age > 18 ? 'adult' : 'minor'
// user.status is 'adult'

This operator is not specific to JavaScript, I first used it in C++.

Use case by example


let user = { email: "[email protected]" };

// lets consider this code, simple enough?
if ("email" in user) {
  user["name"] = user.email.split("@")[0];
} else {
  user["name"] = "Anonymous";
}

// we can make it even simpler by using ternary
user["name"] = "email" in user ? user.email.split("@")[0] : "Anonymous";

Using ternary is a personal preference, it's good for doing inline expressions otherwise everything can be put as if-else

Bonus

Here are some examples with mix and match of the above features, let's see who all can answer correctly down in the comments.


// consider the examples independent of each other

const user = { email: '[email protected]', lastName: undefined }

// 1
user["firstName"] = "email" in user 
                            ? user.email.split("_")[0] 
                            : "Anonymous";

// 2
user["familyName"] ??= 'Bhardwaj'

// 3
console.log('lastName' in user)

// 4 
console.log('' ?? '@sun_anshuman')

Learn more

You can also watch this YouTube video where I explain these examples

https://www.youtube.com/watch?v=pk50LBGru_Q

You can also fork the CodeSandBox to try out examples.

I hope this post was helpful to you. Should you have any feedback or questions, please feel free to put them in the comments below. I would love to hear and work on them.

For more such content, please follow me

Until next time

Resources

MDN docs

Write better code with these 5 JavaScript features

Comments

Gems of JavaScript

3 Array methods every JavaScript developer should know

More from this blog

Sending login notifications to users using Auth0 Actions

Next.js for beginners

3 Ways to declare variables in JavaScript: var, let, and const explained

The right way to use LocalStorage in JavaScript

What the heck is SSG: Static site generation explained with Next.js

Nullish coalescing operator (??)

Use case by example

Logical nullish assignment (??=)

Use case by example

in operator

Use case by example

Optional chaining (?.)

Use case by examples

Conditional ternary operator (?)

Use case by example

Bonus

Learn more

Resources

Command Palette

Comments

Gems of JavaScript

3 Array methods every JavaScript developer should know

More from this blog

Nullish coalescing operator (??)

Use case by example

Logical nullish assignment (??=)

Use case by example

in operator

Use case by example

Optional chaining (?.)

Use case by examples

Conditional ternary operator (?)

Use case by example

Bonus

Learn more

Resources