Search for a command to run...
JavaScript Error Messages in Chrome vs FireFox vs Safari
No comments yet. Be the first to comment.
index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Workers</title> <script src="main.js"></script> </head> <body> 1 USD = <span...
Fetch the latest currency conversion rate using async ... await
Taking advantage of latest JavaScript features: ECMAScript 2024
Replacing deprecated event.target.selectedIndex with this.selectedIndex
Using destructuring to update an object's attribute
JavaScript
12 posts
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