Home > Enterprise >  Uncaught TypeError: Cannot read properties of null (reading 'length') but code works as in
Uncaught TypeError: Cannot read properties of null (reading 'length') but code works as in

Time:12-06

i tried to make this code work

let itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];

let oInCompany = itCompanies.forEach((element) => { 
var theElement = element.match(/o/gi); 
if (theElement.length > 1) { return console.log(element); 
 } 
});

// the result is code returning the element name into console

the code works as intended, but it shows error.

Uncaught TypeError: Cannot read properties of null (reading 'length')
    at main.js:53:18
    at Array.forEach (<anonymous>)
    at main.js:51:30

does it mean the .length is null? but the code works as intended.

i just need explanation for the error, is it my syntax or what?

i can't understand what does it, meanwhile my code works just fine. is there possibilities of it gonna gone wrong somewhere in the future along the road?

CodePudding user response:

String.prototype.match can return null if no matches are found. See reference on MDN.

Definitely you should account for the matches array being null.

CodePudding user response:

The reason that happens is because in some of words nothing has matched. If nothing has matched the match selector returns null.

You can see here for more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

When the return value is null you are getting null.length. But null has not a property length inside it. Then the error mentioned above is firing.

Change your code like that and it will work properly:

let itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];

let oInCompany = itCompanies.forEach((element) => { 
var theElement = element.match(/o/gi); 
if (theElement && theElement.length > 1) { return console.log(element); 
 } 
});

CodePudding user response:

You issue comes from the fact that theElement may return null when using the .match method.

Additionally, forEach will not return a value.

One way - push

Instead, I've added an array that is pushed to:

const itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];

let companiesWithOInName = []
itCompanies.forEach((element) => { 
  const theElement = element.match(/o/gi);
  if (theElement) {
    // console.log(element);
    companiesWithOInName.push(element)
  } 
});


console.log(companiesWithOInName);

Note: that push is just one way of doing this.

Another way - filter

Another way people may suggest is the filter method:

const itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];

const companiesWithOInName = itCompanies.filter((element) => element.match(/o/gi));

console.log(companiesWithOInName);

CodePudding user response:

The regular expression /o/gi is looking for the letter "o" in the strings in the itCompanies array, but none of the strings in that array contain more than one "o". Therefore, the String.match() method is returning null, which is causing the error to handle the null you can use this:

  let itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];
    
    let oInCompany = itCompanies.forEach((element) => { 
      var theElement = element.match(/o/gi); 
      if (theElement && theElement.length > 1) {
        return console.log(element); 
      } 
    });

CodePudding user response:

Usually this error occurs when length gets 'null'. In your case 'if(theElement.length > 1)' is getting null, therefore this error is coming.

  • Related