JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Is it common programming practice to name variables with just the element?

Since we started getting deeper into nodes and accessing elements, I really have felt like I have slowed way down on grasping concepts. I think something that contributed to that was the high usage of naming variables with element tag names.

if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
        ul.insertBefore(li, prevLi);
      }
    }

Just like in the above code (where we left off from the last video, and a part of the code that we started off with for this challenge in this video), there are two variables being named with element tag names: "li" and "ul". For some reason, since the early part of the track, when seeing a variable naming convention like this, I kept seeing the variable being named that as important (even though I knew it was just a name) and read it allowed in my head as, "create a variable named line item...blah blah blah". It really started getting confusing using nodes such as the above ul.insertBefore(li, prevLi);.

I am curious if this is common practice to name variables in this manner all the time, or is Guil Hernandez just trying to do it for ease of referencing what he is pointing at in example making? Below, I edited the same code just a little bit, exchanging different names in place of he "li" and "ul" variable names. Obviously, this works but is it an acceptable form of naming these kinds of variables, or am I going to get some eye rolls when collaborating with other programmers?

    if (event.target.className == 'down') {
      let justAName = event.target.parentNode;
      let nextOneDown = justAName.nextElementSibling;
      let aDifferentName = justAName.parentNode;
      if (nextOneDown) {
        aDifferentName.insertBefore(nextOneDown, justAName);
      }
    }

1 Answer

Daan Schouten
Daan Schouten
13,833 Points

I think the point of naming variables in such a way is that you don't have to read back too much to see how it is defined. I find it useful when a variable is called "li" because it's immediately clear what it points to. But I agree with you that it requires the reader to be aware that he is reading JS and not HTML>