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: applications.foo 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 applications.foo
is defined or not.
In that case, we define it as applications.foo = []
.
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.
try
{
applications[property].push(response[i]['version']);
}
catch(e)
{
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']];
}
else
{
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 (Arc.net) 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 :
applications[property]?.push(response[i]['version']);
Thanks Vivek Galatage.
Here is the full example source: https://gist.github.com/anjanesh/fda4de82fe22f82ba0db5caf08308968