Uncaught TypeError: Cannot read property '1' of null(…) in a JavaScript function

Question

This method is part of a module; And despite the error...

Uncaught TypeError: Cannot read property '1' of null(…)

works to a small degree, however it appears to have blocked an additional method on the module.

This is a fiddle which contains the whole module.

searchURL: function() {
  function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  }
  var link, url, parser, newPathName = '',
    newstr = '',
    doc = document,
    avon_rep_container = doc.getElementById('avon_rep_container'),
    avon_rep_container_id,
    avon_rep_container_links,
    avon_rep_container_images,
    documentTableWrapper,
    docBodyFirstChild,
    full_width_container_1 = doc.getElementsByClassName('full-width-container')[1],
    full_width_img_class_el = doc.getElementsByClassName('full-width-img')[0];
  if (!avon_rep_container) {
    avon_rep_container = doc.createElement('div');
    avon_rep_container.setAttribute('id', 'avon_rep_container');
    avon_rep_container.className = 'container-avon-representative-news';
    avon_rep_container_links = avon_rep_container.getElementsByTagName('a');
    avon_rep_container_id = doc.getElementById('avon_rep_container');
    docBodyFirstChild = doc.body.firstChild;
    documentTableWrapper = doc.getElementsByClassName('marginfix')[0];
    avon_rep_container.appendChild(documentTableWrapper);
    doc.body.appendChild(avon_rep_container);
    full_width_container_1.removeChild(full_width_container_1.getElementsByTagName('table')[0]);
    full_width_img_class_el.removeAttribute('style');
  } else {
    avon_rep_container_links = doc.getElementById('avon_rep_container').getElementsByTagName('a');
  }
  avon_rep_container_images = avon_rep_container.getElementsByTagName('img');
  for (var i = 0; i < avon_rep_container_images.length; i++) {
    var images = avon_rep_container_images[i];
    images.src = '/dam/avon-us/landing-pages/rep-news/' + images.src.split('/').pop();
    if (avon_rep_container_images[i].width == "538") {
      avon_rep_container_images[i].style.width = "538px";
    }
    if (avon_rep_container_images[i].width == "258") {
      avon_rep_container_images[i].style.width = "258px";
    }
    avon_rep_container_images[i].style.width = 'inherit';
    avon_rep_container_images[i].style.margin = 'auto';
  }
  //for (var i = 0, len = arguments.length; i < len; i++) { // Using a for loop to allow unlimited arguments to be passed in
  //instead collect all necessary urls
  url = getURL(arguments); //[i]); // We are calling the publicApi.getURL() method and passing the looped argument from above
  for (var j = 0, jlen = avon_rep_container_links.length; j < jlen; j++) { // This loop goes over the whole documents links...
    link = avon_rep_container_links[j];
    var domain = link.href.match(/(https?:\/\/.+?)\//)[1];
    if ((url.indexOf(domain) !== -1) && (!link.href.match(/\.(pdf)/gi))) { // //...and we are checking each argument passed in to see if it matches the object value stored in the getURL function e.g. like a switch statement..
      parser = document.createElement('a'); //...if so we are essentially adding a blank tag to all the documents in the document
      parser.href = link.href;
      link.setAttribute('target', '_self');
      newPathName = parser.pathname;
      console.log(domain);
      if (newPathName.search(/Executive|District|Division|National/) != -1) { // Added check for these strings for SMO page
        newPathName = newPathName.split('/').pop();
        newstr = newPathName;
      } else {
        newstr = newPathName;
      }
      link.href = newstr;
    } else {
      link.setAttribute('target', '_blank');
    }
  }
  //}
}

Can one explain what the error means in context to my Module, can't seem to understand it.

Thanks any help will be appreciated!

Update

This is where the error is occurring:

var domain=link.href.match(/(https?:\/\/.+?)\//)[1];

Answer 1

String#match returns either null (no match) or an array with the matches.

var domain = link.href.match(/(https?:\/\/.+?)\//)[1];
//                     ^^^^^

Workaround with check

var domain = link.href.match(/(https?:\/\/.+?)\//);

if (domain) {
    // do something with domain[1]
}

Answer 2

You can use an if statement to check if the match is null like the other answers have mentioned.

Or you can use the logical or operator to get it onto one line and make it cleaner e.g.

var domain = (link.href.match(/(https?:\/\/.+?)\//) || [])[1];

You get a Type error because when the match is false the function returns null and you cannot access index 1 of null as it is not an array.

null[1] causes a type error

By using the logical OR operator || the domain variable is set to second condition when the first condition is falsey.

So when the match is false the result defaults to an empty array [] and you can access any index of an empty array without getting an error and it results in undefined

This will make domain = undefined when the match is false.

I really wish type errors weren't a problem in JS especially with objects. I seem to have add a lot of if statement and extra code every other line just to deal with type errors.