Lesson 3/17 8 min

Reading and understanding AI code

Learn to analyze AI-generated code line by line before using it.

FR EN

L'étude qui fait réfléchir

En 2024, une étude d'Anthropic a mesuré quelque chose de troublant : les développeurs qui utilisent l'IA comme un générateur de code sans le relire montrent une baisse de 17% de compréhension de leur propre codebase après quelques semaines.

Autrement dit : plus vous copiez-collez du code IA sans le comprendre, plus vous perdez la capacité de maintenir votre projet. C'est l'équivalent de prendre un GPS partout et ne plus savoir lire une carte.

La bonne nouvelle : il suffit d'une habitude simple pour éviter ce piège. Expliquer avant de shipper.

La règle "Explain before you ship"

Avant d'intégrer du code IA dans votre projet, posez-vous une question : "Est-ce que je peux expliquer chaque ligne à un collègue ?"

Si la réponse est non, ne shippez pas. Prenez le temps de comprendre. Voici la méthode en 3 étapes :

  1. Lisez ligne par ligne : pas en diagonale, mais chaque instruction
  2. Surlignez ce que vous ne comprenez pas : une variable mystérieuse, une syntaxe inconnue, une logique obscure
  3. Demandez à l'IA d'expliquer CE point précis : pas "explique ce code", mais "explique ce que fait array_reduce ici et pourquoi pas une boucle foreach"

La technique "teach the AI" : expliquez le code à l'IA comme si elle ne le connaissait pas. "Ce code fait X, puis Y, puis Z." Si l'IA vous corrige, c'est que vous aviez mal compris une partie.

Patterns courants qui semblent corrects

L'IA génère souvent du code qui a l'air correct mais qui contient des bugs subtils. Voici les pièges les plus fréquents :

  • Off-by-one : boucles qui itèrent une fois de trop ou de moins. L'IA confond souvent < et <=
  • Null check manquant : l'IA suppose que les données existent toujours. Elle oublie que document.querySelector() peut retourner null
  • Injection SQL : l'IA génère parfois des concaténations de strings au lieu de requêtes préparées, surtout dans les exemples "simples"
  • Logique inversée : conditions if/else qui font le contraire de ce qui est décrit dans les commentaires

Le code IA est comme le code d'un stagiaire brillant : syntaxiquement correct, structurellement cohérent, mais potentiellement dangereux dans les détails.

Exercice de lecture

Regardez ce code généré par l'IA pour une fonction de recherche utilisateur. Trois lignes sont commentées avec "// Que fait cette ligne ?" : essayez de répondre avant de lire la suite :

function findUser(users, searchTerm) {
    const term = searchTerm.toLowerCase();        // Que fait cette ligne ?
    return users.filter(user =>
        user.name.toLowerCase().includes(term)    // Que fait cette ligne ?
    )[0];                                         // Que fait cette ligne ?
}

Réponses :

  • Ligne 2 : convertit le terme de recherche en minuscules pour une recherche insensible à la casse
  • Ligne 4 : filtre les utilisateurs dont le nom (en minuscules) contient le terme recherché
  • Ligne 5 : prend le premier résultat du tableau filtré : attention : retourne undefined si aucun utilisateur ne correspond

Bug subtil : que se passe-t-il si searchTerm est null ? La ligne 2 plantera avec TypeError: Cannot read property 'toLowerCase' of null. L'IA n'a pas ajouté de validation d'entrée.

The study that makes you think

In 2024, a study from Anthropic measured something troubling: developers who use AI as a code generator without rereading it show a 17% drop in comprehension of their own codebase after a few weeks.

In other words: the more you copy-paste AI code without understanding it, the more you lose the ability to maintain your project. It is the equivalent of using GPS everywhere and no longer knowing how to read a map.

The good news: one simple habit is enough to avoid this trap. Explain before you ship.

The "Explain before you ship" rule

Before integrating AI code into your project, ask yourself one question: "Can I explain every line to a colleague?"

If the answer is no, do not ship. Take the time to understand. Here is the 3-step method:

  1. Read line by line — not skimming, but each instruction
  2. Highlight what you do not understand — a mysterious variable, unknown syntax, obscure logic
  3. Ask the AI to explain THAT specific point — not "explain this code", but "explain what array_reduce does here and why not a foreach loop"

The "teach the AI" technique: explain the code to the AI as if it does not know it. "This code does X, then Y, then Z." If the AI corrects you, it means you misunderstood a part.

Common patterns that look correct

