How to escape an error when accessing a non-existent key with an ordinal number

Question

The result of the code below is Cat and undefined. *If the key does not exist, the result will be "undefined".

   var animals = {"mammals":["Cat","Dog","Cow"]};
   var groupA  = animals.mammals[0];
   var groupB  = animals.birds;
   console.log(groupA );
   console.log(groupB);

However, The result of the below code is "error" instead of "undefined".

*Uncaught TypeError: Cannot read properties of undefined (reading '0')

var animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
var groupA = animals.mammals[0];
var groupB = animals.birds[0];

console.log(groupA);
console.log(groupB);

If the key have an ordinal number which doesn't exist, How to get an "undefined" ?

`.birds;` is undefined since well, it is not defined anywhere and thus an element 0 of undefined `.birds` does not exist so referencing it is an error — Mark Schultheiss, Oct 01 '21 at 17:13
By "escape" do you mean avoid, handle, prevent or really actually "escape" that as in "The `escape()` function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence." — Mark Schultheiss, Oct 01 '21 at 17:20

score 3 · Answer 1 · answered Oct 01 '21 at 17:11

You can use optional chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

var animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
var groupA = animals.mammals?.[0];
var groupB = animals.birds?.[0];

console.log(groupA);
console.log(groupB);

Giusseppe · Answer 2 · 2021-10-01T17:18:34.307

3

You need to evaluate the attribute first, see below:

var animals = {"mammals":["Cat","Dog","Cow"]};
var groupA  = animals.mammals[0];
var groupB  = (animals.birds || [])[0];

edited Oct 01 '21 at 17:18

answered Oct 01 '21 at 17:12

Giusseppe

147
7

score 2 · Answer 3 · answered Oct 01 '21 at 17:10

You could check for the property and explicitly set that value with a ternary:

var animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
var groupA = animals.mammals ? animals.mammals[0] : undefined;
var groupB = animals.birds ? animals.birds[0] : undefined;

console.log(groupA);
console.log(groupB);

score 2 · Answer 4 · answered Oct 01 '21 at 17:11

In second case: birds itself is undefined on the object animals. Accesing property of undefined is throwing the error.

It is like doing undefined[0]. Use optional chaining

var animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
var groupA = animals.mammals?.[0];
var groupB = animals.birds?.[0];

console.log(groupA);
console.log(groupB);

phentnil · Answer 5 · 2021-11-28T20:58:08.953

Use try...catch blocks to catch exceptions and handle them as needed (surround anything you think might throw errors):

const animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
let groupA, groupB, groupC;
groupA = animals.mammals[0];
groupB = animals.birds;
try {
  groupC = animals.birds[0];
} catch (error) {
  console.error(
    "'animals.birds' is undefined, so we cannot access property '0'."
  );
}
console.log(groupA);
console.log(groupB);
console.log(groupC);

How to escape an error when accessing a non-existent key with an ordinal number

5 Answers5