This content originally appeared on DEV Community and was authored by Anshuman Bhardwaj
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: 'anshuman_bhardwaj@dev.to', 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: 'anshuman@gmail.com' }
'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: "anshuman_bhardwaj@dev.to" };
// 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: "anshuman_bhardwaj@dev.to" };
// 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: 'anshuman_b@dev.to', 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
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
This content originally appeared on DEV Community and was authored by Anshuman Bhardwaj
Anshuman Bhardwaj | Sciencx (2022-01-17T08:31:06+00:00) Write better code with these 5 JavaScript features. Retrieved from https://www.scien.cx/2022/01/17/write-better-code-with-these-5-javascript-features/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.