DEV Community: Shamoil Arsiwala

Nullish Coalescing (??) in Javascript

Shamoil Arsiwala — Fri, 30 Oct 2020 12:21:06 +0000

Basics

Before we start, let's get the basic concepts out of the way.

There are 6 falsy values in JavaScript which are undefined, null, NaN, 0, "" , false.

These above values will be taken as a false value in a condition. learn more

Introduction

We generally use logical OR (||) operator to return the right operand if the left operand is falsy.

The syntax goes as leftExpression || rightExpression

If the leftExpression is truthy, it will be returned.

If the leftExpression is falsy, rightExpression will be returned.

For example:

let falsyValue = 0;
let truthyValue = 1;

console.log(falsyValue || 'printed'); //output: 'printed'
console.log(truthyValue || 'nope'); //output: 1

This can lead to unexpected issues if you consider 0 or ""(empty string) as valid values.

This is where Nullish Coalescing (??) operator helps us. It was introduced in ES2020.

Nullish Coalescing (??)

Nullish Coalescing (??) operator is used to return the right expression if left expression is nullish.

A nullish value is a value that is either null or undefined.

Here are some examples of expressions:-

// comments represent the value returned

0 ?? 'expressionB' // 0
0 || 'expressionB' // expressionB

'' ?? 'expressionB' // ''
'' || 'expressionB' // expressionB

null ?? 'expressionB' // expressionB
null || 'expressionB' // expressionB

undefined ?? 'expressionB' // expressionB
undefined || 'expressionB' // expressionB

let object = {}; // same for [] as well
object ?? 'expressionB' // {}
object || 'expressionB' // {}

Short-Circuiting

Similar to AND (&&) and OR (||) operators, Nullish Coalescing (??) is also short-circuited meaning it will not execute the right operand if the left operand is neither null nor undefined.

Chaining

Chaining ?? with && or || operator will throw a SyntaxError

 null || undefined ?? 'OK'; // Uncaught SyntaxError: Unexpected token '??'

This can we avoided by using parentheses to explicitly specify the operator precedences

(null || undefined) ?? 'OK'; // "OK"

References

JavaScript Nullish Coalescing Operator

QR based Event Registration Application

Shamoil Arsiwala — Sat, 05 Sep 2020 18:07:50 +0000

I've been a part of many college events, workshops and seminars. While they have been amazing, their registration process has always been on pen and paper. This makes it difficult to keep track of the number of registrations and the data of those who have registered. The sheet can get lost or torn.

To solve this issue and make the whole process of registrations easier, I've developed an Android app to manage registrations using QR codes.

Tech stack used -

React Native
Firebase

I prefer keeping it open-source so other interested developers can contribute and hence more people can benefit from it.

The demo apk can be found here - https://drive.google.com/file/d/1Yul7poaKJm7T3Z9q-jDp2DRR8NmTn2A1/view?usp=sharing

Live demo - https://www.linkedin.com/posts/shamoilarsi_github-reactnative-firebase-ugcPost-6707919741593415680-fYWw

Github Repository - https://github.com/shamoilarsi/QR-Event-Registration

PS - Some work is left on the UI of the app.

Mock Aptitude Exam

Shamoil Arsiwala — Sun, 31 May 2020 19:51:00 +0000

Aptitude Exam

Aptitude exam is a mock test website for MCQs based questions mainly inspired by the MCQ exams held in colleges.
All information is served by a private API I developed. (Links can be found at the end of the post)

Features:

has a login option where students can log in with their id and password.
after logging in, the student is asked what category does he want to give the exam in.
the request for MCQs is sent to the API which returns a JSON object.
this JSON is parsed to be shown one at a time in the main exam region.
A timer is started after which the exam will auto-submit.
MCQ question and the options are displayed. The selected option turns green.
Questions can be marked for review.
An overview button shows all question numbers and gives details as to if they're answered and if they're marked for review.
On submitting, your result is calculated with answers to all questions with explanations.
also on submitting, your result is sent to the server to be stored in the file.

Purpose of the app?

I developed this mock test website mainly to get my hands dirty with React.js and web development in general.

Code

React- https://github.com/shamoilarsi/Mock-Aptitude-Exam
Node- https://github.com/shamoilarsi/Mock-Aptitude-Exam-API

Demo

Website is live on - https://aptitude-exam.web.app/

You can find a video showing the flow of the website on LinkedIn