Remember last week when I spoke about how to use and and I called ?  Remember reading the part about how after some research, I've had though about redesigning the function? querySelect() querySelectAll() how it could all be done in one command qs()() Here's what the old version looks like. qs = (query,all) => ( (parent) === ) ? qs(qs()(parent))(query,all) : (parent|| )[ ](query); var => parent typeof "string" document `querySelector ` ${(all|| )? : } false "All" "" And here's the new version of . qs()() qs = query => { q; ( (parent) === ) ? qs(qs()(parent))(query) : (q = (parent|| ).querySelectAll(query)).length > ? q : (q[ ]|| );}; var => parent let return typeof "string" document 1 0 null Try as I might, I really hoped that that (or more appropriately ) would have slyly stuck itself into the part where assigning there allows us to have without having to put our ( ) on a separate line with the statement, but I cannot do that, and here's why. let q var q q = (parent||document).querySelectorAll(query) q q.length > 1 assignment operation = let q Remember that when you assign a value to a variable, the assignment operator returns the value assigned to that variable.  You can try it out in the debugging console of your browser or in a Node.js console right now. If you type in the console will return . That is stored in the variable until your refresh your browser or exit the Node.js console. five = 5; 5 5 five I could go on about in JavaScript, but I don't want to. operator precedence I could have gone without the statement and not used the curly braces ( ) and statement as JavaScript variable would have allowed me to assign a value to (with ) without initially declaring with the statement but the of using the keyword inside a set of parenthesis would not allow me to get because if you use before a variable, it will return , and throws a .  And if you are using , either by putting at the top of your file or at the beginning of your function, declaring without , , or throws a . let q {...} return hoisting q q = (parent||document).querySelectorAll(query) q let q scope let q.length , , or let var const undefined undefined.length TypeError strict mode "use strict"; q let var const ReferenceError five = ; six; seven = ; num = { ; w; y = x; w = ( z=[x,y, ]).length; w;
}; // Let's review (assuming strict mode is not initially set in this figure) 5 // => 5 (because the assignment operator returns the value that is assigned to the variable; because strict mode is not enabled, five is hoisted, and can be initialized without declaration first) var // => undefined (declaration keywords (var, let, and const) return undefined even though the variable. If six was previously used, it would have been hoisted.) var 7 // => undefined (although 7 is assigned to seven; seven is declared and assigned so technically it's hoisted) var => x "use strict" let // => undefined (although w is defined) // => ReferenceError (because y was not defined) var 3 // SyntaxError (because unexpected token "var" next to z) (also, if it had worked the code inside the parenthesis would have returned undefined, of which undefined.length is a TypeError) return At any rate, because our couldn't be integrated into our one-liner, we have to bring back the curly braces ( ) and statement, since we can't return our value implicitly. let q {...} return q f = x; f = { x; } f = { x; } //Remember that this form, known as FUNCTIONAL FORM,... var => x // Means the same as this form, known as FUNCTIONAL-IMPERATIVE FORM,... var => x return // Means the same as this form known as IMPERATIVE FORM var ( ) function x return So here is the new in detail. qs()() qs = { { q; ( (parent) === ){ parent_query = qs()(parent); qs(parent_query)(query);
    } { parent_element = parent || ;
      q = parent_element.querySelectorAll(query); (q.length > ){ q;	  
      } { (q[ ]|| );
      }
    }
  } } /* @func: qs
 * @desc: querySelector[All] in one function
 * @param parent : (@default is document) A string or Element to find the query element(s)
 * @param query  : (required) A CSS string matching an id, class, or attribute of elements inside the parent.
 * @returns:
 *  null if nothing is found.
 *  Node if query matches one result.
 *  NodeList query matches more than one result.
 */ var ( ) function parent return ( ) function query let // q is declared in the inner function if typeof "string" let return else // If parent is undefined, use document. var document if 1 // if q match more than one instance return all matches as a NodeList. return else // Otherwise, return the first element only // Note: If [] is returned, and [][0] is undefined (meaning no matches), return null. return 0 null // inner function // outer function Before I talk about what makes this different from the old version, I want to talk about two functions in the class. The function matches the first instance of a query. The matches all instances of a query and returns an array. What if you use and it only returns one instance? You still have to tack on to get that one item out of the returned array.  The function, is basically the function where that one item is returned without needed to append if it finds something. Array .find() .filter() .filter() [0] .find() .filter() [0] There is one other thing to note. If finds no results, it returns an empty array, , but returns . Furthermore, the zeroth item in an empty array, , is . .filter() [] .find() undefined [][0] undefined The function is basically the function for a , which makes the function. But there is one problem: doesn't return , it returns , and . .querySelector() .find() NodeList .querySelectorAll() .filter() .querySelector() undefined null is not the same as null undefined Just about all function returns an empty array, like . But returns like . We still need any way because and too. So if is , will be returned. .getElementsBy*() .querySelectorAll() .getElementById() null .querySelector() null typeof([]) === "object" typeof(null) === "object" q[0] undefined null With that, we eliminate the variable that was in the old version of . While this function doesn't take advantage of template strings like the old version did, it finally eliminates , meaning is the ultimate query function and the only one we need. all qs()() .querySelector() .querySelectorAll() So that's the new .  Eventually, I'd like to present a new library I'm working on called which is a JavaScript library which has an emphasis on closures and functional programming. qs()() haqs Here at Hackernoon, I plan on describing the more simplified versions of some of these function.  The haqs library version is a bit more complicated because I was a bit braggadocio with demonstrating the functional programming aspects.  I would really like to see just an itty-bit of object-oriented programming to reduce the amount of repetition and static structuring. I also want to apply functional patterns to write code with a concise behavior.  Haqs isn't quite ready yet, but I integrate some of the stuff I'm talking about here into it as I would like for it to be used in my Codepen work. We'll see how it turns out. Until next time, keep hacking!

CodePen

Initialized

JRCharney.com

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Re-Query Select All the Things!

Too Long; Didn't Read

Companies Mentioned

Jason Charney

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Re-Query Select All the Things!

Too Long; Didn't Read

Companies Mentioned

Jason Charney

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES