CINXE.COM

<!DOCTYPE html><html lang="fr" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "EUR";</script><script>window.countryCode = "fr";</script><script>window.rateShopTo = {"EUR":1,"USD":1.078956993853182,"AMD":421.5874435300883};</script><title itemprop="name">Objets</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://fr.javascript.info/object"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://fr.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Objets"><meta property="og:image" content="https://fr.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Objets"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://fr.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/object-basics"><link rel="next" href="/object-copy"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.5ce4add6d34ce3873b87.js"></script><script src="/pack/head.bda20409a4233b435003.js" defer></script><meta property="og:title" content="Objets"><meta property="og:type" content="article"><script src="/pack/tutorial.6dc548047f76247d0296.js" defer></script><script src="/pack/footer.8204c68365693e9309b7.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "fr";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>FR</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/object"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/object"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/object"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/object"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://fr.javascript.info/object"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/object"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/object"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/object"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/object"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/object"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://tr.javascript.info/object"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/object"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/object"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text"><p>Nous souhaitons rendre ce projet open source disponible pour les gens du monde entier.</p> <p><a href="https://javascript.info/translate">Aidez-nous à traduire</a> le contenu de ce tutoriel dans votre langue!</p> </div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">Acheter</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="Rechercher sur Javascript.info" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Recherche</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="Rechercher dans le tutoriel" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Recherche</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Carte du tutoriel</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">Partager</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/object">عربي</option><option value="https://javascript.info/object">English</option><option value="https://es.javascript.info/object">Español</option><option value="https://fa.javascript.info/object">فارسی</option><option value="https://fr.javascript.info/object" selected>Français</option><option value="https://id.javascript.info/object">Indonesia</option><option value="https://it.javascript.info/object">Italiano</option><option value="https://ja.javascript.info/object">日本語</option><option value="https://ko.javascript.info/object">한국어</option><option value="https://learn.javascript.ru/object">Русский</option><option value="https://tr.javascript.info/object">Türkçe</option><option value="https://uk.javascript.info/object">Українська</option><option value="https://zh.javascript.info/object">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="29" max="93" data-tooltip="Cours 29 de 93"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">Tutoriel</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>JavaScript le langage</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/object-basics"><span>Objets: les bases</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriel","item":"https://fr.javascript.info/"},{"@type":"ListItem","position":2,"name":"JavaScript le langage","item":"https://fr.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Objets: les bases","item":"https://fr.javascript.info/object-basics"}]}</script></ol><div class="updated-at" data-tooltip="Dernière mise à jour le 5 mai 2023"><div class="updated-at__content">5 mai 2023</div></div></div><h1 class="main__header-title">Objets</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Objets"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p>Comme nous le savons du chapitre <a href="/types">Les types de données</a>, il existe huit types de données dans le langage JavaScript. Sept d’entre elles sont appelées “primitives”, car leurs valeurs ne contiennent qu’une seule chose (que ce soit une chaîne, un nombre ou autre).</p> <p>En revanche, les objets sont utilisés pour stocker des collections de données variées et d’entités plus complexes. En JavaScript, les objets pénètrent dans presque tous les aspects du langage. Nous devons donc d’abord les comprendre avant d’aller plus loin.</p> <p>Un objet peut être créé avec des accolades <code>{…}</code>, avec une liste optionnelle de <em>propriétés</em>. Une propriété est une paire “clé: valeur”, dans laquelle la clé (<code>key</code>) est une chaîne de caractères (également appelée “nom de la propriété”), et la valeur (<code>value</code>) peut être n’importe quoi.</p> <p>Nous pouvons imaginer un objet comme une armoire avec des fichiers signés. Chaque donnée est stockée dans son fichier par la clé. Il est facile de trouver un fichier par son nom ou d’ajouter/supprimer un fichier.</p> <figure><div class="image" style="width:176px"> <div class="image__ratio" style="padding-top:103.97727272727273%"></div> <object type="image/svg+xml" data="/article/object/object.svg" width="176" height="183" class="image__image" data-use-theme> <img src="/article/object/object.svg" alt="" width="176" height="183"> </object> </div></figure><p>Un objet vide (“armoire vide”) peut être créé en utilisant l’une des deux syntaxes suivantes :</p> <div id="bj42vo055h" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = new Object(); // syntaxe "constructeur d'objet" let user = {}; // syntaxe "littéral objet"</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:37.096774193548384%"></div> <object type="image/svg+xml" data="/article/object/object-user-empty.svg" width="248" height="92" class="image__image" data-use-theme> <img src="/article/object/object-user-empty.svg" alt="" width="248" height="92"> </object> </div></figure><p>Habituellement, les accolades <code>{...}</code> sont utilisées. Cette déclaration s’appelle un littéral objet (<em>object literal</em>).</p> <h2><a class="main__anchor" name="litteraux-et-proprietes" href="#litteraux-et-proprietes">Littéraux et propriétés</a></h2><p>Nous pouvons immédiatement inclure certaines propriétés dans <code>{...}</code> sous forme de paires “clé: valeur” :</p> <div id="whxra20ppq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { // un objet name: "John", // par clé "nom" valeur de stockage "John" age: 30 // par clé "age" valeur de stockage 30 };</code></pre> </div> </div> </div><p>Une propriété a une clé (également appelée “nom” ou “identifiant”) avant les deux points <code>":"</code> et une valeur à sa droite.</p> <p>Dans l’objet <code>user</code>, il y a deux propriétés :</p> <ol> <li>La première propriété porte le nom <code>"name"</code> et la valeur <code>"John"</code>.</li> <li>La seconde a le nom <code>"age"</code> et la valeur <code>30</code>.</li> </ol> <p>L’objet <code>user</code> résultant peut être imaginé comme une armoire avec deux fichiers signés intitulés “nom” et “âge”.</p> <figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user.svg" alt="" width="248" height="173"> </object> </div></figure><p>Nous pouvons ajouter, supprimer et lire des fichiers à tout moment.</p> <p>Les valeurs de propriété sont accessibles à l’aide de la notation par points :</p> <div id="8y58zw1lyw" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// récupère les valeurs de propriété de l'objet : alert( user.name ); // John alert( user.age ); // 30</code></pre> </div> </div> </div><p>La valeur peut être de tout type. Ajoutons un booléen :</p> <div id="a255a1mbo4" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>user.isAdmin = true;</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user-isadmin.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user-isadmin.svg" alt="" width="248" height="173"> </object> </div></figure><p>Pour supprimer une propriété, nous pouvons utiliser l’opérateur <code>delete</code> :</p> <div id="z5ripecjhw" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>delete user.age;</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:69.75806451612904%"></div> <object type="image/svg+xml" data="/article/object/object-user-delete.svg" width="248" height="173" class="image__image" data-use-theme> <img src="/article/object/object-user-delete.svg" alt="" width="248" height="173"> </object> </div></figure><p>Nous pouvons également utiliser des noms de propriété multi-mots, mais ils doivent ensuite être entourés de quotes :</p> <div id="gqcmfjuow0" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, "likes birds": true // le nom de la propriété multi-mots doit être entourée de quotes };</code></pre> </div> </div> </div><figure><div class="image" style="width:248px"> <div class="image__ratio" style="padding-top:86.69354838709677%"></div> <object type="image/svg+xml" data="/article/object/object-user-props.svg" width="248" height="215" class="image__image" data-use-theme> <img src="/article/object/object-user-props.svg" alt="" width="248" height="215"> </object> </div></figure><p>La dernière propriété de la liste peut se terminer par une virgule :</p> <div id="d4j9hcdgn7" data-trusted="1" class="code-example" data-highlight="[{"start":2,"cols":[{"start":9,"end":10}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, }</code></pre> </div> </div> </div><p>Cela s’appelle une virgule “trailing” ou “hanging”. Elle facilite l’ajout/suppression/déplacement des propriétés, car toutes les lignes se ressemblent.</p> <h2><a class="main__anchor" name="crochets" href="#crochets">Crochets</a></h2><p>Pour les propriétés multi-mots, l’accès par points ne fonctionne pas :</p> <div id="zfxs8s5pnq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// cela donnerait une erreur de syntaxe user.likes birds = true</code></pre> </div> </div> </div><p>JavaScript ne comprend pas cela. Il pense que nous adressons <code>user.likes</code>, ensuite il donne une erreur de syntaxe lorsqu’il rencontre des <code>birds</code> inattendus.</p> <p>Le point nécessite que la clé soit un identificateur de variable valide. Cela implique qu’elle ne contient aucun espace, ne commence pas par un chiffre et n’inclut pas de caractères spéciaux (<code>$</code> et <code>_</code> sont autorisés).</p> <p>Il existe une autre “notation entre crochets” qui fonctionne avec n’importe quelle chaîne :</p> <div id="m9bh5r0bmj" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];</code></pre> </div> </div> </div><p>Maintenant tout va bien. Veuillez noter que la chaîne de caractères entre crochets est correctement entourée de quotes (tout type de guillemets fera l’affaire).</p> <p>Les crochets fournissent également un moyen d’obtenir le nom de la propriété comme résultat de toute expression (par opposition à une chaîne de caractères littérale), semblable à une variable, comme ceci :</p> <div id="nkghkicrmo" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let key = "likes birds"; // pareil que user["likes birds"] = true; user[key] = true;</code></pre> </div> </div> </div><p>Ici, la variable <code>key</code> peut être calculée au moment de l’exécution ou dépendre de la saisie de l’utilisateur. Et ensuite, nous l’utilisons pour accéder à la propriété. Cela nous donne beaucoup de flexibilité.</p> <p>Par exemple :</p> <div id="6z5hbmfth4" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; let key = prompt("What do you want to know about the user?", "name"); // accès par variable alert( user[key] ); // John (si entré "name")</code></pre> </div> </div> </div><p>La notation par points ne peut pas être utilisée de la même manière :</p> <div id="n2bny3pbmp" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; let key = "name"; alert( user.key ) // undefined</code></pre> </div> </div> </div><h3><a class="main__anchor" name="proprietes-calculees" href="#proprietes-calculees">Propriétés calculées</a></h3><p>Nous pouvons utiliser des crochets dans un objet littéral, lorsqu’on crée un objet. Cela s’appelle des propriétés calculées (<em>computed propertie</em>).</p> <p>Par exemple :</p> <div id="m9unhxy78c" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":3}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = prompt("Which fruit to buy?", "apple"); let bag = { [fruit]: 5, // le nom de la propriété est tiré de la variable fruit }; alert( bag.apple ); // 5 si fruit="apple"</code></pre> </div> </div> </div><p>La signification d’une propriété calculée est simple: <code>[fruit]</code> signifie que le nom de la propriété doit être extrait de <code>fruit</code>.</p> <p>Ainsi, si un visiteur entre <code>"apple"</code>, <code>bag</code> deviendra <code>{apple: 5}</code>.</p> <p>Essentiellement, cela fonctionne de la même façon que :</p> <div id="3w79rho4du" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = prompt("Which fruit to buy?", "apple"); let bag = {}; // prendre le nom de la propriété de la variable fruit bag[fruit] = 5;</code></pre> </div> </div> </div><p>… Mais a une meilleure apparence.</p> <p>Nous pouvons utiliser des expressions plus complexes entre crochets :</p> <div id="zd0836gjk7" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let fruit = 'apple'; let bag = { [fruit + 'Computers']: 5 // bag.appleComputers = 5 };</code></pre> </div> </div> </div><p>Les crochets sont beaucoup plus puissants que la notation par points. Ils autorisent tous les noms de propriété et variables. Mais ils sont aussi plus lourds à écrire.</p> <p>Ainsi, la plupart du temps, lorsque les noms de propriété sont connus et simples, le point est utilisé. Et si nous avons besoin de quelque chose de plus complexe, nous passons aux crochets.</p> <h2><a class="main__anchor" name="valeur-de-propriete-abregee-property-value-shorthand" href="#valeur-de-propriete-abregee-property-value-shorthand">Valeur de propriété abrégée (Property value shorthand)</a></h2><p>Dans du code réel, nous utilisons souvent des variables existantes en tant que valeurs pour les noms de propriétés.</p> <p>Par exemple :</p> <div id="diu24d40cn" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function makeUser(name, age) { return { name: name, age: age, // ...autres propriétés }; } let user = makeUser("John", 30); alert(user.name); // John</code></pre> </div> </div> </div><p>Dans l’exemple ci-dessus, les propriétés portent les mêmes noms que les variables. Le cas d’utilisation de la création d’une propriété à partir d’une variable est si courant qu’il existe une valeur spéciale de propriété abrégée (<em>property value shorthand</em>) pour la rendre plus courte.</p> <p>Au lieu de <code>name:name</code>, nous pouvons simplement écrire <code>name</code>, comme ceci :</p> <div id="lxso2n9nir" data-trusted="1" class="code-example" data-highlight="[{"start":1,"end":5}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function makeUser(name, age) { return { name, // pareil que name: name age, // pareil que age: age // ... }; }</code></pre> </div> </div> </div><p>Nous pouvons utiliser à la fois des propriétés normales et des raccourcis dans le même objet :</p> <div id="qkdfeoz7no" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name, // pareil que name:name age: 30 };</code></pre> </div> </div> </div><h2><a class="main__anchor" name="limitations-des-noms-de-propriete" href="#limitations-des-noms-de-propriete">Limitations des noms de propriété</a></h2><p>Comme nous le savons déjà, une variable ne peut pas avoir un nom égal à l’un des mots réservés au langage comme “for”, “let”, “return” etc.</p> <p>Mais pour une propriété d’objet, il n’y a pas de telle restriction :</p> <div id="efzr56artq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// ces propriétés sont toutes correctes let obj = { for: 1, let: 2, return: 3 }; alert( obj.for + obj.let + obj.return ); // 6</code></pre> </div> </div> </div><p>En bref, il n’y a aucune limitation sur les noms de propriété. Il peut s’agir de n’importe quelle chaîne de caractères ou symbole (un type spécial pour les identifiants, qui sera traité plus tard).</p> <p>Les autres types sont automatiquement convertis en chaînes de caractères.</p> <p>Par exemple, un nombre <code>0</code> devient une chaîne <code>"0"</code> lorsqu’il est utilisé comme clé de propriété :</p> <div id="q5xhbk63e1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = { 0: "test" // identique à "0": "test" }; // les 2 alertes accèdent à la même propriété (le chiffre 0 est converti en string "0") alert( obj["0"] ); // test alert( obj[0] ); // test (same property)</code></pre> </div> </div> </div><p>Il y a un problème mineur avec une propriété spéciale nommée <code>__proto__</code>. Nous ne pouvons pas le définir sur une valeur non-objet :</p> <div id="2m6r8k9f9r" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = {}; obj.__proto__ = 5; // assignation d'un nombre alert(obj.__proto__); // [object Object] - la valeur est un objet, n'a pas fonctionné comme prévu</code></pre> </div> </div> </div><p>Comme nous le voyons dans le code, l’affectation à une primitive <code>5</code> est ignorée.</p> <p>Nous couvrirons la nature particulière de <code>__proto__</code> dans les <a href="/prototype-inheritance">chapitres suivants</a>, et nous suggèrerons une <a href="/prototype-methods">façon de corriger</a> ce genre de comportement.</p> <h2><a class="main__anchor" name="test-d-existence-de-propriete-operateur-in" href="#test-d-existence-de-propriete-operateur-in">Test d’existence de propriété, opérateur “in”</a></h2><p>Une caractéristique notable des objets en JavaScript, par rapport à de nombreux autres langages, est qu’il est possible d’accéder à n’importe quelle propriété. Il n’y aura pas d’erreur si la propriété n’existe pas !</p> <p>La lecture d’une propriété non existante renvoie simplement <code>undefined</code>. Nous pouvons donc facilement tester si la propriété existe :</p> <div id="mvqp3eblwk" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; alert( user.noSuchProperty === undefined ); // true signifie "pas une telle propriété"</code></pre> </div> </div> </div><p>Il existe également un opérateur spécial <code>"in"</code> pour cela.</p> <p>La syntaxe est :</p> <div id="sn0oysr5td" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>"key" in object</code></pre> </div> </div> </div><p>Par exemple :</p> <div id="2xt85zxb2j" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30 }; alert( "age" in user ); // true, user.age existe alert( "blabla" in user ); // false, user.blabla n'existe pas</code></pre> </div> </div> </div><p>Veuillez noter que sur le côté gauche de <code>in</code>, il doit y avoir un <em>nom de propriété</em>. C’est généralement une chaîne de caractères entre guillemets.</p> <p>Si nous omettons les guillemets, cela signifie qu’une variable doit contenir le nom réel à tester. Par exemple :</p> <div id="rwv399kdlb" data-trusted="1" class="code-example" data-highlight="[{"start":3,"cols":[{"start":7,"end":10}]}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { age: 30 }; let key = "age"; alert( key in user ); // true, la propriété "age" existe</code></pre> </div> </div> </div><p>Pourquoi l’opérateur <code>in</code> existe-t-il ? N’est-ce pas suffisant de comparer avec <code>undefined</code> ?</p> <p>Eh bien, la plupart du temps, la comparaison avec <code>undefined</code> fonctionne bien. Mais il y a un cas particulier quand il échoue, mais <code>in</code> fonctionne correctement.</p> <p>C’est lorsque une propriété d’objet existe, mais qu’elle stocke undefined :</p> <div id="nj0n02izig" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let obj = { test: undefined }; alert( obj.test ); // c'est indéfini, donc - pas une telle propriété ? alert( "test" in obj ); // true, la propriété existe !</code></pre> </div> </div> </div><p>Dans le code ci-dessus, la propriété <code>obj.test</code> existe techniquement. Donc, l’opérateur <code>in</code> fonctionne bien.</p> <p>Des situations comme celle-ci se produisent très rarement, parce que <code>undefined</code> n’est généralement pas attribué. Nous utilisons principalement <code>null</code> pour les valeurs “inconnues” ou “vides”. Ainsi, l’opérateur <code>in</code> est un invité exotique dans le code.</p> <h2><a class="main__anchor" name="forin" href="#forin">La boucle "for..in"</a></h2><p>Pour parcourir toutes les clés d’un objet, il existe une forme spéciale de boucle : <code>for..in</code>. C’est une chose complètement différente de la construction <code>for(;;)</code> que nous avons étudiée auparavant.</p> <p>La syntaxe :</p> <div id="lnblya03dh" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>for (key in object) { // exécute le corps pour chaque clé parmi les propriétés de l'objet }</code></pre> </div> </div> </div><p>Par exemple, affichons toutes les propriétés de <code>user</code> :</p> <div id="6djrcqd2jv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", age: 30, isAdmin: true }; for (let key in user) { // keys alert( key ); // name, age, isAdmin // valeurs pour les clés alert( user[key] ); // John, 30, true }</code></pre> </div> </div> </div><p>Notez que toutes les constructions “for” nous permettent de déclarer la variable en boucle à l’intérieur de la boucle, comme <code>let key</code> ici.</p> <p>En outre, nous pourrions utiliser un autre nom de variable ici au lieu de <code>key</code>. Par exemple, <code>for(let prop in obj)</code> est également largement utilisé.</p> <h3><a class="main__anchor" name="ordonne-comme-un-objet" href="#ordonne-comme-un-objet">Ordonné comme un objet</a></h3><p>Les objets sont-ils ordonnés ? En d’autres termes, si nous parcourons un objet en boucle, obtenons-nous toutes les propriétés dans le même ordre où elles ont été ajoutées ? Pouvons-nous compter sur cela ?</p> <p>La réponse courte est : “ordonné de manière spéciale” : les propriétés des entiers sont triées, les autres apparaissent dans l’ordre de création. Nous allons voir cela en détails.</p> <p>Par exemple, considérons un objet avec les indicatifs de téléphone par pays :</p> <div id="oeh6wy4rpp" data-trusted="1" class="code-example" data-highlight="[{"start":8,"end":10}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let codes = { "49": "Germany", "41": "Switzerland", "44": "Great Britain", // .., "1": "USA" }; for(let code in codes) { alert(code); // 1, 41, 44, 49 }</code></pre> </div> </div> </div><p>L’objet peut être utilisé pour suggérer une liste d’options à l’utilisateur. Si nous créons un site principalement pour le public allemand, nous voulons probablement que <code>49</code> soit le premier.</p> <p>Mais si nous exécutons ce code, nous voyons une image totalement différente :</p> <ul> <li>USA (1) passe en premier</li> <li>puis Switzerland (41) et ainsi de suite.</li> </ul> <p>Les indicatifs de téléphone sont classés par ordre croissant, car ce sont des entiers. Donc on voit <code>1, 41, 44, 49</code>.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">Propriétés entier (integer properties) ? Qu’est-ce que c’est ?</span></div> <div class="important__content"><p>Le terme “propriété entier” (integer properties) désigne ici une chaîne de caractères qui peut être convertie en un nombre entier ou inversement sans changement.</p> <p>Ainsi, <code>"49"</code> est un nom de propriété entier, parce que lorsqu’il est transformé en nombre entier et inversement, il reste identique. Mais <code>"+49"</code> et <code>"1.2"</code> ne le sont pas :</p> <div id="va249l0evj" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// Number(...) convertit explicitement en nombre // Math.trunc est une fonction intégrée qui supprime la partie décimale alert( String(Math.trunc(Number("49"))) ); // "49", identique, propriété entière alert( String(Math.trunc(Number("+49"))) ); // "49", non identique "+49" ⇒ propriété non entière alert( String(Math.trunc(Number("1.2"))) ); // "1", non identique "1.2" ⇒ propriété non entière</code></pre> </div> </div> </div></div></div> <p>… Par contre, si les clés ne sont pas des entiers, elles sont listées dans l’ordre de création, par exemple :</p> <div id="15t0lsxwtz" data-trusted="1" class="code-example" data-highlight="[{"start":6,"end":6}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = { name: "John", surname: "Smith" }; user.age = 25; // Ajouter une clé de plus // les propriétés non-entiers sont listées dans l'ordre de création for (let prop in user) { alert( prop ); // name, surname, age }</code></pre> </div> </div> </div><p>Donc, pour résoudre le problème avec les indicatifs de téléphone, nous pouvons “tricher” en rendant ces indicatifs non entiers. Ajouter un signe plus <code>"+"</code> avant chaque indicatif suffit.</p> <p>Comme ceci :</p> <div id="q36uxfljdp" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let codes = { "+49": "Germany", "+41": "Switzerland", "+44": "Great Britain", // .., "+1": "USA" }; for(let code in codes) { alert( +code ); // 49, 41, 44, 1 }</code></pre> </div> </div> </div><p>Maintenant, cela fonctionne comme prévu.</p> <h2><a class="main__anchor" name="resume" href="#resume">Résumé</a></h2><p>Les objets sont des tableaux associatifs dotés de plusieurs fonctionnalités spéciales.</p> <p>Ils stockent des propriétés (paires clé-valeur), où :</p> <ul> <li>Les clés de propriété doivent être des chaînes de caractères ou des symboles (généralement des chaînes de caractères).</li> <li>Les valeurs peuvent être de tout type.</li> </ul> <p>Pour accéder à une propriété, nous pouvons utiliser :</p> <ul> <li>La notation par points : <code>obj.property</code>.</li> <li>Notation entre crochets <code>obj["property"]</code>. Les crochets permettent de prendre la clé à partir d’une variable, comme <code>obj[varWithKey]</code>.</li> </ul> <p>Opérateurs supplémentaires :</p> <ul> <li>Pour supprimer une propriété : <code>delete obj.prop</code>.</li> <li>Pour vérifier si une propriété avec la clé donnée existe : <code>"key" in obj</code>.</li> <li>Pour parcourir un objet : la boucle <code>for (let key in obj)</code>.</li> </ul> <p>Ce que nous avons étudié dans ce chapitre s’appelle un “objet simple” (plain object) ou juste <code>Object</code>. Il existe de nombreux autres types d’objets en JavaScript :</p> <ul> <li><code>Array</code> pour stocker des collections de données ordonnées,</li> <li><code>Date</code> pour stocker des informations sur la date et l’heure,</li> <li><code>Error</code> pour stocker des informations sur une erreur.</li> <li>Etc.</li> </ul> <p>Ils ont leurs particularités que nous étudierons plus tard. Parfois, les gens disent quelque chose comme “type Tableau” ou “type Date”, mais ils ne sont pas formellement propres, mais appartiennent à un seul type de données “objet”. Et ils l’étendent de différentes manières.</p> <p>Les objets en JavaScript sont très puissants. Nous venons de gratter la surface d’un sujet vraiment énorme. Nous allons travailler étroitement avec les objets et en apprendre davantage à leur sujet dans d’autres parties du tutoriel.</p> </div></article><div class="tasks formatted"><h2 class="tasks__title" id="tasks"><a class="tasks__title-anchor main__anchor main__anchor main__anchor_noicon" href="#tasks">Exercices</a></h2><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#bonjour-objet" name="bonjour-objet">Bonjour objet</a></h3><a class="task__open-link" href="/task/hello-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Écrivez le code, une ligne pour chaque action :</p> <ol> <li>Créer un objet vide <code>user</code>.</li> <li>Ajoutez la propriété <code>name</code> avec la valeur <code>John</code>.</li> <li>Ajoutez la propriété <code>surname</code> avec la valeur <code>Smith</code>.</li> <li>Changer la valeur de <code>name</code> pour <code>Pete</code>.</li> <li>Supprimez la propriété <code>name</code> de l’objet.</li> </ol> </div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="7bm9fy6ynq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = {}; user.name = "John"; user.surname = "Smith"; user.name = "Pete"; delete user.name;</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#verifier-le-vide" name="verifier-le-vide">Vérifier le vide</a></h3><a class="task__open-link" href="/task/is-empty" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Ecrivez la fonction <code>isEmpty(obj)</code> qui renvoie <code>true</code> si l’objet n’a pas de propriétés, sinon <code>false</code>.</p> <p>Devrait fonctionner comme ça :</p> <div id="hgsbwka0pk" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let schedule = {}; alert( isEmpty(schedule) ); // true schedule["8:30"] = "get up"; alert( isEmpty(schedule) ); // false</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/F1C2lcNccomZMhKb?p=preview" target="_blank" data-plunk-id="F1C2lcNccomZMhKb">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Passez simplement une boucle sur l’objet et <code>return false</code> immédiatement s’il existe au moins une propriété.</p> <div id="ziv0vyf5a1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function isEmpty(obj) { for (let key in obj) { // si la boucle a commencé, il y a une propriété return false; } return true; }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/iGjUoYNsD4mfUBvg?p=preview" target="_blank" data-plunk-id="iGjUoYNsD4mfUBvg">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#objets-constants" name="objets-constants">Objets constants ?</a></h3><a class="task__open-link" href="/task/const-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Est-il possible de changer un objet déclaré avec <code>const</code>, comment ?</p> <div id="ve9e0tsgqe" data-trusted="1" class="code-example" data-highlight="[{"start":4,"end":5}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>const user = { name: "John" }; // est-ce que ça fonctionne ? user.name = "Pete";</code></pre> </div> </div> </div></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>Bien sûr, ça fonctionne, pas de problème.</p> <p>Le <code>const</code> ne protège que la variable elle-même du changement.</p> <p>En d’autres termes, <code>user</code> stocke une référence à l’objet. Et cela ne peut pas être changé. Mais le contenu de l’objet peut.</p> <div id="syzsk5y4zk" data-trusted="1" class="code-example" data-highlight="[{"start":4,"end":5}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>const user = { name: "John" }; // fonctionne user.name = "Pete"; // erreur user = 123;</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#somme-des-proprietes-de-l-objet" name="somme-des-proprietes-de-l-objet">Somme des propriétés de l'objet</a></h3><a class="task__open-link" href="/task/sum-object" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 5</span></div><div class="task__content"><div class="task__formatted"><p>Nous avons un objet stockant les salaires de notre équipe :</p> <div id="atz7ii7qbv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let salaries = { John: 100, Ann: 160, Pete: 130 }</code></pre> </div> </div> </div><p>Écrivez le code pour additionner tous les salaires et les enregistrer dans la variable <code>sum</code>. Devrait être égale à <code>390</code> dans l’exemple ci-dessus.</p> <p>Si <code>salaries</code> est vide, le résultat doit être <code>0</code>.</p> </div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="pgh32ukt5d" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="exécuter" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="ouvrir dans une sandbox" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let salaries = { John: 100, Ann: 160, Pete: 130 }; let sum = 0; for (let key in salaries) { sum += salaries[key]; } alert(sum); // 390</code></pre> </div> </div> </div></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#multipliez-les-valeurs-de-proprietes-numeriques-par-2" name="multipliez-les-valeurs-de-proprietes-numeriques-par-2">Multipliez les valeurs de propriétés numériques par 2</a></h3><a class="task__open-link" href="/task/multiply-numeric" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Quelle est l'importance de l’exercice, de 1 à 5">importance: 3</span></div><div class="task__content"><div class="task__formatted"><p>Créez une fonction <code>multiplyNumeric(obj)</code> qui multiplie toutes les valeurs de propriétés numériques de <code>obj</code> par <code>2</code>.</p> <p>Par exemple :</p> <div id="czqvuhz8lq" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// before the call let menu = { width: 200, height: 300, title: "My menu" }; multiplyNumeric(menu); // after the call menu = { width: 400, height: 600, title: "My menu" };</code></pre> </div> </div> </div><p>Veuillez noter que <code>multiplyNumeric</code> n’a pas besoin de retourner quoi que ce soit. Il devrait modifier l’objet en place.</p> <p>P.S. Utilisez <code>typeof</code> pour rechercher un <code>number</code> ici.</p> <p><a href="https://plnkr.co/edit/yktIvWGG8H6Of51C?p=preview" target="_blank" data-plunk-id="yktIvWGG8H6Of51C">Open a sandbox with tests.</a></p></div><button class="task__solution" type="button">solution</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><div id="lpvb65rrg1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function multiplyNumeric(obj) { for (let key in obj) { if (typeof obj[key] == 'number') { obj[key] *= 2; } } }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/bCfpa6oyCUGyenVA?p=preview" target="_blank" data-plunk-id="bCfpa6oyCUGyenVA">Ouvrez la solution avec des tests dans une sandbox.</a></p></div></div><button class="close-button task__answer-close" type="button" title="fermer"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/object-basics" data-tooltip="Objets: les bases"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Cours précédent</span></a><a class="page__nav page__nav_next" href="/object-copy" data-tooltip="Les références d'objet et leur copie"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Prochain cours</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">Partager</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Carte du tutoriel</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">Commentaires</a></h2><div class="comments__read-before"><span class="comments__read-before-link">lire ceci avant de commenter…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Si vous avez des améliorations à suggérer, merci de <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">soumettre une issue GitHub</a> ou une pull request au lieu de commenter.</li><li>Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.</li><li>Pour insérer quelques bouts de code, utilisez la balise <code><code></code>, pour plusieurs lignes – enveloppez-les avec la balise <code><pre></code>, pour plus de 10 lignes - utilisez une sandbox (<a href='https://plnkr.co/edit/?p=preview'>plnkr</a>, <a href='https://jsbin.com'>jsbin</a>, <a href='http://codepen.io'>codepen</a>…)</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/fr.javascript.info\/object","identifier":"\/object"}); };</script><script>var disqus_shortname = "frjavascriptinfo";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="Carte du tutoriel"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Chapitre</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/object-basics">Objets: les bases</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Navigation des cours</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#litteraux-et-proprietes">Littéraux et propriétés</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#crochets">Crochets</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#valeur-de-propriete-abregee-property-value-shorthand">Valeur de propriété abrégée (Property value shorthand)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#limitations-des-noms-de-propriete">Limitations des noms de propriété</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#test-d-existence-de-propriete-operateur-in">Test d’existence de propriété, opérateur “in”</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#forin">La boucle "for..in"</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#resume">Résumé</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tasks">Exercices (5)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Commentaires</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Partager</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Ffr.javascript.info%2Fobject" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/fr.javascript.info/blob/master/1-js/04-object-basics/01-object" rel="nofollow">Editer sur GitHub</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">à propos du projet</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">nous contacter</a></li></ul></div></body></html>