javascript - best practices

javascript best practices

coding style

articles

Table of Contents

  • ECMAscript
  • ES6
  • ES2016
  • ES2017
  • ES2018
  • Coding Style
  • Lexical Structure
  • Variables
  • Types
  • Expressions
  • Prototypal Inheritance
  • Classes
  • Exceptions
  • Semicolons
  • Quotes
  • Template Literals
  • Functions
  • Arrow Functions
  • Closures
  • Arrays
  • Loops
  • Events
  • The Event Loop
  • Asynchronous Programming and Callbacks
  • Promises
  • Async and Await
  • Loops and Scope
  • Timers
  • This
  • Strict Mode
  • Immediately-Invoked Function Expressions (IFFE’s)
  • Math Operators
  • The Math Object
  • ES modules
  • CommonJS
  • Glossary

perfs

Intensive JavaScript - developer.mozilla.org

By default the browser uses a single thread to run all the JavaScript in your page as well as to perform layout, reflows, and garbage collection. This means that long-running JavaScript functions can block the thread, leading to an unresponsive page and a bad user experience.

You can use the Frame rate and Waterfall tools to see when JavaScript is causing performance problems, and to single out the particular functions that need attention.

In this article we'll take an example site whose long-running JavaScript causes responsiveness problems, and apply two different approaches to fixing them. The first is to split long-running functions into pieces and use requestAnimationFrame to schedule each piece, and the second is to run the whole function in a separate thread using a web worker.

undefined & null check

javascript strict mode

Strict mode : developer.mozilla.org Le mode strict apporte quelques changements à la sémantique « normale » de JavaScript :

  • le mode strict élimine quelques erreurs silencieuses de JavaScript en les changeant en erreurs explicites (une exception sera levée)
  • le mode strict corrige les erreurs qui font qu'il est difficile pour les moteurs JavaScript d'effectuer des optimisations (exécution plus rapide)
  • le mode strict interdit les mot-clés susceptibles d'être définis dans les futures versions de ECMAScript

online tools

array iteration

Loop through an array in JavaScript : stackoverflow.com

For-each over an array in JavaScript? : stackoverflow.com

Array.forEach n’est pas toujours la meilleure solution ! - blog.overnetcity.com - 20140829

async / await

Coder l’asynchrone en Javascript (Par Matthieu Lux)

Tasks, microtasks, queues and schedules - jakearchibald.com - 20150817

In summary:

  • Tasks execute in order, and the browser may render between them
  • Microtasks execute in order, and are executed:
    • after every callback, as long as no other JavaScript is mid-execution
    • at the end of each task

Commentaire SylvainPV sur dev.com (fil privé) :

Ce qu'il faut retenir, c'est qu'un Promise.resolve n'entraîne pas de "vrai asynchronisme", c'est-à-dire qu'il n'attend pas la prochaine boucle d'événements. On a besoin d'attendre la boucle d'événements pour laisser le navigateur faire le rendu et ne pas avoir de freeze.

JavaScript async/await: The Good Part, Pitfalls and How to Use - hackernoon.com - Charlee Li - 20180607

async/await - javascript.info

TLDR :

The async keyword before a function has two effects:

  1. Makes it always return a promise.
  2. Allows to use await in it.

The await keyword before a promise makes JavaScript wait until that promise settles, and then:

  1. If it’s an error, the exception is generated, same as if throw error were called at that very place.
  2. Otherwise, it returns the result, so we can assign it to a value.

Together they provide a great framework to write asynchronous code that is easy both to read and write.

With async/await we rarely need to write promise.then/catch, but we still shouldn’t forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also Promise.all is a nice thing to wait for many tasks simultaneously.

drawbacks

How to escape async/await hell

TLDR : use successives await when not needed, the program control flow should continue. Use Promise.all when needed.

design patterns

The Comprehensive Guide to JavaScript Design Patterns - www.toptal.com - Marko Mišura - 201803xx

Learning JavaScript Design Patterns - Volume 1.7.0 - Addy Osmani - 2017

Table of Content

  • Introduction
  • What is a Pattern?
  • "Pattern"-ity Testing, Proto-Patterns & The Rule Of Three
  • The Structure Of A Design Pattern
  • Writing Design Patterns
  • Anti-Patterns
  • Categories Of Design Pattern
  • Summary Table Of Design Pattern Categorization
  • JavaScript Design Patterns
    • Constructor Pattern
    • Module Pattern
    • Revealing Module Pattern
    • Singleton Pattern
    • Observer Pattern
    • Mediator Pattern
    • Prototype Pattern
    • Command Pattern
    • Facade Pattern
    • Factory Pattern
    • Mixin Pattern
    • Decorator Pattern
    • Flyweight Pattern
  • JavaScript MV* Patterns
    • MVC Pattern
    • MVP Pattern
    • MVVM Pattern
  • Modern Modular JavaScript Design Patterns
    • AMD
    • CommonJS
    • ES Harmony
  • Design Patterns In jQuery
    • Composite Pattern
    • Adapter Pattern
    • Facade Pattern
    • Observer Pattern
    • Iterator Pattern
    • Lazy Initialization Pattern
    • Proxy Pattern
    • Builder Pattern
  • jQuery Plugin Design Patterns
  • JavaScript Namespacing Patterns
  • Conclusions
  • References

results for ""

    No results matching ""