[{"data":1,"prerenderedAt":2005},["ShallowReactive",2],{"blog-javascript-moderne-pour-developpeurs":3},{"id":4,"title":5,"body":6,"coverImage":1990,"description":1991,"extension":1992,"meta":1993,"navigation":1994,"path":1995,"published":1994,"publishedAt":1996,"readTime":1997,"seo":1998,"stem":1999,"tags":2000,"__hash__":2004},"blog\u002Fblog\u002Fjavascript-moderne-pour-developpeurs.md","JavaScript moderne pour développeurs : les notions qui font la différence",{"type":7,"value":8,"toc":1943},"minimark",[9,14,19,23,27,30,53,57,60,74,79,82,104,215,218,226,229,233,236,240,243,266,299,306,310,313,375,386,390,393,407,411,415,418,472,475,516,519,523,526,555,573,577,580,700,703,717,721,724,728,731,775,779,782,828,831,835,838,928,931,935,939,944,1021,1029,1033,1036,1110,1113,1117,1120,1134,1138,1141,1260,1263,1302,1306,1378,1381,1385,1388,1392,1395,1412,1416,1419,1507,1511,1516,1621,1625,1631,1635,1638,1725,1729,1746,1750,1753,1757,1828,1832,1835,1849,1853,1856,1879,1883,1886,1906,1910,1913,1932,1936,1939],[10,11,13],"h1",{"id":12},"javascript-moderne-pour-développeurs","JavaScript moderne pour développeurs",[15,16,18],"h2",{"id":17},"à-qui-sadresse-ce-chapitre","À qui s'adresse ce chapitre",[20,21,22],"p",{},"Ce chapitre ne vise pas à expliquer les bases du langage. Il s'adresse à une personne qui écrit déjà du code et veut aller plus loin que la simple syntaxe.\nL'objectif est de comprendre les mécanismes qui rendent JavaScript parfois déroutant, mais aussi très puissant : le moteur d'exécution, la portée des variables, les closures, le fonctionnement de l'asynchrone, les modules et quelques bonnes pratiques de production.",[15,24,26],{"id":25},"pourquoi-javascript-mérite-dêtre-compris-en-profondeur","Pourquoi JavaScript mérite d'être compris en profondeur",[20,28,29],{},"Beaucoup de développeurs savent écrire du JavaScript, mais peu comprennent vraiment comment le langage exécute le code.\nCette différence se voit vite dans les bugs récurrents :",[31,32,33,37,40,43,50],"ul",{},[34,35,36],"li",{},"variable accessible au mauvais endroit ;",[34,38,39],{},"valeur inattendue après une mutation ;",[34,41,42],{},"appel asynchrone mal géré ;",[34,44,45,49],{},[46,47,48],"code",{},"this"," mal compris ;",[34,51,52],{},"logique métier dispersée dans trop de fonctions.\nComprendre ces sujets ne sert pas seulement à \"mieux connaître JavaScript\". Cela permet d'écrire du code plus prévisible, plus lisible et plus facile à maintenir.",[15,54,56],{"id":55},"_1-comment-javascript-sexécute-réellement","1. Comment JavaScript s'exécute réellement",[20,58,59],{},"JavaScript n'est pas juste une suite d'instructions lues une par une. Le langage s'exécute dans un environnement qui gère plusieurs mécanismes :",[31,61,62,65,68,71],{},[34,63,64],{},"une pile d'appels pour les fonctions synchrones ;",[34,66,67],{},"une mémoire pour les variables et les objets ;",[34,69,70],{},"une boucle d'événements pour les tâches différées ;",[34,72,73],{},"des files de tâches pour les promesses, les timers et les événements.",[75,76,78],"h3",{"id":77},"le-modèle-mental-utile","Le modèle mental utile",[20,80,81],{},"Quand vous écrivez du JavaScript, le moteur :",[83,84,85,88,91,94,97],"ol",{},[34,86,87],{},"lit votre code ;",[34,89,90],{},"place les appels synchrones dans la pile ;",[34,92,93],{},"exécute le code immédiatement disponible ;",[34,95,96],{},"délègue certaines opérations à l'environnement ;",[34,98,99,100,103],{},"reprend l'exécution quand les callbacks ou les promesses sont prêts.\nC'est ce modèle qui explique pourquoi un ",[46,101,102],{},"setTimeout",", une requête réseau ou une promesse ne bloquent pas toute l'application.",[105,106,111],"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-js shiki shiki-themes github-light github-dark","console.log('A');\nsetTimeout(() => console.log('B'), 0);\nPromise.resolve().then(() => console.log('C'));\nconsole.log('D');\n","js","",[46,112,113,136,167,201],{"__ignoreMap":110},[114,115,118,122,126,129,133],"span",{"class":116,"line":117},"line",1,[114,119,121],{"class":120},"sVt8B","console.",[114,123,125],{"class":124},"sScJk","log",[114,127,128],{"class":120},"(",[114,130,132],{"class":131},"sZZnC","'A'",[114,134,135],{"class":120},");\n",[114,137,139,141,144,148,151,153,155,158,161,165],{"class":116,"line":138},2,[114,140,102],{"class":124},[114,142,143],{"class":120},"(() ",[114,145,147],{"class":146},"szBVR","=>",[114,149,150],{"class":120}," console.",[114,152,125],{"class":124},[114,154,128],{"class":120},[114,156,157],{"class":131},"'B'",[114,159,160],{"class":120},"), ",[114,162,164],{"class":163},"sj4cs","0",[114,166,135],{"class":120},[114,168,170,173,176,179,182,185,187,189,191,193,195,198],{"class":116,"line":169},3,[114,171,172],{"class":163},"Promise",[114,174,175],{"class":120},".",[114,177,178],{"class":124},"resolve",[114,180,181],{"class":120},"().",[114,183,184],{"class":124},"then",[114,186,143],{"class":120},[114,188,147],{"class":146},[114,190,150],{"class":120},[114,192,125],{"class":124},[114,194,128],{"class":120},[114,196,197],{"class":131},"'C'",[114,199,200],{"class":120},"));\n",[114,202,204,206,208,210,213],{"class":116,"line":203},4,[114,205,121],{"class":120},[114,207,125],{"class":124},[114,209,128],{"class":120},[114,211,212],{"class":131},"'D'",[114,214,135],{"class":120},[20,216,217],{},"Dans la plupart des cas, l'ordre affiché sera :",[105,219,224],{"className":220,"code":222,"language":223,"meta":110},[221],"language-text","A\nD\nC\nB\n","text",[46,225,222],{"__ignoreMap":110},[20,227,228],{},"Ce résultat surprend souvent les débutants, mais il devient logique dès qu'on comprend la place des microtâches et des macrotâches dans l'event loop.",[15,230,232],{"id":231},"_2-valeurs-primitives-objets-et-mutation","2. Valeurs primitives, objets et mutation",[20,234,235],{},"JavaScript distingue deux grands types de valeurs : les primitives et les objets.",[75,237,239],{"id":238},"les-primitives","Les primitives",[20,241,242],{},"Les primitives sont immuables :",[31,244,245,248,251,254,257,260,263],{},[34,246,247],{},"string ;",[34,249,250],{},"number ;",[34,252,253],{},"boolean ;",[34,255,256],{},"null ;",[34,258,259],{},"undefined ;",[34,261,262],{},"symbol ;",[34,264,265],{},"bigint.",[105,267,269],{"className":107,"code":268,"language":109,"meta":110,"style":110},"let name = 'Corneille';\nname.toUpperCase();\n",[46,270,271,288],{"__ignoreMap":110},[114,272,273,276,279,282,285],{"class":116,"line":117},[114,274,275],{"class":146},"let",[114,277,278],{"class":120}," name ",[114,280,281],{"class":146},"=",[114,283,284],{"class":131}," 'Corneille'",[114,286,287],{"class":120},";\n",[114,289,290,293,296],{"class":116,"line":138},[114,291,292],{"class":120},"name.",[114,294,295],{"class":124},"toUpperCase",[114,297,298],{"class":120},"();\n",[20,300,301,302,305],{},"Ici, ",[46,303,304],{},"toUpperCase()"," ne modifie pas la chaîne d'origine. Il retourne une nouvelle valeur.",[75,307,309],{"id":308},"les-objets","Les objets",[20,311,312],{},"Les objets, tableaux et fonctions sont des références.",[105,314,316],{"className":107,"code":315,"language":109,"meta":110,"style":110},"const user = { name: 'Corneille' };\nconst admin = user;\nadmin.name = 'Alice';\nconsole.log(user.name); \u002F\u002F Alice\n",[46,317,318,338,350,362],{"__ignoreMap":110},[114,319,320,323,326,329,332,335],{"class":116,"line":117},[114,321,322],{"class":146},"const",[114,324,325],{"class":163}," user",[114,327,328],{"class":146}," =",[114,330,331],{"class":120}," { name: ",[114,333,334],{"class":131},"'Corneille'",[114,336,337],{"class":120}," };\n",[114,339,340,342,345,347],{"class":116,"line":138},[114,341,322],{"class":146},[114,343,344],{"class":163}," admin",[114,346,328],{"class":146},[114,348,349],{"class":120}," user;\n",[114,351,352,355,357,360],{"class":116,"line":169},[114,353,354],{"class":120},"admin.name ",[114,356,281],{"class":146},[114,358,359],{"class":131}," 'Alice'",[114,361,287],{"class":120},[114,363,364,366,368,371],{"class":116,"line":203},[114,365,121],{"class":120},[114,367,125],{"class":124},[114,369,370],{"class":120},"(user.name); ",[114,372,374],{"class":373},"sJ8bj","\u002F\u002F Alice\n",[20,376,377,378,381,382,385],{},"Dans ce cas, ",[46,379,380],{},"user"," et ",[46,383,384],{},"admin"," pointent vers la même référence. C'est un point essentiel pour comprendre les effets de bord.",[75,387,389],{"id":388},"pourquoi-cest-important","Pourquoi c'est important",[20,391,392],{},"En pratique, cela influence :",[31,394,395,398,401,404],{},[34,396,397],{},"la copie d'état ;",[34,399,400],{},"la gestion des formulaires ;",[34,402,403],{},"les mises à jour dans React, Vue ou Nuxt ;",[34,405,406],{},"les fonctions utilitaires qui doivent rester pures.\nLe réflexe à adopter est simple : plus une donnée est partagée, plus vous devez savoir si vous la modifiez ou si vous en créez une copie.",[15,408,410],{"id":409},"_3-scope-hoisting-et-fermeture","3. Scope, hoisting et fermeture",[75,412,414],{"id":413},"le-scope","Le scope",[20,416,417],{},"Le scope définit où une variable est visible.",[105,419,421],{"className":107,"code":420,"language":109,"meta":110,"style":110},"function demo() {\n  const message = 'interne';\n  console.log(message);\n}\ndemo();\n",[46,422,423,434,449,459,464],{"__ignoreMap":110},[114,424,425,428,431],{"class":116,"line":117},[114,426,427],{"class":146},"function",[114,429,430],{"class":124}," demo",[114,432,433],{"class":120},"() {\n",[114,435,436,439,442,444,447],{"class":116,"line":138},[114,437,438],{"class":146},"  const",[114,440,441],{"class":163}," message",[114,443,328],{"class":146},[114,445,446],{"class":131}," 'interne'",[114,448,287],{"class":120},[114,450,451,454,456],{"class":116,"line":169},[114,452,453],{"class":120},"  console.",[114,455,125],{"class":124},[114,457,458],{"class":120},"(message);\n",[114,460,461],{"class":116,"line":203},[114,462,463],{"class":120},"}\n",[114,465,467,470],{"class":116,"line":466},5,[114,468,469],{"class":124},"demo",[114,471,298],{"class":120},[20,473,474],{},"Une variable déclarée à l'intérieur d'une fonction n'est pas accessible à l'extérieur.",[105,476,478],{"className":107,"code":477,"language":109,"meta":110,"style":110},"function demo() {\n  const message = 'interne';\n}\nconsole.log(message); \u002F\u002F ReferenceError\n",[46,479,480,488,500,504],{"__ignoreMap":110},[114,481,482,484,486],{"class":116,"line":117},[114,483,427],{"class":146},[114,485,430],{"class":124},[114,487,433],{"class":120},[114,489,490,492,494,496,498],{"class":116,"line":138},[114,491,438],{"class":146},[114,493,441],{"class":163},[114,495,328],{"class":146},[114,497,446],{"class":131},[114,499,287],{"class":120},[114,501,502],{"class":116,"line":169},[114,503,463],{"class":120},[114,505,506,508,510,513],{"class":116,"line":203},[114,507,121],{"class":120},[114,509,125],{"class":124},[114,511,512],{"class":120},"(message); ",[114,514,515],{"class":373},"\u002F\u002F ReferenceError\n",[20,517,518],{},"Comprendre le scope évite beaucoup d'erreurs de logique.",[75,520,522],{"id":521},"hoisting","Hoisting",[20,524,525],{},"JavaScript \"remonte\" certaines déclarations pendant la phase d'analyse.",[105,527,529],{"className":107,"code":528,"language":109,"meta":110,"style":110},"console.log(title);\nvar title = 'Hello';\n",[46,530,531,540],{"__ignoreMap":110},[114,532,533,535,537],{"class":116,"line":117},[114,534,121],{"class":120},[114,536,125],{"class":124},[114,538,539],{"class":120},"(title);\n",[114,541,542,545,548,550,553],{"class":116,"line":138},[114,543,544],{"class":146},"var",[114,546,547],{"class":120}," title ",[114,549,281],{"class":146},[114,551,552],{"class":131}," 'Hello'",[114,554,287],{"class":120},[20,556,557,558,560,561,564,565,567,568,381,570,572],{},"Avec ",[46,559,544],{},", cela produit souvent une valeur ",[46,562,563],{},"undefined"," plutôt qu'une erreur claire. C'est une des raisons pour lesquelles ",[46,566,544],{}," est désormais à éviter.\nAvec ",[46,569,275],{},[46,571,322],{},", le comportement est plus strict et plus sain.",[75,574,576],{"id":575},"closures","Closures",[20,578,579],{},"Une closure apparaît lorsqu'une fonction garde accès à son scope parent, même après la fin de ce scope.",[105,581,583],{"className":107,"code":582,"language":109,"meta":110,"style":110},"function createCounter() {\n  let count = 0;\n  return function () {\n    count += 1;\n    return count;\n  };\n}\nconst counter = createCounter();\nconsole.log(counter()); \u002F\u002F 1\nconsole.log(counter()); \u002F\u002F 2\n",[46,584,585,594,609,620,633,641,647,652,666,684],{"__ignoreMap":110},[114,586,587,589,592],{"class":116,"line":117},[114,588,427],{"class":146},[114,590,591],{"class":124}," createCounter",[114,593,433],{"class":120},[114,595,596,599,602,604,607],{"class":116,"line":138},[114,597,598],{"class":146},"  let",[114,600,601],{"class":120}," count ",[114,603,281],{"class":146},[114,605,606],{"class":163}," 0",[114,608,287],{"class":120},[114,610,611,614,617],{"class":116,"line":169},[114,612,613],{"class":146},"  return",[114,615,616],{"class":146}," function",[114,618,619],{"class":120}," () {\n",[114,621,622,625,628,631],{"class":116,"line":203},[114,623,624],{"class":120},"    count ",[114,626,627],{"class":146},"+=",[114,629,630],{"class":163}," 1",[114,632,287],{"class":120},[114,634,635,638],{"class":116,"line":466},[114,636,637],{"class":146},"    return",[114,639,640],{"class":120}," count;\n",[114,642,644],{"class":116,"line":643},6,[114,645,646],{"class":120},"  };\n",[114,648,650],{"class":116,"line":649},7,[114,651,463],{"class":120},[114,653,655,657,660,662,664],{"class":116,"line":654},8,[114,656,322],{"class":146},[114,658,659],{"class":163}," counter",[114,661,328],{"class":146},[114,663,591],{"class":124},[114,665,298],{"class":120},[114,667,669,671,673,675,678,681],{"class":116,"line":668},9,[114,670,121],{"class":120},[114,672,125],{"class":124},[114,674,128],{"class":120},[114,676,677],{"class":124},"counter",[114,679,680],{"class":120},"()); ",[114,682,683],{"class":373},"\u002F\u002F 1\n",[114,685,687,689,691,693,695,697],{"class":116,"line":686},10,[114,688,121],{"class":120},[114,690,125],{"class":124},[114,692,128],{"class":120},[114,694,677],{"class":124},[114,696,680],{"class":120},[114,698,699],{"class":373},"\u002F\u002F 2\n",[20,701,702],{},"C'est un mécanisme fondamental en JavaScript. On le retrouve partout :",[31,704,705,708,711,714],{},[34,706,707],{},"dans les factories ;",[34,709,710],{},"dans les modules ;",[34,712,713],{},"dans les fonctions de rappel ;",[34,715,716],{},"dans de nombreuses bibliothèques.",[15,718,720],{"id":719},"_4-fonctions-pures-effets-de-bord-et-composition","4. Fonctions pures, effets de bord et composition",[20,722,723],{},"Un bon code JavaScript repose souvent sur des fonctions simples, prévisibles et réutilisables.",[75,725,727],{"id":726},"fonction-pure","Fonction pure",[20,729,730],{},"Une fonction pure retourne toujours le même résultat pour les mêmes entrées et ne modifie rien à l'extérieur.",[105,732,734],{"className":107,"code":733,"language":109,"meta":110,"style":110},"function add(a, b) {\n  return a + b;\n}\n",[46,735,736,758,771],{"__ignoreMap":110},[114,737,738,740,743,745,749,752,755],{"class":116,"line":117},[114,739,427],{"class":146},[114,741,742],{"class":124}," add",[114,744,128],{"class":120},[114,746,748],{"class":747},"s4XuR","a",[114,750,751],{"class":120},", ",[114,753,754],{"class":747},"b",[114,756,757],{"class":120},") {\n",[114,759,760,762,765,768],{"class":116,"line":138},[114,761,613],{"class":146},[114,763,764],{"class":120}," a ",[114,766,767],{"class":146},"+",[114,769,770],{"class":120}," b;\n",[114,772,773],{"class":116,"line":169},[114,774,463],{"class":120},[75,776,778],{"id":777},"effet-de-bord","Effet de bord",[20,780,781],{},"Un effet de bord survient quand une fonction modifie un état externe, un objet partagé, le DOM ou le réseau.",[105,783,785],{"className":107,"code":784,"language":109,"meta":110,"style":110},"let total = 0;\nfunction addToTotal(value) {\n  total += value;\n}\n",[46,786,787,800,814,824],{"__ignoreMap":110},[114,788,789,791,794,796,798],{"class":116,"line":117},[114,790,275],{"class":146},[114,792,793],{"class":120}," total ",[114,795,281],{"class":146},[114,797,606],{"class":163},[114,799,287],{"class":120},[114,801,802,804,807,809,812],{"class":116,"line":138},[114,803,427],{"class":146},[114,805,806],{"class":124}," addToTotal",[114,808,128],{"class":120},[114,810,811],{"class":747},"value",[114,813,757],{"class":120},[114,815,816,819,821],{"class":116,"line":169},[114,817,818],{"class":120},"  total ",[114,820,627],{"class":146},[114,822,823],{"class":120}," value;\n",[114,825,826],{"class":116,"line":203},[114,827,463],{"class":120},[20,829,830],{},"Les effets de bord sont parfois nécessaires, mais il faut les isoler autant que possible.",[75,832,834],{"id":833},"composition","Composition",[20,836,837],{},"JavaScript devient très puissant quand on compose de petites fonctions plutôt que d'écrire une logique monolithique.",[105,839,841],{"className":107,"code":840,"language":109,"meta":110,"style":110},"const normalize = (value) => value.trim().toLowerCase();\nconst isValid = (value) => value.length > 2;\nconst result = isValid(normalize('  JavaScript  '));\n",[46,842,843,875,905],{"__ignoreMap":110},[114,844,845,847,850,852,855,857,860,862,865,868,870,873],{"class":116,"line":117},[114,846,322],{"class":146},[114,848,849],{"class":124}," normalize",[114,851,328],{"class":146},[114,853,854],{"class":120}," (",[114,856,811],{"class":747},[114,858,859],{"class":120},") ",[114,861,147],{"class":146},[114,863,864],{"class":120}," value.",[114,866,867],{"class":124},"trim",[114,869,181],{"class":120},[114,871,872],{"class":124},"toLowerCase",[114,874,298],{"class":120},[114,876,877,879,882,884,886,888,890,892,894,897,900,903],{"class":116,"line":138},[114,878,322],{"class":146},[114,880,881],{"class":124}," isValid",[114,883,328],{"class":146},[114,885,854],{"class":120},[114,887,811],{"class":747},[114,889,859],{"class":120},[114,891,147],{"class":146},[114,893,864],{"class":120},[114,895,896],{"class":163},"length",[114,898,899],{"class":146}," >",[114,901,902],{"class":163}," 2",[114,904,287],{"class":120},[114,906,907,909,912,914,916,918,921,923,926],{"class":116,"line":169},[114,908,322],{"class":146},[114,910,911],{"class":163}," result",[114,913,328],{"class":146},[114,915,881],{"class":124},[114,917,128],{"class":120},[114,919,920],{"class":124},"normalize",[114,922,128],{"class":120},[114,924,925],{"class":131},"'  JavaScript  '",[114,927,200],{"class":120},[20,929,930],{},"Cette approche améliore la testabilité et réduit la complexité.",[15,932,934],{"id":933},"_5-this-prototypes-et-classes","5. this, prototypes et classes",[75,936,937],{"id":48},[46,938,48],{},[20,940,941,943],{},[46,942,48],{}," dépend du contexte d'appel. C'est une source classique de confusion.",[105,945,947],{"className":107,"code":946,"language":109,"meta":110,"style":110},"const user = {\n  name: 'Corneille',\n  greet() {\n    return `Bonjour ${this.name}`;\n  },\n};\nconsole.log(user.greet());\n",[46,948,949,960,970,977,996,1001,1006],{"__ignoreMap":110},[114,950,951,953,955,957],{"class":116,"line":117},[114,952,322],{"class":146},[114,954,325],{"class":163},[114,956,328],{"class":146},[114,958,959],{"class":120}," {\n",[114,961,962,965,967],{"class":116,"line":138},[114,963,964],{"class":120},"  name: ",[114,966,334],{"class":131},[114,968,969],{"class":120},",\n",[114,971,972,975],{"class":116,"line":169},[114,973,974],{"class":124},"  greet",[114,976,433],{"class":120},[114,978,979,981,984,986,988,991,994],{"class":116,"line":203},[114,980,637],{"class":146},[114,982,983],{"class":131}," `Bonjour ${",[114,985,48],{"class":163},[114,987,175],{"class":131},[114,989,990],{"class":120},"name",[114,992,993],{"class":131},"}`",[114,995,287],{"class":120},[114,997,998],{"class":116,"line":466},[114,999,1000],{"class":120},"  },\n",[114,1002,1003],{"class":116,"line":643},[114,1004,1005],{"class":120},"};\n",[114,1007,1008,1010,1012,1015,1018],{"class":116,"line":649},[114,1009,121],{"class":120},[114,1011,125],{"class":124},[114,1013,1014],{"class":120},"(user.",[114,1016,1017],{"class":124},"greet",[114,1019,1020],{"class":120},"());\n",[20,1022,301,1023,1025,1026,1028],{},[46,1024,48],{}," pointe vers ",[46,1027,380],{}," parce que la méthode est appelée depuis l'objet.\nMais ce comportement change selon la façon dont la fonction est appelée.",[75,1030,1032],{"id":1031},"prototype-et-héritage","Prototype et héritage",[20,1034,1035],{},"JavaScript utilise un modèle basé sur les prototypes.\nLes classes modernes ne suppriment pas ce mécanisme, elles offrent simplement une syntaxe plus lisible par-dessus.",[105,1037,1039],{"className":107,"code":1038,"language":109,"meta":110,"style":110},"class User {\n  constructor(name) {\n    this.name = name;\n  }\n  greet() {\n    return `Bonjour ${this.name}`;\n  }\n}\n",[46,1040,1041,1051,1062,1075,1080,1086,1102,1106],{"__ignoreMap":110},[114,1042,1043,1046,1049],{"class":116,"line":117},[114,1044,1045],{"class":146},"class",[114,1047,1048],{"class":124}," User",[114,1050,959],{"class":120},[114,1052,1053,1056,1058,1060],{"class":116,"line":138},[114,1054,1055],{"class":146},"  constructor",[114,1057,128],{"class":120},[114,1059,990],{"class":747},[114,1061,757],{"class":120},[114,1063,1064,1067,1070,1072],{"class":116,"line":169},[114,1065,1066],{"class":163},"    this",[114,1068,1069],{"class":120},".name ",[114,1071,281],{"class":146},[114,1073,1074],{"class":120}," name;\n",[114,1076,1077],{"class":116,"line":203},[114,1078,1079],{"class":120},"  }\n",[114,1081,1082,1084],{"class":116,"line":466},[114,1083,974],{"class":124},[114,1085,433],{"class":120},[114,1087,1088,1090,1092,1094,1096,1098,1100],{"class":116,"line":643},[114,1089,637],{"class":146},[114,1091,983],{"class":131},[114,1093,48],{"class":163},[114,1095,175],{"class":131},[114,1097,990],{"class":120},[114,1099,993],{"class":131},[114,1101,287],{"class":120},[114,1103,1104],{"class":116,"line":649},[114,1105,1079],{"class":120},[114,1107,1108],{"class":116,"line":654},[114,1109,463],{"class":120},[20,1111,1112],{},"Il est utile de savoir que derrière une classe se cache toujours une chaîne de prototypes.",[75,1114,1116],{"id":1115},"pourquoi-ne-pas-surcharger-le-modèle-objet","Pourquoi ne pas surcharger le modèle objet",[20,1118,1119],{},"En JavaScript, il est souvent plus simple d'utiliser :",[31,1121,1122,1125,1128,1131],{},[34,1123,1124],{},"des objets simples ;",[34,1126,1127],{},"des factories ;",[34,1129,1130],{},"des fonctions utilitaires ;",[34,1132,1133],{},"des classes seulement quand le modèle métier le justifie.\nLe but n'est pas de reproduire un style de programmation par classe par réflexe, mais de choisir la forme la plus claire pour le besoin réel.",[15,1135,1137],{"id":1136},"_6-tableaux-itération-et-transformation-des-données","6. Tableaux, itération et transformation des données",[20,1139,1140],{},"Une grande partie du JavaScript moderne consiste à transformer des tableaux.",[105,1142,1144],{"className":107,"code":1143,"language":109,"meta":110,"style":110},"const users = [\n  { name: 'Alice', active: true },\n  { name: 'Bob', active: false },\n  { name: 'Chloé', active: true },\n];\nconst activeUsers = users.filter((user) => user.active);\nconst names = activeUsers.map((user) => user.name);\n",[46,1145,1146,1158,1175,1189,1202,1207,1234],{"__ignoreMap":110},[114,1147,1148,1150,1153,1155],{"class":116,"line":117},[114,1149,322],{"class":146},[114,1151,1152],{"class":163}," users",[114,1154,328],{"class":146},[114,1156,1157],{"class":120}," [\n",[114,1159,1160,1163,1166,1169,1172],{"class":116,"line":138},[114,1161,1162],{"class":120},"  { name: ",[114,1164,1165],{"class":131},"'Alice'",[114,1167,1168],{"class":120},", active: ",[114,1170,1171],{"class":163},"true",[114,1173,1174],{"class":120}," },\n",[114,1176,1177,1179,1182,1184,1187],{"class":116,"line":169},[114,1178,1162],{"class":120},[114,1180,1181],{"class":131},"'Bob'",[114,1183,1168],{"class":120},[114,1185,1186],{"class":163},"false",[114,1188,1174],{"class":120},[114,1190,1191,1193,1196,1198,1200],{"class":116,"line":203},[114,1192,1162],{"class":120},[114,1194,1195],{"class":131},"'Chloé'",[114,1197,1168],{"class":120},[114,1199,1171],{"class":163},[114,1201,1174],{"class":120},[114,1203,1204],{"class":116,"line":466},[114,1205,1206],{"class":120},"];\n",[114,1208,1209,1211,1214,1216,1219,1222,1225,1227,1229,1231],{"class":116,"line":643},[114,1210,322],{"class":146},[114,1212,1213],{"class":163}," activeUsers",[114,1215,328],{"class":146},[114,1217,1218],{"class":120}," users.",[114,1220,1221],{"class":124},"filter",[114,1223,1224],{"class":120},"((",[114,1226,380],{"class":747},[114,1228,859],{"class":120},[114,1230,147],{"class":146},[114,1232,1233],{"class":120}," user.active);\n",[114,1235,1236,1238,1241,1243,1246,1249,1251,1253,1255,1257],{"class":116,"line":649},[114,1237,322],{"class":146},[114,1239,1240],{"class":163}," names",[114,1242,328],{"class":146},[114,1244,1245],{"class":120}," activeUsers.",[114,1247,1248],{"class":124},"map",[114,1250,1224],{"class":120},[114,1252,380],{"class":747},[114,1254,859],{"class":120},[114,1256,147],{"class":146},[114,1258,1259],{"class":120}," user.name);\n",[20,1261,1262],{},"Les méthodes les plus utiles sont souvent :",[31,1264,1265,1270,1275,1281,1290,1296],{},[34,1266,1267,1269],{},[46,1268,1248],{}," pour transformer ;",[34,1271,1272,1274],{},[46,1273,1221],{}," pour sélectionner ;",[34,1276,1277,1280],{},[46,1278,1279],{},"reduce"," pour agréger ;",[34,1282,1283,381,1286,1289],{},[46,1284,1285],{},"some",[46,1287,1288],{},"every"," pour tester ;",[34,1291,1292,1295],{},[46,1293,1294],{},"find"," pour récupérer un élément ;",[34,1297,1298,1301],{},[46,1299,1300],{},"sort"," pour ordonner.",[75,1303,1305],{"id":1304},"exemple-avec-reduce","Exemple avec reduce",[105,1307,1309],{"className":107,"code":1308,"language":109,"meta":110,"style":110},"const prices = [12, 18, 9];\nconst total = prices.reduce((sum, price) => sum + price, 0);\n",[46,1310,1311,1338],{"__ignoreMap":110},[114,1312,1313,1315,1318,1320,1323,1326,1328,1331,1333,1336],{"class":116,"line":117},[114,1314,322],{"class":146},[114,1316,1317],{"class":163}," prices",[114,1319,328],{"class":146},[114,1321,1322],{"class":120}," [",[114,1324,1325],{"class":163},"12",[114,1327,751],{"class":120},[114,1329,1330],{"class":163},"18",[114,1332,751],{"class":120},[114,1334,1335],{"class":163},"9",[114,1337,1206],{"class":120},[114,1339,1340,1342,1345,1347,1350,1352,1354,1357,1359,1362,1364,1366,1369,1371,1374,1376],{"class":116,"line":138},[114,1341,322],{"class":146},[114,1343,1344],{"class":163}," total",[114,1346,328],{"class":146},[114,1348,1349],{"class":120}," prices.",[114,1351,1279],{"class":124},[114,1353,1224],{"class":120},[114,1355,1356],{"class":747},"sum",[114,1358,751],{"class":120},[114,1360,1361],{"class":747},"price",[114,1363,859],{"class":120},[114,1365,147],{"class":146},[114,1367,1368],{"class":120}," sum ",[114,1370,767],{"class":146},[114,1372,1373],{"class":120}," price, ",[114,1375,164],{"class":163},[114,1377,135],{"class":120},[20,1379,1380],{},"Savoir manipuler les tableaux proprement est indispensable dans les applications modernes, en particulier lorsqu'on traite des données d'API.",[15,1382,1384],{"id":1383},"_7-asynchrone-promesses-et-asyncawait","7. Asynchrone, promesses et async\u002Fawait",[20,1386,1387],{},"Le JavaScript moderne repose énormément sur l'asynchrone.",[75,1389,1391],{"id":1390},"pourquoi-lasynchrone-existe","Pourquoi l'asynchrone existe",[20,1393,1394],{},"Le navigateur ne doit pas bloquer l'interface pendant une opération longue :",[31,1396,1397,1400,1403,1406,1409],{},[34,1398,1399],{},"requête HTTP ;",[34,1401,1402],{},"lecture de fichier ;",[34,1404,1405],{},"timer ;",[34,1407,1408],{},"traitement différé ;",[34,1410,1411],{},"interaction utilisateur.",[75,1413,1415],{"id":1414},"les-promesses","Les promesses",[20,1417,1418],{},"Une promesse représente une valeur qui sera disponible plus tard.",[105,1420,1422],{"className":107,"code":1421,"language":109,"meta":110,"style":110},"fetch('\u002Fapi\u002Fusers')\n  .then((response) => response.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.error(error));\n",[46,1423,1424,1437,1462,1484],{"__ignoreMap":110},[114,1425,1426,1429,1431,1434],{"class":116,"line":117},[114,1427,1428],{"class":124},"fetch",[114,1430,128],{"class":120},[114,1432,1433],{"class":131},"'\u002Fapi\u002Fusers'",[114,1435,1436],{"class":120},")\n",[114,1438,1439,1442,1444,1446,1449,1451,1453,1456,1459],{"class":116,"line":138},[114,1440,1441],{"class":120},"  .",[114,1443,184],{"class":124},[114,1445,1224],{"class":120},[114,1447,1448],{"class":747},"response",[114,1450,859],{"class":120},[114,1452,147],{"class":146},[114,1454,1455],{"class":120}," response.",[114,1457,1458],{"class":124},"json",[114,1460,1461],{"class":120},"())\n",[114,1463,1464,1466,1468,1470,1473,1475,1477,1479,1481],{"class":116,"line":169},[114,1465,1441],{"class":120},[114,1467,184],{"class":124},[114,1469,1224],{"class":120},[114,1471,1472],{"class":747},"data",[114,1474,859],{"class":120},[114,1476,147],{"class":146},[114,1478,150],{"class":120},[114,1480,125],{"class":124},[114,1482,1483],{"class":120},"(data))\n",[114,1485,1486,1488,1491,1493,1496,1498,1500,1502,1504],{"class":116,"line":203},[114,1487,1441],{"class":120},[114,1489,1490],{"class":124},"catch",[114,1492,1224],{"class":120},[114,1494,1495],{"class":747},"error",[114,1497,859],{"class":120},[114,1499,147],{"class":146},[114,1501,150],{"class":120},[114,1503,1495],{"class":124},[114,1505,1506],{"class":120},"(error));\n",[75,1508,1510],{"id":1509},"asyncawait","async\u002Fawait",[20,1512,1513,1515],{},[46,1514,1510],{}," rend le code asynchrone plus lisible.",[105,1517,1519],{"className":107,"code":1518,"language":109,"meta":110,"style":110},"async function loadUsers() {\n  try {\n    const response = await fetch('\u002Fapi\u002Fusers');\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error(error);\n    return [];\n  }\n}\n",[46,1520,1521,1533,1540,1562,1579,1586,1596,1606,1613,1617],{"__ignoreMap":110},[114,1522,1523,1526,1528,1531],{"class":116,"line":117},[114,1524,1525],{"class":146},"async",[114,1527,616],{"class":146},[114,1529,1530],{"class":124}," loadUsers",[114,1532,433],{"class":120},[114,1534,1535,1538],{"class":116,"line":138},[114,1536,1537],{"class":146},"  try",[114,1539,959],{"class":120},[114,1541,1542,1545,1548,1550,1553,1556,1558,1560],{"class":116,"line":169},[114,1543,1544],{"class":146},"    const",[114,1546,1547],{"class":163}," response",[114,1549,328],{"class":146},[114,1551,1552],{"class":146}," await",[114,1554,1555],{"class":124}," fetch",[114,1557,128],{"class":120},[114,1559,1433],{"class":131},[114,1561,135],{"class":120},[114,1563,1564,1566,1569,1571,1573,1575,1577],{"class":116,"line":203},[114,1565,1544],{"class":146},[114,1567,1568],{"class":163}," data",[114,1570,328],{"class":146},[114,1572,1552],{"class":146},[114,1574,1455],{"class":120},[114,1576,1458],{"class":124},[114,1578,298],{"class":120},[114,1580,1581,1583],{"class":116,"line":466},[114,1582,637],{"class":146},[114,1584,1585],{"class":120}," data;\n",[114,1587,1588,1591,1593],{"class":116,"line":643},[114,1589,1590],{"class":120},"  } ",[114,1592,1490],{"class":146},[114,1594,1595],{"class":120}," (error) {\n",[114,1597,1598,1601,1603],{"class":116,"line":649},[114,1599,1600],{"class":120},"    console.",[114,1602,1495],{"class":124},[114,1604,1605],{"class":120},"(error);\n",[114,1607,1608,1610],{"class":116,"line":654},[114,1609,637],{"class":146},[114,1611,1612],{"class":120}," [];\n",[114,1614,1615],{"class":116,"line":668},[114,1616,1079],{"class":120},[114,1618,1619],{"class":116,"line":686},[114,1620,463],{"class":120},[75,1622,1624],{"id":1623},"le-point-clé","Le point clé",[20,1626,1627,1630],{},[46,1628,1629],{},"await"," ne bloque pas tout JavaScript. Il suspend simplement l'exécution de la fonction courante jusqu'à la résolution de la promesse.\nC'est un détail technique important, car il explique pourquoi une interface reste réactive même quand on attend une réponse réseau.",[15,1632,1634],{"id":1633},"_8-modules-et-organisation-du-code","8. Modules et organisation du code",[20,1636,1637],{},"Un projet JavaScript sérieux ne devrait pas être un seul fichier énorme.\nLes modules permettent de découper le code en morceaux cohérents.",[105,1639,1641],{"className":107,"code":1640,"language":109,"meta":110,"style":110},"\u002F\u002F math.js\nexport function sum(a, b) {\n  return a + b;\n}\n\u002F\u002F app.js\nimport { sum } from '.\u002Fmath.js';\nconsole.log(sum(2, 3));\n",[46,1642,1643,1648,1668,1678,1682,1687,1703],{"__ignoreMap":110},[114,1644,1645],{"class":116,"line":117},[114,1646,1647],{"class":373},"\u002F\u002F math.js\n",[114,1649,1650,1653,1655,1658,1660,1662,1664,1666],{"class":116,"line":138},[114,1651,1652],{"class":146},"export",[114,1654,616],{"class":146},[114,1656,1657],{"class":124}," sum",[114,1659,128],{"class":120},[114,1661,748],{"class":747},[114,1663,751],{"class":120},[114,1665,754],{"class":747},[114,1667,757],{"class":120},[114,1669,1670,1672,1674,1676],{"class":116,"line":169},[114,1671,613],{"class":146},[114,1673,764],{"class":120},[114,1675,767],{"class":146},[114,1677,770],{"class":120},[114,1679,1680],{"class":116,"line":203},[114,1681,463],{"class":120},[114,1683,1684],{"class":116,"line":466},[114,1685,1686],{"class":373},"\u002F\u002F app.js\n",[114,1688,1689,1692,1695,1698,1701],{"class":116,"line":643},[114,1690,1691],{"class":146},"import",[114,1693,1694],{"class":120}," { sum } ",[114,1696,1697],{"class":146},"from",[114,1699,1700],{"class":131}," '.\u002Fmath.js'",[114,1702,287],{"class":120},[114,1704,1705,1707,1709,1711,1713,1715,1718,1720,1723],{"class":116,"line":649},[114,1706,121],{"class":120},[114,1708,125],{"class":124},[114,1710,128],{"class":120},[114,1712,1356],{"class":124},[114,1714,128],{"class":120},[114,1716,1717],{"class":163},"2",[114,1719,751],{"class":120},[114,1721,1722],{"class":163},"3",[114,1724,200],{"class":120},[75,1726,1728],{"id":1727},"bonnes-pratiques-utiles","Bonnes pratiques utiles",[31,1730,1731,1734,1737,1740,1743],{},[34,1732,1733],{},"une fonction = une responsabilité claire ;",[34,1735,1736],{},"un fichier = une intention lisible ;",[34,1738,1739],{},"des exports explicites ;",[34,1741,1742],{},"des noms de variables descriptifs ;",[34,1744,1745],{},"peu de logique cachée.\nCette discipline améliore énormément la maintenabilité.",[15,1747,1749],{"id":1748},"_9-gestion-des-erreurs","9. Gestion des erreurs",[20,1751,1752],{},"En JavaScript, une erreur ignorée finit souvent par devenir un bug difficile à comprendre.",[75,1754,1756],{"id":1755},"utiliser-trycatch-quand-cest-pertinent","Utiliser try\u002Fcatch quand c'est pertinent",[105,1758,1760],{"className":107,"code":1759,"language":109,"meta":110,"style":110},"try {\n  const data = JSON.parse('{ invalid json }');\n  console.log(data);\n} catch (error) {\n  console.error('Impossible de parser le JSON', error);\n}\n",[46,1761,1762,1769,1792,1801,1810,1824],{"__ignoreMap":110},[114,1763,1764,1767],{"class":116,"line":117},[114,1765,1766],{"class":146},"try",[114,1768,959],{"class":120},[114,1770,1771,1773,1775,1777,1780,1782,1785,1787,1790],{"class":116,"line":138},[114,1772,438],{"class":146},[114,1774,1568],{"class":163},[114,1776,328],{"class":146},[114,1778,1779],{"class":163}," JSON",[114,1781,175],{"class":120},[114,1783,1784],{"class":124},"parse",[114,1786,128],{"class":120},[114,1788,1789],{"class":131},"'{ invalid json }'",[114,1791,135],{"class":120},[114,1793,1794,1796,1798],{"class":116,"line":169},[114,1795,453],{"class":120},[114,1797,125],{"class":124},[114,1799,1800],{"class":120},"(data);\n",[114,1802,1803,1806,1808],{"class":116,"line":203},[114,1804,1805],{"class":120},"} ",[114,1807,1490],{"class":146},[114,1809,1595],{"class":120},[114,1811,1812,1814,1816,1818,1821],{"class":116,"line":466},[114,1813,453],{"class":120},[114,1815,1495],{"class":124},[114,1817,128],{"class":120},[114,1819,1820],{"class":131},"'Impossible de parser le JSON'",[114,1822,1823],{"class":120},", error);\n",[114,1825,1826],{"class":116,"line":643},[114,1827,463],{"class":120},[75,1829,1831],{"id":1830},"lidée-importante","L'idée importante",[20,1833,1834],{},"Ne vous contentez pas d'attraper l'erreur. Il faut aussi décider :",[31,1836,1837,1840,1843,1846],{},[34,1838,1839],{},"faut-il afficher un message lisible ?",[34,1841,1842],{},"faut-il relancer l'erreur ?",[34,1844,1845],{},"faut-il retourner une valeur de secours ?",[34,1847,1848],{},"faut-il journaliser l'incident ?\nDans un contexte professionnel, une gestion d'erreur propre fait partie du contrat de qualité du code.",[15,1850,1852],{"id":1851},"_10-ce-quun-développeur-intermédiaire-doit-surveiller","10. Ce qu'un développeur intermédiaire doit surveiller",[20,1854,1855],{},"Quand on écrit du JavaScript à un niveau plus avancé, les points les plus importants sont souvent les suivants :",[31,1857,1858,1861,1864,1867,1870,1873,1876],{},[34,1859,1860],{},"limiter les mutations non contrôlées ;",[34,1862,1863],{},"éviter les variables globales ;",[34,1865,1866],{},"préférer des fonctions courtes et ciblées ;",[34,1868,1869],{},"comprendre le cycle de vie des promesses ;",[34,1871,1872],{},"maîtriser le scope et les closures ;",[34,1874,1875],{},"savoir quand utiliser un objet simple ou une classe ;",[34,1877,1878],{},"séparer clairement logique métier et logique d'affichage.",[15,1880,1882],{"id":1881},"_11-les-erreurs-fréquentes-même-chez-les-développeurs-confirmés","11. Les erreurs fréquentes, même chez les développeurs confirmés",[20,1884,1885],{},"Même avec de l'expérience, certains pièges reviennent souvent :",[31,1887,1888,1891,1894,1900,1903],{},[34,1889,1890],{},"oublier qu'une fonction asynchrone retourne une promesse ;",[34,1892,1893],{},"confondre mutation et copie ;",[34,1895,1896,1897,1899],{},"mal interpréter ",[46,1898,48],{}," ;",[34,1901,1902],{},"trop complexifier un objet alors qu'une simple structure suffit ;",[34,1904,1905],{},"écrire du code trop couplé au DOM ou à l'API.\nLe bon réflexe est de revenir aux bases : quelle est la responsabilité de cette fonction, quelle donnée elle reçoit, que renvoie-t-elle, et que modifie-t-elle réellement ?",[15,1907,1909],{"id":1908},"_12-résumé","12. Résumé",[20,1911,1912],{},"Si vous deviez retenir l'essentiel, ce serait ceci :",[31,1914,1915,1918,1921,1924,1929],{},[34,1916,1917],{},"JavaScript s'exécute dans un modèle précis qui mélange synchronicité et asynchronisme ;",[34,1919,1920],{},"le scope, les closures et la mutation expliquent une grande partie des comportements surprenants ;",[34,1922,1923],{},"les tableaux, les fonctions pures et les modules structurent un code plus propre ;",[34,1925,1926,1928],{},[46,1927,1510],{}," et les promesses sont centraux dans les applications modernes ;",[34,1930,1931],{},"un bon code JavaScript reste simple, lisible et prévisible.",[15,1933,1935],{"id":1934},"prochaine-étape","Prochaine étape",[20,1937,1938],{},"Une fois ces notions bien comprises, vous êtes prêt à écrire du JavaScript plus robuste dans un vrai projet frontend ou backend, avec moins de surprises et de meilleures décisions techniques.",[1940,1941,1942],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":110,"searchDepth":138,"depth":138,"links":1944},[1945,1946,1947,1950,1955,1960,1965,1970,1973,1979,1982,1986,1987,1988,1989],{"id":17,"depth":138,"text":18},{"id":25,"depth":138,"text":26},{"id":55,"depth":138,"text":56,"children":1948},[1949],{"id":77,"depth":169,"text":78},{"id":231,"depth":138,"text":232,"children":1951},[1952,1953,1954],{"id":238,"depth":169,"text":239},{"id":308,"depth":169,"text":309},{"id":388,"depth":169,"text":389},{"id":409,"depth":138,"text":410,"children":1956},[1957,1958,1959],{"id":413,"depth":169,"text":414},{"id":521,"depth":169,"text":522},{"id":575,"depth":169,"text":576},{"id":719,"depth":138,"text":720,"children":1961},[1962,1963,1964],{"id":726,"depth":169,"text":727},{"id":777,"depth":169,"text":778},{"id":833,"depth":169,"text":834},{"id":933,"depth":138,"text":934,"children":1966},[1967,1968,1969],{"id":48,"depth":169,"text":48},{"id":1031,"depth":169,"text":1032},{"id":1115,"depth":169,"text":1116},{"id":1136,"depth":138,"text":1137,"children":1971},[1972],{"id":1304,"depth":169,"text":1305},{"id":1383,"depth":138,"text":1384,"children":1974},[1975,1976,1977,1978],{"id":1390,"depth":169,"text":1391},{"id":1414,"depth":169,"text":1415},{"id":1509,"depth":169,"text":1510},{"id":1623,"depth":169,"text":1624},{"id":1633,"depth":138,"text":1634,"children":1980},[1981],{"id":1727,"depth":169,"text":1728},{"id":1748,"depth":138,"text":1749,"children":1983},[1984,1985],{"id":1755,"depth":169,"text":1756},{"id":1830,"depth":169,"text":1831},{"id":1851,"depth":138,"text":1852},{"id":1881,"depth":138,"text":1882},{"id":1908,"depth":138,"text":1909},{"id":1934,"depth":138,"text":1935},null,"Un chapitre orienté développeurs pour mieux comprendre le modèle d'exécution de JavaScript, le scope, les closures, l'asynchrone, les modules et les pratiques utiles en production.","md",{},true,"\u002Fblog\u002Fjavascript-moderne-pour-developpeurs","2026-06-01",18,{"title":5,"description":1991},"blog\u002Fjavascript-moderne-pour-developpeurs",[2001,2002,2003],"JavaScript","Intermédiaire","Frontend","MDciU8fsFRQouUIaq6lVN3fG1zVB3fWf4tDGdxsmzi8",1788219651477]