Dev Diary: $, elem, [object NodeList], [object Array], and Huh?

Most of my career has revolved around the use of sight. Web design is mostly visual. It’s easy to see blemishes when coding CSS. JavaScript is another story. It tends to be more of a visual hallucination — an experience involving the apparent perception of an object or visual patterns that are not present. At times it’s impossible to ‘see’ what is happening. Over the past two years I have been gradually progressing from jQuery to vanilla JavaScript. The deeper I go the more sight interferes with my intuition. It’s a problem, you, the designer, might have experienced. Here are a few tips to ‘see’ what is happening.

Variables

jQuery: When declaring a jQuery object as a variable make it a habit to start them with the $ symbol.

// start jQuery objects with $
var $jsUserInfo = document.querySelectorAll( 'h2' );

Vanilla JavaScript: Add ‘elem’ to the variable when using vanilla JavaScript.

// start or end with 'elem'
var userInfoElem = document.querySelectorAll( 'h2' );

Remember, it’s important to know when you’re using jQuery and when you’re not. The $ symbol and ‘elem’ are not required but will help differentiate between the two. Plus, an experienced developer will be more pleased to provide an assist when the code is readable.

Vanilla first, then jQuery

When time is available, I’m finding it best to start with vanilla JavaScript. Change them into jQuery objects when needed.

// vanilla Javascript
var userInfoElem = document.querySelectorAll( 'h2' );

To change it to jQuery place the variable inside $().

// jQuery
var $userInfoElem = $(userInfoElem);

Sadly, they both look the same in the console! These H2-coma-seperated-purple-blue-orange-with-gray-arrow-blobs-of-text can easily be replicated and layered in Photoshop. But here in console land, they look exactly the same. It will cause grief if you can’t tell the difference.

Looks like both are showing all the H2's from the webpage.

console.log()

Oh, I was doing it wrong. Introducing console.log(). I can’t find a reason why I have to enclose a variable inside console.log() when I am already in the console. It doesn’t make sense but it works.

// vanilla Javascript
console.log(userInfoElem);
__proto__: NodeList

Now you have access to all the 17 H2's. Inside each H2 is a long list of elements that you can substitute for jQuery. For example, classList is similar to .addClass, .removeClass, .toggleClass, and .hasClass. Check it out.

node elements

Do note that the method above is considered array-like, but not a true array. Devs call it a NodeList. Huh? NodeList objects are collections of nodes. Huh? Okay, open up your developer tools in the browser. All the divs and paragraph tags — yes those — the Devs call them nodes. If you have an html element, body, and two divs on a page then you have four nodes. In the above example, there are 17 H2 nodes. So a NodeList is a group of nodes.

Let’s see how jQuery differs.

// jQuery
console.log($userInfoElem);

Whoa! Jackpot! Look ALL those options you’re familiar with!!!

__proto__: jQuery[0]

Toggle, addClass, hide, removeClass — those should look familiar to a designer with a little jQuery knowledge.

Array.prototype.slice.call()

jQuery provided many options but ideally we want to become more familiar with vanilla Javascript. So what is the equivalent to jQuery? Let’s try Array.prototype.slice.call().

// vanilla JavaScript
var userInfoArray = Array.prototype.slice.call( userInfoElem );
console.log(userInfoArray);
__proto__: Array [0]

Well now, look at all those lovely options. It’s much different than jQuery but at least you can start to ‘see’ the difference. And if you’re attempting to mix a little vanilla JavaScript into your jQuery workflow, anything that can provide contrast is very helpful!

Do note that what you are looking at is a true array. Huh? Visualize it as a interactive grocery list if that makes it easier. You purchased 17 fresh nodes from the produce isle. Now you can splice, sort, push, pop, and filter them. Healthy you!


Yeah! Now any web designer, with a wee bit of jQuery knowledge, can continue to use sight when transitioning to vanilla JavaScript. Good luck!


Additional Info

Another quick way to tell if it is a NodeList or Array is to use Object.prototype.toString.call().

// vanilla Javascript
var userInfoElem = document.querySelectorAll( 'h2' );
Object.prototype.toString.call(userInfoElem);
“[object NodeList]”

Selects all <h2> elements and returns [object NodeList], which is array-like, but not a true array.

// vanilla Javascript
var userInfoArray = Array.prototype.slice.call( userInfoElem );
Object.prototype.toString.call(userInfoArray);
“[object Array]”

Returns selected elements in a true array: [ <h2>, <h2>, <h2>, <h2> ]

But does that make sense to a designer? Not really.

Like what you read? Give Aaron Kahlhamer a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.