Initializing an object property if assigning to it fails

Initializing an object property if assigning to it fails

JavaScript Error Messages in Chrome vs FireFox vs Safari

If you initialize a variable like let applications = {} and assign a property of applications with an array, like as in applications['foo'].push(1) it'll throw an error because foo is not yet a property of applications.

In Chrome it throws the following error :

caught TypeError: Cannot read properties of undefined (reading 'push')

In Firefox it throws :

Uncaught TypeError: is undefined

In Safari it throws :

undefined is not an object (evaluating 'applications[property].push'

But at times we would want to push to an array of a property in applications like applications['foo'].push(5) where we don't know beforehand if is defined or not.

In that case, we define it as = [].

But, if we don't have a list of properties beforehand to mass assign to applications, if the data is coming from an AJAX request, then we can initialize the property using a try-catch block.

    if (
        // Chrome
        e.message.includes("Cannot read properties of undefined") ||
        // FireFox
        e.message.includes("applications[property] is undefined") ||
        // Safari
        e.message.includes("undefined is not an object (evaluating 'applications[property].push'")
        applications[property] = [response[i]['version']];
        console.error("error = ", e.message);

The catch here is to check for two error messages - one for Chrome and one for Firefox.

UPDATE: A guy who works on the Chromium code-base for his company, The Browser Company ( mentioned about using the optional chaining operator (?.)which was introduced in ES2020 - so now the entire try-catch block can be replaced with just this :


Thanks Vivek Galatage.

Here is the full example source: