août 2025

Une subtilité en Javascript que dorénavant les dév junior ne connaissent pas

En javascript, le mot clé this peut se comporter de façon inattendue. Pour les personnes qui sont habituées à programmer en Java ou en C++, le mot clé 10 représente l’objet lui-même.

En JavaScript, le mot clé this aussi représente un objet, mais cela dépend de sa position dans le code. Nous allons voir que dans une fonction qui fait appel au mot clé 10, dans un console.log par exemple, le mot clé this représente l’objet dans lequel il se trouve, ou non. Nous allons voir que dans une fonction qui fait appel au mot clé 10, dans un console.log par exemple, le mot clé this représente l’objet dans lequel il se trouve, ou non. Nous allons voir que dans une fonction qui fait appel au mot clé this , dans un console.log par exemple.

"use strict";

let utilisateur = {
  nom: "Alice",
  direNom: function() {
    console.log("dans direNom -> this.nom =", this.nom);

    function interne() {
      console.log("dans interne -> this.nom =", this.nom);
    }

    interne();
  }
};

utilisateur.direNom();

// sortie
dans direNom -> this.nom = Alice
dans interne -> this.nom = undefined   // ou Window.nom si non strict

Pourquoi donc this change de forme?

utilisateur.direNom()
Ici, this est lié à l’objet utilisateur, donc this.nom = "Alice".

Fonction interne()
Même si elle est définie à l’intérieur de direNom, elle est appelée comme une fonction simple (pas comme une méthode d’objet).
→ Dans ce cas, this ne fait plus référence à utilisateur.

• En mode strict, this = undefined.
• En mode non strict, this = window (dans un navigateur).

En bref la fonction direNom est une propriété de l’objet utilisateur, donc possède un this. La fonction interne() est une fonction non attachée à une propriété de l’objet utilisateur. En strict il vaut undefined, et en non strict il vaut window !

Comment contourner ce piège classique?

Méthode avec that = this

On a le très populaire that = this

"use strict";

let utilisateur = {
    nom: "Alice",
    direNom: function () {
        console.log("dans direNom -> this.nom =", this.nom);
        let that = this
        function interne() {
            console.log("dans interne -> this.nom =", that.nom);
        }

        interne();
    }
};

utilisateur.direNom();

Méthode avec un binding de contexte

Le binding de contexte permet de dire dans le fonction à quoi correspond le this

"use strict";

let utilisateur = {
    nom: "Alice",
    direNom: function () {
        console.log("dans direNom -> this.nom =", this.nom);

        function interne() {
            console.log("dans interne -> this.nom =", this.nom);
        }

        // on lie la fonction interne au contexte courant (this = utilisateur)
        let interneLie = interne.bind(this);

        interneLie();
    }
};

utilisateur.direNom();

Notez que l’on déclare une nouvelle variable pour faire le binding

Méthode avec une fonction flèche

Les fonction flèche n’ont pas leur propre this, donc ils héritent du this du parent.

"use strict";

let utilisateur = {
    nom: "Alice",
    direNom: function () {
        console.log("dans direNom -> this.nom =", this.nom);

        // fonction fléchée : hérite du this de direNom
        const interne = () => {
            console.log("dans interne -> this.nom =", this.nom);
        };

        interne();
    }
};

utilisateur.direNom();

A noter que ici on a une fonction définie dans une autre fonction, en programmation fonctionnelle on appelle cela une closure.

Pour aller plus loin :

7 arrow functions tricks to fix this issue

Dans cet article nous allons mettre en place très simplement une application ReactJS avec un test. Nous allons partir de zéro, on va bootstrapper une application très simple et mettre en place Vitest et lancer notre premier test.

Installation de l’application

Nous allons utiliser Vite

npm create vite@latest react-vitest-demo

cd react-vitest-demo
npm install

Vitest fonctionne comme Jest mais avec les module ESM. J’ai eu des soucis à faire fonctionner Jest avec les modules ESM. Donc Vitest vient à point nommé.

Cependant on va utiliser des librairies de Jest (le framework de test) comme @testing-library/react et @testing-library/jest-dom

npm install -D vitest @testing-library/react @testing-library/jest-dom

ensuite il faut configurer le fichier de configuration de vite vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js'
  }
})

Plus spécifiquement il y a un fichier de setup, qui va initialiser jest-DOM pour avoir des matchers pratiques comme toBeInTheDocument(), dans src/setupTests.js

import '@testing-library/jest-dom'

Il manque un composant à installer jsdom

npm i -D jsdom

Création d’un composant à tester

On va créer un simple composant Hello.jsx

export default function Hello({ name }) {
  return <h1>Hello {name}!</h1>
}

Ainsi que le test du composant

import { render, screen } from '@testing-library/react'
import Hello from './Hello'

test('affiche le nom passé en prop', () => {
  render(<Hello name="Yvon" />)
  expect(screen.getByText(/Hello Yvon!/i)).toBeInTheDocument()
})

On va lancer le test avec la command npm test, donc il faut que dans le package.json, ce script soit présent.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "test": "vitest",
  "test:ui": "vitest --ui"
}

Pour lancer le test:

npm test

Le résultat

PS E:\react-vitest-demo> npm test

> react-vitest-demo@0.0.0 test
> vitest


 DEV  v3.2.4 E:/react-vitest-demo

 ✓ src/Hello.test.jsx (1 test) 16ms
   ✓ affiche le nom passé en prop 16ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  22:09:08
   Duration  675ms (transform 25ms, setup 70ms, collect 68ms, tests 16ms, environment 325ms, prepare 58ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Avoir un visuel de ce que vous testez

Pour ce faire il faut installer le package vitest/ui

npm run test:ui

Test d’un composant interactif (Compteur incrémental)

Code du composant Counter

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Code du composant de test du Counter

import { render, screen, fireEvent } from '@testing-library/react'
import Counter from './Counter'

test('incrémente le compteur quand on clique', () => {
  render(<Counter />)
  const button = screen.getByText('+1')
  fireEvent.click(button)
  expect(screen.getByText(/Count: 1/i)).toBeInTheDocument()
})

Test en ligne de commande

Test graphique

Mise en oeuvre des tests dans Github Actions

L’idée est d’automatiser le déploiement de votre application quand vous faites un git push, avouez que c’est super non? En effet à l’ancienne vous deviez vous connecter à votre terminal de serveur puis faire un git pull. Bien qu’il y ait les webhook de github, qui permettent de s’affranchir de cette étapes, ces derniers ne permettaient pas de faire des processus de déploiement plus sophistiqués. Cet article sur Github Action va vous montrer comment simplement mettre en oeuvre pour un projet front-end, ce processus de déploiement.