AI often generates code that looks correct but contains subtle bugs. Here are the most frequent traps:

  • Off-by-one — loops that iterate one time too many or too few. AI often confuses < and <=
  • Missing null check — AI assumes data always exists. It forgets that document.querySelector() can return null
  • SQL injection — AI sometimes generates string concatenations instead of prepared statements, especially in "simple" examples
  • Inverted logic — if/else conditions that do the opposite of what is described in the comments

AI code is like the code of a brilliant intern: syntactically correct, structurally coherent, but potentially dangerous in the details.

Reading exercise

Look at this AI-generated code for a user search function. Three lines are commented with "// What does this line do?" — try to answer before reading on:

function findUser(users, searchTerm) {
    const term = searchTerm.toLowerCase();        // What does this line do?
    return users.filter(user =>
        user.name.toLowerCase().includes(term)    // What does this line do?
    )[0];                                         // What does this line do?
}

Answers:

  • Line 2: converts the search term to lowercase for case-insensitive search
  • Line 4: filters users whose name (lowercased) contains the search term
  • Line 5: takes the first result from the filtered array — warning: returns undefined if no user matches

Subtle bug: what happens if searchTerm is null? Line 2 will crash with TypeError: Cannot read property 'toLowerCase' of null. The AI did not add input validation.

Avec l'IA

Testez la technique 'teach the AI'. Copiez ce prompt dans Claude :

Je vais t'expliquer ce que fait cette fonction JavaScript, et tu me dis si j'ai bien compris : la fonction findUser prend un tableau d'utilisateurs et un terme de recherche. Elle convertit le terme en minuscules, puis filtre les utilisateurs dont le nom contient ce terme, et retourne le premier résultat. Est-ce que mon explication est correcte ? Qu'est-ce que j'ai oublié ?
Ré-explique sans regarder

Sans relire : un collègue colle du code de l'IA et veut le merger tout de suite. Avec tes mots, explique-lui la règle « Explain before you ship » et pourquoi elle protège le projet.

Une bonne explication dit : on ne shippe pas une ligne qu'on ne saurait pas justifier à un collègue. Concrètement : lire ligne par ligne, surligner ce qu'on ne comprend pas, puis demander à l'IA d'expliquer CE point précis (pas « explique ce code »). L'enjeu n'est pas le style : c'est qu'on reste capable de maintenir et debugger le projet. Sans ça, on perd la compréhension de sa propre codebase (les fameux -17%).
Exercice : Trouvez les bugs

Ce code IA semble correct mais contient 3 problèmes. Décrivez-les ci-dessous. Indices : pensez à la validation d'entrée, aux cas limites, et à la sécurité.

function getUserAge(birthDate) {
    const today = new Date();
    const birth = new Date(birthDate);
    const age = today.getFullYear() - birth.getFullYear();
    return age;
}
Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA une fonction qui renvoie le prix TTC d'un panier. Tu la relis ligne par ligne avant de la merger. Tu l'acceptes telle quelle ou tu la rejettes ?

function totalTTC(items) {
    let total = 0;
    for (let i = 0; i <= items.length; i++) {
        total += items[i].price;
    }
    return total * 1.2; // TVA 20%
}
Rejeter. C'est le piège off-by-one de la leçon : i <= items.length fait une itération de trop. Au dernier tour, items[items.length] vaut undefined, et undefined.price jette TypeError. Le code « a l'air » correct (commentaire TVA rassurant, structure propre), mais il plante dès le premier appel. Correctif : i < items.length. C'est exactement pourquoi on relit ligne par ligne au lieu de faire confiance à l'allure du code.
Rappel libre

Sans remonter dans la leçon : en une phrase, que dit la règle « Explain before you ship », et cite deux pièges fréquents du code IA qui « a l'air » correct.

« Explain before you ship » : ne pas intégrer de code qu'on ne saurait pas expliquer ligne par ligne à un collègue. Pièges fréquents (deux suffisent) : off-by-one (< vs <=), null check manquant (querySelector() qui renvoie null), injection SQL par concaténation, logique inversée dans un if/else.
Que montre l'étude Anthropic sur la compréhension ?
La meilleure façon de vérifier qu'on comprend le code ?
Si l'IA génère du code que vous ne comprenez pas, vous devez :
Next step

You can now read and understand what the AI produces. The catch is that one huge request at once yields unreadable code. The next lesson, decompose and iterate, shows how to slice a feature into small steps the AI handles cleanly, one at a time.

Lesson 4: Decompose and iterate →
Besoin d'un développeur pour votre projet ?

Réponse sous 24h · Sans engagement