Almost all the Codepens I've written this year have had some form of a JavaScript function that I call . That's not a typo! There are two sets of parenthesis following it, and it is good practice as this function uses . In just one line, I create a Swiss Army knife of several functions. qs()() closures Here's what it looks like. qs = (query,all) => ( (parent) === ) ? qs(qs()(parent))(query,all) : (parent|| )[ ](query); var => parent typeof "string" document `querySelector ` ${(all|| )? : } false "All" "" That's a lot going on in just one line of code, let's break it down. qs = { { ( (parent) === ){ parent_query = qs()(parent); qs(parent_query)(query,all); } { parent_element = (parent|| ); select_all = (all|| ); (select_all){ parent_element.querySelectorAll(query); } { parent_element.querySelector(query); } } } } /* @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. * @param all : (@default is false) A Boolean which will look for one element (false) or more than one element (true). * @returns: * null if nothing is found and all is false. * Node if query is found and all is false. * NodeList if all is true even if no Nodes are found. */ var ( ) function parent return ( ) function query if typeof "string" // If parent is a string, do a queryString on the parent. let return else // If parent is NOT a string, do the following // If parent is undefined, use document instead. (This is common) var document // If select_all is not defined, use false instead. var false if // Return the NodeList of all Nodes that match the query inside the parent element. // Returns an empty NodeList if there are no matches. return else // Return the Node that matches the query inside the parent element // Return null if no match return // inner function // outer function You may have noticed there is a little bit of a recursion if is a string. This is so that if you choose to modify elements inside of an element, you can do so without having to call another command. parent qs()() In older version of this function, much of what goes in in was in separate functions. While it may also be faster to use other functions such as or (which often will be ), which return a , I find using and to be the most ideal functions to use primarily because query searches are . If the argument is a string it can also be a CSS selector, acting as a document-wide filter. qs()() element .getElementById() element .getElementsByClassName() element document HTMLCollection element .querySelector() element .querySelectorAll() CSS Selectors parent If there is no argument, the default value will be used. If using an extra pair of parenthesis doesn't work well for you, you could define a new function. parent document dqs = qs( ); var document "Wait? Where's the second set of parenthesis?" Closures are rather interesting. I used to do a lot of programming in C++ back in college, so you could probably say that our parent function is a template for what the child function can do. could be though of as closures that used data types to define what kind of argument you could use before using a function. Maybe the ECMA committee will eventually move toward using data types in ECMAScript eventually, especially since . qs( parent ) Templates in C++ TypeScript uses data types So what can we use our function for, and how would it work differently if we used ? Basically it work the same way. dqs() qs()() dqsDiv = dqs( ); qsdDiv = qs( )( ); qsDiv = qs()( ); // This var "#div1" // does the same thing as this var document "#div1" // And so does this because `document` is the default `parent` value. var "#div1" All three of those statements will be assigned the same element that has the id . div1 The other feature of is the last argument in the second tuple, the variable. This variable is and optional Boolean value (meaning it can be either or ). The default value for is unless is defined to be . When it is , is used instead of . qs()() all true false all false all true true element .querySelectorAll() element .querySelector() Let's break down the latter part of : qs()() select_all = (all|| ); callback = (select_all) ? : ; parent_callback = parent[callback]; parent_callback(query); var false var "querySelectorAll" "querySelector" var Our first line we already stated means that is the value of unless is not defined then it will be set to . The second line defines the string of the name of which will be used. The callback name must be the name of a function that is part of the class or interface of the data type that is. We've already stated that the argument is either an or type. select_all all false callback function parent parent Element Document Because members, which are , can be called using the ( ) or the ( ), we can take advantage of the array method, because the is a , which will return the which can be any type including the type which we are looking for. So on the third line, the variable represents a function. We just need to add the arguments outside the variable to the right, which is what happens on the last line. So with some substitutions, we can contract all all this information. Object key-value pairs dot method object.member array method object["member"] key "member" String value Function parent_callback select_all = (all|| ); callback = + ((select_all) ? : ); parent[callback](query); var false // Let's rephrase callback var "querySelector" "All" "" // combine the third and fourth lines Now let's use a template string on the second line. select_all = (all|| ); callback = ; parent[callback](query); var false // Template string instead of concatenation var `querySelector ` ${(select_all)? : } "All" "" // combine the third and fourth lines Finally some variable substitution. Goodbye, and . select_all callback parent[ ](query); // combine the all our lines `querySelector ` ${(all|| )? : } false "All" "" Look how much is done. Now remember is optional, so we need to make sure that can be used when is not. parent document parent (parent|| )[ ](query); document `querySelector ` ${(all|| )? : } false "All" "" That's the false half of . qs()() So why use this instead of some long named command? If you've used jQuery, which you should really stop doing because and is a terrible excuse not to learn "vanilla" JavaScript, and by "vanilla" I mean no-framework JavaScript not the framework , you may be familiar with the or function. The problem with using that, is that it returns another object. will return ether a or because it uses and . more than likely you don't need it Vanilla JS jQuery() $() jQuery qs()() Node NodeList querySelector() querySelectorAll() replaces the need to use . replaces the need to use , , and . querySelector() getElementById() querySelectorAll() getElementsByTagName() getElementsByClassName() getElementsByName() But that's with the simple stuff. The and functions have more control than the classic functions, which includes the CSS Selectors. By combining and into a single function we can simplify object calls to just one function instead of four or two. querySelector() querySelectorAll() getElement[s]By*() querySelector() querySelectorAll() While researching this information, I do recognize that some improvements should still be made. Like, it might just be more logical only to use , test the quantity of items returned, and if there is only one item, just return that item instead of needing to tack on a like jQuery's is known for, which would eliminate the variable from . However, I think what I have right now is fine enough as it demonstrates several important features of JavaScript. querySelectorAll() [0] $() all qs()() It's also important to remember, that when you select more than one item and want to map a function to each item, any will return a NOT an . To map, you must convert the to an , which can be done using . And although does have another argument to execute a function, I recommend doing that separately, especially if you want to use other function like or . querySelectorAll() NodeList Array NodeList Array Array.from() Array.from() .map() .reduce() .filter() I hope you've enjoyed this article as much as I've enjoyed writing it. If you'd like me describe some of the other functions I've been using in my projects, such as one ones I've been using to reduce and in some cases eliminate the use of HTML in my projects, let me know in the community.
