DEV Community

Discussion on: JavaScript Cheatsheet from beginners to advance..

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

A few things I would like to add:

  • If you add js next to the triple backtick in your code snippets, you get syntax highlight, which makes reading those way better.
  • The default for script is text/javascript, so there's actually no need for type="text/javascript". You could instead use type="module" which enables modern JS imports.
  • Functions can be written in a variety of ways:
function nameOfFunction (arg) { return arg; }
const nameOfFunction = function (arg) { return arg; }
const nameOfFunction = arg => { return arg; }
const nameOfFunction = arg => arg;
Enter fullscreen mode Exit fullscreen mode
  • Besides innerHTML you also have textContent (ideal to just update the text content of an element). Generally speaking, you should try to avoid innerHTML which is kinda dangerous.
  • if/else/if can be written with nesting as well, which is a matter of preference, but I prefer this because is clearer about the nesting:
if (condition1) {
    // block of code to be executed if condition1 is true
} else {
    if (condition2) {
        // block of code to be executed if the condition1 is false and condition2 is true
    } else {
        // block of code to be executed if the condition1 is false and condition2 is false
    }
}
Enter fullscreen mode Exit fullscreen mode
  • for has other alternatives, like for..of:
for (const item of array) {}
Enter fullscreen mode Exit fullscreen mode
  • Instead of String.prototype.charAt, you can just string[index].
  • String.prototype.replace needs a second argument with the replacement value.
  • There are other ways to join arrays besides Array.prototype.concat, like using spread: [...array1, ...array2]. Is generally more slow, but worth mentioning.
  • Array.prototype.pop not only removes the last element, it also returns it (not ideal when working with immutable environments).
  • Array.prototype.sort takes a method to set the sorting, if not set it defaults to string sorting, which means it puts 100 before 11.
  • Some of the toString methods can be replaced with just a template literal.
  • When working with Date, ideally you should try to use the getUTC methods (getUTCMinutes, getUTCMonth and so on).
  • There is some talk to remove alert, confirm, prompt and dialogs like that from the browsers, so you might be better creating your own.
  • document.getElementsByClassName("foo") can be replaced with document.querySelectorAll(".foo").
  • document.getElementById("foo") can be replaced with document.querySelector("#foo").

Cheers!

Collapse
mrdanielschwarz profile image
Daniel Schwarz

You beat me to it!

However, document.querySelector("#foo") instead of document.querySelectorAll("#foo") should do fine since there shouldn't be duplicates of IDs anyway.

Collapse
mightycoderx profile image
MightyCoderX

Just use getElemenyById('foo') for elements with 'foo' id

Collapse
lukeshiru profile image
LUKESHIRU

Indeed! That's a bad copy/paste of mine.

Collapse
klukiyan profile image
Kiril Lukiyan

That moment when a comment has way more useful info than the article 😊

Collapse
iftikhar profile image
iftikhar hussain

yeah absolutely.

Collapse
iftikhar profile image
iftikhar hussain

Awesom, you should post the cheatsheet, thanks

Collapse
emperor100 profile image
Ravikant

Nice content...
(One typo in 11th bullet, protytype)

Collapse
anmolraj profile image
Anmol Raj Author

Thanks brother..💚