Is there a convention for renaming document.querySelector etc in JavaScript?

Question

In the unlikely event that I am

1. writing JavaScript
2. don't want to use a framework like jQuery
3. want to replace frequent calls to 'document.querySelector' with something shorter
4. want my code to still be readable and familiar to new developers who look at it

Are there any abbreviations that are commonly used to replace querySelector, querySelectorAll, etc?

This is a question about naming conventions. I'm not asking how to abbreviate a long function name . For reference, you can do it like this:

 var queryAll = document.querySelectorAll.bind(document);

Answer 1

No, there isn't.

Furthermore, I don't think its a good idea to use abbreviations. Why change the Javascript API for no other reason than to make it shorter?

You could reuse something like $ , but then you might give the reader the impression that you are using an existing library that uses that abbreviation.

Some other considerations:

• What happens if you later decide to add a library that uses the same abbreviation? You need to refactor your code
• What happens if someone wants to reuse some of your code and your abbreviations conflict with there code or libraries.
• With modern editors / IDEs, using abbreviations will not likely reduce the amount of typing if you are using auto fill
• For someone learning Javascript it will most likely make make your source confusing to read.

I've done this in the past only to regret it later. Makes your code less portable.

Short answer. I don't recommend it.

Answer 2

not that I know of

Let's make some

Modern JS oneliner usable in all modern browsers

Selector = (s,c) => (c ?? document).querySelectorAll(s);

Usage

// search in the whole document
Selector('.some, .randomClasses');

// search only in the context of someParent
var someParent = Selector('.give .me .parent')[0];
Selector('img', someParent);

Leverages arrow function expression and Nullish coalescing operator (??) and grouping operator ()
Unless not obvious, this always returns the same stuff, querySelectorAll would, you can easily adjust this to do similar with querySelector maybe naming it eg SelectorOne , you get the picture...

More robust JS with compatibility check

Usage stays the same, but in case someone's worried about it breaking stuff:

if (typeof Selector != "undefined") {
  console.warn('CONFLICT WITH Selector! - please address this issue!')
} else {
  function Selector(selector, current_context) {
    if (typeof current_context == "undefined") {
      current_context = document;
    }

    return current_context.querySelectorAll(selector);
  }
}

Why I chose naming "Selector"

• I chose the naming with uppercase 1st letter on purpose , since interfaces are usually named that way and it slightly decreases risk of conflicting variable for a piggy code on global level
• I didn't name itSelect because that is ambiguous and could imply Selection which is a different experimental interface
• Selector , in HTML&CSS world, is specific enough :)

PS: I really do wonder why they made it so long, when that was the main reason people were using heavy libraries (like old jQuery) instead of doing it in plain JavaScript... I really do hope it was a technical reason...

Answer 3

While there isn't any convention, one other solution that I haven't seen mentioned here would be to declare

const querySelector = (sel, el) => (el ?? document).querySelector(sel);
const querySelectorAll = (sel, el) => (el ?? document).querySelectorAll(sel);

which is inspired from @jave.web's answer in syntax.

The advantages are that this is:

• shorter because you get to ditch document. in case you're selecting from it;
• still completely intelligible for outsiders reading your code. A google search for querySelector will immediately yield results, unlike Selector .

Also, as Steve said, modern IDEs will autocomplete the name anyways so there no need to make it any shorter. Instead of typing doc "tab" .qu "tab" you'll be just typing qu "tab". To me, this seems reasonable.