javascript nested object undefined or null check

Nested object is an object nested inside a object with deep leve. Each object contain properties. Let’s see an example to check nullish values against deeply nested properties in current javascript implementation.

const employee = {
  name: 'Franc',
  department: {
    name: 'sales'
  }
};
const name = employee.name;
console.log(name); // Franc
const department = employee.department; 
console.log(department);// {name:'sales'}
const departmentName = employee.department.name;
console.log(departmentName); //sales

console.log(employee.salary) //undefined
console.log(employee.department.supervisor) // undefined

In the above example, Create a object with neste properties.

accessing object with valid properties (name,department and department.name) returning valid values.

Accessing non existing properties (employee.salary, employee.department.supervisor) in objects returns `undefined'.

Accessing nested properties on undefined object () throws error -TypeError: Cannot read property 'name' of undefined as seen in the below example.

console.log(employee.department.supervisor.name) 

we have to handle null or undefined values using if elseconditional expression, and fallback to else block to avoid this errors.

if ((employee) 
  && (employee.department) 
    && (employee.department.supervisor) 
      && (employee.department.supervisor.name)) {
	        console.log(employee.department.supervisor.name)
          } 
  else {
    console.log('department supervisor name not found');
    }

And output is

department supervisor name not found

Code looks not simple and needs to write a lot of code and difficult to readability to handle deeply nested object with more number of levels.

The same can be rewriten using ternary operator

const deptname =
  (employee
    ? (employee.department
      ? (employee.department.supervisor
        ? employee.department.supervisor.name
        : undefined)
      : undefined)
    : undefined);
  console.log(deptname)// undefined

With ES11, The null and undefined handling is simplified by introducing Optional Chaining Operator. Let’s look into new feature in ES11.

Es11 features- Optional Chaining Operator

Optional Chaining operator is a latest feature introduced with ‘ES2020’ to latest javascript. and its symbole is ?. ie single question mark and dot.

This operators allows to find the nested object properties without checking the reference of each nested object properties. This operator enables to return undefined or fallback value if any reference is nullish values - null or undefined.

Advantages

  • This looks simple and less coding
  • Human readabiity to avoid error prone
  • useful to avoid errors.

This will be useful for default to fallback value when deeply object properties are null or undefined It is a Short cirucit operator applies two expression, returns its value of

  • right hand expression is not processed when left hand expression evaluated is null or undefined
  • left hand operand value when left hand operand is not null or undefined **Syntax **
Object?.property
Object?.[expresson]
array?.[index]
function?.(args)

The syntax contains question mark with dot operators. There are many variations of using Optional Chaining operator.

  • Object?.property - check Static property
  • Object?.[expresson] - Check Dynamic property
  • array?.[index] - Check array index values
  • function?.(args) - Checkinf in function calls

For example, given deeply nested object (employe.department.name), to check for null or undefined values for name property.

let departmentName=employe.department && employe.department.name;

Rewriting using optional chain operator

let deparmentName=employe.department?.name

Variables are added hash symbole to make it private use in a class. Syntax

#variable

Let’s see an example

const result1 = null ?? "default1";
const result2 = "" ?? "default2";
const result2 = 11 ?? 0;

console.log(result1); // default1
console.log(result2); // default2, Empty string is not equal to null or undefined
console.log(result2); // 11

Optional Chaining in Typescript example

Optional Chaining operator introduced in Typescript 3.7 language.

This will be useful for checking response from consuming API calls Consider API calls returns the nested deep response object.

const result = response.employe.department.id;

if employe or department is null or undefined, It throws an error TypeError: Cannot read property ‘employe’ of undefined. To avoid this errors, have to validation check as per below

let id;
if (response.employe && response.employe.department) {
  id = response.employe.department.id;
}else{
   id="Id not found"
}

so id always has value either valid value or default fallback value. To avoid this length code check, nullish coalescing operator and optional chaining simplified this and error prone

const id = response.employe?.department?.id ?? "Id not found.";

compare with Ternary operator

We already have Ternary operator - ?.

Optional ChaningTernary Operatordescription
object?.value1object == null ? undefined : object?.value1if object is null or undefined, returns undefined,else returns object.value1
object?.[name]object == null ? undefined : object[name]returns object[name] if nullish else undefined
object?.function()object == null ? undefined : object.function()calls object.function() if not nullish,else return undefined, error if not function

Option chaining properties can be used in short-circuit, long short-circuit and stacking operations.

Browser Support

This features Supports following browser versions.

  • Chrome 80+
  • Firefox latest version
  • Safari latest version
  • Babel plugin

Babel plugin-proposal-optional-chaining

To install this feature nodejs applications, Please add plugin-proposal-optional-chaining as devDependencies

npm install --save-dev @babel/plugin-proposal-optional-chaining

configure .babelrc file by adding plugins entry as follow

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}