• Home

As of August 2019, a new proposal optional chaining reached stage 3 and is going to be a nice improvement. Optional chaining changes the way properties are accessed from deep objects structures.

JavaScript language has added few exciting features over the past few years, like the spread operator, default argument values, and arrow functions and now new feature is optional chaining. Optional chaining allows developers to reference object properties which may or may not exist without trigger an error.

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to 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. When used with function calls, it returns undefined if the given function does not exist.

This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there’s no known guarantee as to which properties are required.

// API response object
const person = {
    details: {
        name: {
            firstName: "Kristijan",
            lastName: "Klepac",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "iOLAP"
    ]
}
// Getting the firstName
const personFirstName = person.details.name.firstName;

In above example how we get firstName is prety bad because it’s hard to get persons name details. Look at the example bellow how you need to check if firstName exists if you don’t wan’t error to be thrown.

// Checking if firstName exists
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'unknown';
}

Of course with Lodash you can simplify code above like this:

_.get(person, 'details.name.firstName', 'unknown');

But Lodash is then another dependency in your project.

Let’s see another solution with new optional chaining:

const personFirstName = person?.details?.name?.firstName;

Explanation: Here is how you have to think about it. If there is a ?. at the beginning of a property, it is as you would ask your self does person exists? ( has person the value null or undefined? ). If yes then I will not return an error but just undefined. So personFirstName will have the value of undefined. This question will repeat for details? and name?. If any of these values is ‘null’ or undefined, then personFirstName will also be undefined. This is called Short-circuiting. Once javascript finds a null or undefined it will short circuit and stop going deeper.

Example with Nullish coalescing operator:

const personFirstName = person?.details?.name?.firstName ?? 'unknown';

Babel to the rescue.The Nullish coalescing operator is represented as ??. It is also pretty easy to read. If the left side is undefined than personFirstName will get the value of the right side from ??.

Example with dynamic properties:

const jobNumber = 1;
const secondJob = person?.jobs?.[jobNumber] ?? 'none';

Example with function or method call:

const someJob = person?.jobs.getSomeJob?.() ?? 'none';

If method does not exist on that object, it will return undefined.

But … Right now no browser supports this out of the box — so we can use Babel. There is a babel.js plugin already that is pretty easy to integrate if you have already Babel setup.

babel-plugin-proposal-optional-chaining

Someone recently ask me what motivates me to stay at my current job, am I in comfort zone or am I seeking for new challenges in my daily activities. Very interesting question and I have the urge to write something about it.

Human being has a tendency to be in a comfort zone, a zone which is basically a concept of mind and it’s limits. They themselves set up a boundary and are henceforth constrained to live within it due to the mentality which has now developed and anything beyond this boundary looks beyond imagination and even sometimes impossible.

Comfort: what a nice word that describes such a wonderful state of being. We all seek for comfort in our lives, when we are comfortable, life feels nice and easy.  Comfort zone is a place where we can regenerate ourselves after our work is complete. In comfort zone there is no stress and we wanna stay in this beloved condition.

Unfortunately, what brings us comfort can sometimes be in exact opposition to accomplishing our goals and what we really would like in this life. As a web developer I can’t stay in my comfort zone for a long period of time. As we all know, everything in this life is in constant change. In IT industry changes are even faster than would you expect in real life. One thing you learn today another tomorrow  and maybe in few months this knowledge is deprecated. I see many of my coworkers and colleagues are trapped in their comfort zones even in IT departments and they don’t seek for any changes in his daily routines. This is not good for them and neither for their personal growth. We must be proactive in every aspect of our lives especially at our jobs and find right balance in everything that we do in our personal growth. Also even it’s hard to do we must step out from our comfort zones sometimes.

The comfort zone is the great enemy to creativity; moving beyond it necessitates intuition, which in turn configures new perspectives and conquers fears.
– Dan Stevens

As a web developer I have some words for my motivation on daily basis that keeps me away from being trapped in my comfort zone, in short …  basically never underestimate yourself and keep on trying new technologies and learn about them and STAY UPDATED. Web Projects mainly differ on the basis of complexity, deadlines, and your programming skills. So you can be doing anything developing websites, creating mobile apps just do with dedication and some time plan.

Life begins at the end of your comfort zone
– Neale Donald Walsch

Today I will show you how to create very simple chat app with .NET + SignalR. This tutorial covers the basics of building a real-time app using SignalR. We will cover how to:

  • Create a web project.
  • Add the SignalR client library.
  • Create a SignalR hub.
  • Configure the project to use SignalR.
  • Add code that sends messages from any client to all connected clients.

Continue reading

Many today’s websites send some notifications to their users and today I will show you how to implement such functionality in your React Web App using Firebase. You can find code for this demo in my Github here.

Firebase is Google Platform that offers various services for web developers which help them to build their apps quickly. To send the notifications, we will use the service called Cloud Messaging, which allows us to send messages to any device using HTTP requests.

Continue reading

Recently I was on some Job interview in some large IT company and their lead .NET developer ask me about my experience in using SOLID principles in building software. That was very interesting question for me because at that time in interview I was not sure what to tell him. Of course, I know what SOLID principles are, and right answer will be always use SOLID … but something bother me when I said this … it doesn’t always make sense if you do SOLID. 

Continue reading

  • 1
  • 2
  • 5

Copyright by Kristijan Klepač 2018