DEV Community

Discussion on: The Ultimate Javascript Cheatsheet

Collapse
lukeshiru profile image
LUKESHIRU

A few extras:

  • On Page Script: You don't actually need type="text/javascript", so you can simply do:
<script></script>
Enter fullscreen mode Exit fullscreen mode
  • Functions: There are actually several different ways of writing functions:
function nameOfFunction() {
    // function body
}

const nameOfFunction = function () {
    // function body
};

const nameOfFunction = () => {
    // function body
};

const nameOfFunction = argument => returnValue;

(function () {
    // IIFE
})();

(() => {
    // Arrow IIFE
})();
Enter fullscreen mode Exit fullscreen mode
  • Changing content of a DOM Element: You can (and ideally should) change the content of a DOM element using textContent as well:
document.querySelector("element").textContent = `
    If we put HTML here it will not
    be parsed as such (which is more secure)
`;
Enter fullscreen mode Exit fullscreen mode
  • Else-if Statement: Those can be written using blocks, which I believe are bette for readability:
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 Loop: Has other variants far more useful thant the triple statement:
for (const item of array) {
    // loop trough an array, item being the current item
}

for (const prop in object) {
    // loops over an object, property being the property key
}
Enter fullscreen mode Exit fullscreen mode
  • String.prototype.charAt: You can use char[index] instead.
  • String.prototype.concat: You can do this instead:
`${string1}${string2}`;
Enter fullscreen mode Exit fullscreen mode
  • String.prototype.replace: There is a typo on that example. The replace method takes 2 arguments, a string or a RegExp first, and then another string or a callback function as a second argument.

  • Variable: For variables nowadays is better to use either let or const, no var.

  • toString: Is actually not exclusive to Array or Number, but the method called to transform to string objects. If you add that method to your own objects and try to parse them as strings, you'll get whatever that function returns.

  • Dates: There is a proposal coming for an alternative to Date called Temporal (you can learn more about it here), but even if you work with Date for now, ideally you should try to use the UTC and the Locale methods, instead of the old ones. So instead of toString, use toLocaleDateString, or instead of getDate use getUTCDate.

  • Mouse events: Consider taking a look at pointer events, which are designed for the current times.

  • Selectors: Having querySelector and querySelectorAll, other methods like getElementsByTagName and getElementById are redundant:

document.querySelectorAll("tag-name"); // instead of document.getElementsByTagName('tag-name');
document.querySelectorAll(".class-name"); // instead of document.getElementsByClassName('class-name');
document.querySelector("#id"); // instead of document.getElementById('id');
Enter fullscreen mode Exit fullscreen mode
  • Create element: Creating elements with document.createElement works great, until you want to create an SVG element, in such case the syntax looks like this:
document.createElementNS("http://www.w3.org/2000/svg", "svg-element-name");
Enter fullscreen mode Exit fullscreen mode

That's it, cheers!

PS: Remember that in DEV you can get syntax highlight in the code snippets of your posts by adding the language after the triple back-tick.

Collapse
abhirajb profile image
Abhiraj Bhowmick Author

appreciate the effort! thanks a lot!