Suite à une récente expérience d'entretien, j'ai été confronté à plusieurs questions portant sur des concepts fondamentaux du développement front end. Cette session m'a rappelé l'importance d'une révision continue et approfondie des bases techniques. L'oubli ou le manque de pratique peuvent rapidement entraîner des lacunes dans les compétences.

1. Ordre d'exécution : async/await et Promises

Examinons le code suivant pour comprendre le mécanisme de la boucle d'événements JavaScript :

async function premierAExecuter() {
  console.log('debut premierAExecuter');
  await deuxiemeAExecuter();
  console.log('fin premierAExecuter');
}

async function deuxiemeAExecuter() {
  console.log('deuxiemeAExecuter');
}

console.log('debut script');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

premierAExecuter();

new Promise(function(resolve) {
  console.log('promise debut');
  resolve();
}).then(function() {
  console.log('promise fin');
});

console.log('fin script');

La règle d'or ici est la suivante : les opérations synchrones s'exécutent en premier, suivies des opérations asynchrones. Parmi celles-ci, les micro-tâches (Promises, async/await) sont traitées avant les macro-tâches (setTimeout). L'instruction await suspend l'exécution de la fonction async jusqu'à ce que la Promise associée soit résolue, mais le code suivant await dans la même fonction sera immédiatement exécuté.

L'ordre d'exécution correct est le suivant :

debut script
debut premierAExecuter
deuxiemeAExecuter
promise debut
fin script
fin premierAExecuter
promise fin
setTimeout

2. Comportement de this

Le contexte d'exécution de this est une source fréquente d'erreurs. Analysons différents scénarios :

Cas 1 : Méthode d'objet classique et setTimeout avec fonction anonyme

let monObjet = {
  methode: function() {
    console.log('this externe:', this);
    setTimeout(function() {
      console.log('this interne (function):', this);
    });
  }
};
monObjet.methode();

Dans ce cas, la première sortie sera monObjet. En raison de la fonction anonyme dans le setTimeout, le this interne pointera vers l'objet global (window en environnement navigateur).

Cas 2 : Méthode d'objet classique et setTimeout avec fonction fléchée

let monObjet = {
  methode: function() {
    console.log('this externe:', this);
    setTimeout(() => {
      console.log('this interne (arrow function):', this);
    });
  }
};
monObjet.methode();

Ici, après avoir affiché monObjet pour le this externe, le this interne affichera également monObjet. Les fonctions fléchées ne possèdent pas leur propre contexte this ; elles héritent de celui de leur portée englobante lexicale.

Cas 3 : Méthode d'objet fléchée et setTimeout avec fonction anonyme

let monObjet = {
  methode: () => {
    console.log('this externe:', this);
    setTimeout(function() {
      console.log('this interne (function):', this);
    });
  }
};
monObjet.methode();

Étant donné que la méthode elle-même est une fonction fléchée, son this pointe vers la portée globale (window). Le setTimeout avec une fonction anonyme conservera également ce contexte global.

Cas 4 : Méthode d'objet fléchée et setTimeout avec fonction fléchée

let monObjet = {
  methode: () => {
    console.log('this externe:', this);
    setTimeout(() => {
      console.log('this interne (arrow function):', this);
    });
  }
};
monObjet.methode();

Dans cette configuration, les deux sorties seront window, car la méthode hérite du contexte global, et la fonction fléchée du setTimeout hérite également de ce même contexte.

Cas 5 : Appel direct d'une fonction dans setTimeout

Il est important de noter que passer une fonction directement comme argument à setTimeout sans l'envelopper dans une autre fonction ou l'appeler, comme dans le code suivant, peut conduire à des résultats inattendus selon la définition de la méthode.

let monObjet = {
  methode: function() {
    console.log('this dans methode:', this);
    setTimeout(
      console.log('this dans setTimeout:', this) // Appel direct de console.log
    );
  }
};
monObjet.methode();

Le comportement ici peut varier, mais généralement, la première sortie sera monObjet, suivie de monObjet à nouveau si this est correctement lié dans le contexte du setTimeout.

Résumé sur this :

1. Dans une fonction méthode d'un objet, this fait référence à l'objet lui-même, sauf si la méthode est une fonction fléchée.

2. Les fonctions fléchées n'ont pas de this propre ; elles héritent du this de leur portée parente.

3. Dans les fonctions anonymes passées en callback (par exemple, à setTimeout) sans contexte spécifique, this fait généralement référence à l'objet global (window).

4. L'utilisation de fonctions fléchées dans les callbacks préserve le contexte this de la portée externe.

5. Forcer la mise à jour de données non réactives dans Vue 2

Lorsque des données imbriquées profondément ou ajoutées après l'initialisation du composant ne sont pas réactives, Vue 2 ne peut pas les détecter. Pour forcer une mise à jour, utilisez l'une des approches suivantes :

• Effectuer une opération de remplacement de tableau ou d'objet.
• Utiliser l'instance de Vue this.$set(objet, cle, valeur).

4. Différences entre localStorage et sessionStorage

• Persistance : localStorage conserve les données indéfiniment, même après la fermeture du navigateur, jusqu'à suppression manuelle. sessionStorage est limité à la session du navigateur ; les données sont effacées à la fermeture de l'onglet ou du navigateur.
• Partage entre onglets : Sous le même domaine et le même navigateur, localStorage est partagé entre tous les onglets ou fenêtres. sessionStorage est spécifique à chaque onglet/fenêtre.

Ces points couvrent des aspects essentiels du développement frontend, soulignant l'importance d'une compréhension solide des mécanismes internes de JavaScript et des frameworks.