CINXE.COM

<!DOCTYPE html><html lang="it" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "EUR";</script><script>window.countryCode = "sg";</script><script>window.rateShopTo = {"EUR":1,"USD":1.0784426856242513,"AMD":422.9305849580972};</script><title itemprop="name">Codice ninja</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://it.javascript.info/ninja-code"><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://it.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Codice ninja"><meta property="og:image" content="https://it.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="Codice ninja"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://it.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/comments"><link rel="next" href="/testing-mocha"><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.e9944d85765973026934.js"></script><script src="/pack/head.0bda608a64e89b2bf1e8.js" defer></script><meta property="og:title" content="Codice ninja"><meta property="og:type" content="article"><script src="/pack/tutorial.68709f8acff7a5842a1b.js" defer></script><script src="/pack/footer.ef1dc588044c3d1cdc9f.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 = "it";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>IT</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/ninja-code"><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/ninja-code"><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/ninja-code"><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/ninja-code"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/ninja-code"><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/ninja-code"><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 supported-langs__item_current"><a class="supported-langs__link" href="https://it.javascript.info/ninja-code"><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/ninja-code"><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/ninja-code"><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/ninja-code"><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/ninja-code"><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/ninja-code"><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/ninja-code"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text"><p>Vorremo rendere disponibile questo progetto open-source per persone in tutto il mondo.</p> <p><a href="https://javascript.info/translate">Aiutaci a tradurre</a> il contenuto di questo tutorial nella tua lingua!</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">Compra</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="Cerca in Javascript.info" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Cerca</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="Cerca nel tutorial" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Cerca</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">Mappa del tutorial</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">Condividi</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fit.javascript.info%2Fninja-code" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fit.javascript.info%2Fninja-code" 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/ninja-code">عربي</option><option value="https://javascript.info/ninja-code">English</option><option value="https://es.javascript.info/ninja-code">Español</option><option value="https://fa.javascript.info/ninja-code">فارسی</option><option value="https://fr.javascript.info/ninja-code">Français</option><option value="https://id.javascript.info/ninja-code">Indonesia</option><option value="https://it.javascript.info/ninja-code" selected>Italiano</option><option value="https://ja.javascript.info/ninja-code">日本語</option><option value="https://ko.javascript.info/ninja-code">한국어</option><option value="https://learn.javascript.ru/ninja-code">Русский</option><option value="https://tr.javascript.info/ninja-code">Türkçe</option><option value="https://uk.javascript.info/ninja-code">Українська</option><option value="https://zh.javascript.info/ninja-code">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="26" max="92" data-tooltip="Lezione 26 di 92"></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">Tutorial</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>Il linguaggio JavaScript</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/code-quality"><span>Qualità del codice</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutorial","item":"https://it.javascript.info/"},{"@type":"ListItem","position":2,"name":"Il linguaggio JavaScript","item":"https://it.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Qualità del codice","item":"https://it.javascript.info/code-quality"}]}</script></ol><div class="updated-at" data-tooltip="Ultimo aggiornamento al 28 aprile 2022"><div class="updated-at__content">28 aprile 2022</div></div></div><h1 class="main__header-title">Codice ninja</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Codice ninja"><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"><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Imparare senza pensare è lavoro sprecato; pensare senza imparare è pericoloso.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Confucio</cite> </footer></blockquote><p>I programmatori ninja in passato hanno usato queste tecniche per formare le menti dei manutentori del codice.</p> <p>I guru della revisione dei codici le utilizzano per le attività di test.</p> <p>I programmatori meno esperti le utilizzano anche meglio dei programmatori ninja.</p> <p>Leggetele attentamente e cercate di capire a quale categoria appartenete – ninja, novelli, o forse revisionisti di codice?</p> <div class="important important_warn"> <div class="important__header"><span class="important__type">Allarme ironia</span></div> <div class="important__content"><p>Molti hanno provato a seguire il percorso dei ninja. Pochi ci sono riusciti.</p> </div></div> <h2><a class="main__anchor" name="la-brevita-e-l-anima-dell-intelligenza" href="#la-brevita-e-l-anima-dell-intelligenza">La brevità è l’anima dell’intelligenza</a></h2><p>Rendete il codice più breve possibile. Mostrerà quanto intelligenti siete.</p> <p>Lasciate che le sottigliezze del linguaggio vi guidino.</p> <p>Ad esempio, date un’occhiata all’operatore ternario <code>'?'</code>:</p> <div id="ytmzde3rfe" 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>// preso da una libreria javascript famosa i = i ? i < 0 ? Math.max(0, len + i) : i : 0;</code></pre> </div> </div> </div><p>Bello vero? Se scrivete cose del genere, uno sviluppatore che prova a leggere queste righe perderà molto tempo nel capire cosa rappresenta il valore <code>i</code>. Alla fine verrebbe da voi per cercare una risposta.</p> <p>Insegnategli che la brevità è sempre la cosa migliore. Iniziatelo al percorso dei ninja.</p> <h2><a class="main__anchor" name="variabili-ad-una-lettera" href="#variabili-ad-una-lettera">Variabili ad una lettera</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Il Dao si nasconde nel silenzio. Solo il Dao è completo.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Un altro metodo per programmare velocemente è utilizzare nomi di variabili a singolo carattere ovunque. Come <code>a</code>, <code>b</code> o <code>c</code>.</p> <p>Una variabile molto breve sparirà nel codice come un vero ninja scompare nella foresta. Nessuno sarà in grado di ritrovarla, nemmeno utilizzando il tasto “cerca”. E se qualcuno mai riuscirà a trovarla non “decifrerà” mai il vero significato di <code>a</code> o <code>b</code>.</p> <p>…C’è però un’eccezione. Un vero ninja non utilizzerà mai <code>i</code> come contatore in un ciclo <code>"for"</code>. Ovunque, ma non qui. Si guarderà intorno, ci sono moltissime lettere esotiche. Ad esempio <code>x</code> o <code>y</code>.</p> <p>Utilizzare una variabile esotica come contatore di un ciclo è ancora meglio se il corpo è grande 1-2 pagine (o anche di più). Quindi se qualcuno guarderà dentro, nella profondità del ciclo, non sarà in grado di capire che <code>x</code> è il contatore del ciclo.</p> <h2><a class="main__anchor" name="variabili-abbreviate" href="#variabili-abbreviate">Variabili abbreviate</a></h2><p>Se il regolamento del team vieta di utilizzare nomi vaghi o composti di una sola lettera – allora accorciateli, inventate abbreviazioni.</p> <p>Come questi:</p> <ul> <li><code>list</code> → <code>lst</code>.</li> <li><code>userAgent</code> → <code>ua</code>.</li> <li><code>browser</code> → <code>brsr</code>.</li> <li>…etc</li> </ul> <p>Solo una persona con un’ottima intuizione sarà in grado di capire questi nomi. Provate ad abbreviare tutto. Solo una persona degna sarà capace di sostenere il vostro codice.</p> <h2><a class="main__anchor" name="libratevi-in-alto-siate-astratti" href="#libratevi-in-alto-siate-astratti">Libratevi in alto. Siate astratti.</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>I quadrati migliori non hanno spigoli<br> Le migliori navi sono le ultime complete,<br> I grandi commenti raramente hanno un suono,<br> Le migliori immagini non hanno forma.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Quando scegliete un nome cercare di utilizzare parole più astratte possibili. Come <code>obj</code>, <code>data</code>, <code>value</code>, <code>item</code>, <code>elem</code> e molte altre.</p> <ul> <li> <p><strong>Il nome ideale per una variabile è <code>data</code>.</strong> Usatela il più possibile. Infondo, tutte le variabili contengono <em>dati</em> giusto?</p> <p>…Cosa fare se <code>data</code> è già stato utilizzato? Provate <code>value</code>, anche questo è un nome universale. Dopo tutto una variabile potrebbe avere un <em>valore</em>.</p> </li> <li> <p><strong>Denominate le variabili in base al loro tipo: <code>str</code>, <code>num</code>…</strong></p> <p>Dategli una possibilità. Un giovane iniziato potrebbe pensare – sono veramente utili ad un ninja questi nomi? Infatti lo sono!</p> <p>Certamente il nome della variabile contiene comunque un significato. Infatti informa riguardo cosa è contenuto nella variabile: una stringa, un numero o qualcos’altro. Ma quando un estraneo cercherà di capire il codice, rimarrà sorpreso scoprendo che in realtà non forniscono alcuna informazione! Quindi fallirà nel suo intento di modificare il vostro codice.</p> <p>Il tipo del valore è semplice da trovare con un debugger. Ma qual’è il significato della variabile? Quale numero/stringa contiene?</p> <p>Non c’è alcun modo per scoprirlo senza un pò di meditazione!</p> </li> <li> <p><strong>…Cosa fare se non sono più disponibili questi nomi?</strong> Aggiungete semplicemente un numero: <code>data1, item2, elem5</code>…</p> </li> </ul> <h2><a class="main__anchor" name="test-di-attenzione" href="#test-di-attenzione">Test di attenzione</a></h2><p>Solo un vero programmatore dovrebbe essere in grado di capire il vostro codice. Ma come essere sicuri di questo?</p> <p><strong>Una delle possibili strade – usare nomi di variabili simili, come <code>date</code> e <code>data</code>.</strong></p> <p>Mixateli anche insieme quando possibile.</p> <p>Una rapida lettura di un codice del genere diventerà impossibile. E quando ci sarà un errore di battitura… Ummm… Avremo un pò di tempo per berci un buon tea.</p> <h2><a class="main__anchor" name="sinonimi-intelligenti" href="#sinonimi-intelligenti">Sinonimi intelligenti</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>La cosa più difficile al mondo è trovare un gatto nero in una stanza buia, specialmente se il gatto non c’è.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Confucio</cite> </footer></blockquote><p>Utilizzare nomi <em>simili</em> per la <em>stessa</em> cosa rende la vita più interessante e mostra al pubblico la tua creatività.</p> <p>Ad esempio, consideriamo i prefissi delle funzioni. Se una funzione mostra un messaggio sullo schermo – potremmo iniziarla con <code>display…</code>, ad esempio <code>displayMessage</code>. Se poi un’altra funzione mostra sullo schermo qualcos altro, come uno username, potremmo iniziare con <code>show…</code> (ad esempio <code>showName</code>).</p> <p>Facendo credere che ci sia una piccola differenza tra le due funzioni, quando invece non c’è.</p> <p>Mettetevi d’accordo con gli altri ninja del team: se John inizia le funzioni di “showing” con <code>display...</code>, allora Peter potrebbe usare <code>render..</code>, e Ann – <code>paint...</code>. Il codice diventerebbe cosi molto misto e interessante.</p> <p>…E ora il colpo finale!</p> <p>Per due funzioni con differenze fondamentali – utilizzate lo stesso prefisso!</p> <p>Ad esempio la funzione <code>printPage(page)</code> che utilizzerà la stampante. E la funzione <code>printText(text)</code> che mostrerà un messaggio sullo schermo. Cosi un estraneo dovrà pensare bene ai nomi delle funzioni <code>printMessage</code>: "Dove verrà messo il messaggio? Nella stampante o sullo schermo? ". Per rendere il tutto ancora più bello <code>printMessage(message)</code> dovrebbe mostrare il messaggio in una nuova pagina!</p> <h2><a class="main__anchor" name="riciclo-dei-nomi" href="#riciclo-dei-nomi">Riciclo dei nomi</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Quando l’intero è diviso, le parti<br> necessitano di nomi.<br> Ci sono già abbastanza nomi.<br> Uno dovrebbe sapere quando fermarsi.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Aggiungere una nuova variabile solo quando è assolutamente necessaria.</p> <p>Piuttosto utilizzate quelle già presenti. Semplicemente riscrivetele.</p> <p>In una funzione conviene utilizzare solo variabili passate come parametri.</p> <p>Questo renderà davvero difficile capire cosa c’è esattamente all’interno della variabile <em>in questo momento</em>. E anche da dove proviene. Una persona con una pessima intuizione sarà costretta ad analizzare il codice linea per linea e tracciare tutti i possibili flussi.</p> <p><strong>Una variante avanzata è quella di sostituire di nascosto (!) i valori con qualcos’altro di simile nel bel mezzo di una ciclo o di una funzione.</strong></p> <p>Ad esempio:</p> <div id="9dvuts6apv" 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 ninjaFunction(elem) { // 20 righe di codice che lavorano su elem elem = clone(elem); // altre 20 righe, che lavorano sul clone di elem! }</code></pre> </div> </div> </div><p>Un programmatore esterno che vorrebbe provare ad interagire con <code>elem</code> nella seconda parte della funzione, rimarrà sorpreso… Solamente in fase di debugging , dopo aver esaminato attentamente il codice si renderà conto che stava lavorando con un clone!</p> <p>Se ripetuto regolarmente nel codice, diventa letale anche contro i ninja più esperti.</p> <h2><a class="main__anchor" name="underscore-per-divertimento" href="#underscore-per-divertimento">Underscore per divertimento</a></h2><p>Inserite underscore <code>_</code> e <code>__</code> prima dei nomi delle variabili. Come <code>_name</code> o <code>__value</code>. Sarebbe bello sapere che solo tu ne conosci il significato. O meglio, aggiungeteli solo per divertimento, senza scopo. Oppure con differenti significati in posti diversi.</p> <p>Prendereste due piccioni con una fava. Primo, il codice diventerebbe più lungo e meno leggibile, e secondo, uno sviluppatore poco scaltro ci perderà molto tempo prima di riuscire a metter le mani sul vostro codice.</p> <p>Un ninja intelligente mette gli underscore in un solo punto del codice e li evita in altri. Questo aumenta la fragilità del codice e aumenta la possibilità di commettere errori.</p> <h2><a class="main__anchor" name="mostrate-il-vostro-amore" href="#mostrate-il-vostro-amore">Mostrate il vostro amore</a></h2><p>Mostrate a tutti quando siano belli i vostri elementi! Nomi come <code>superElement</code>, <code>megaFrame</code> e <code>niceItem</code> sicuramente cattureranno l’animo del lettore.</p> <p>Infatti, utilizzerete dei bei nomi come: <code>super..</code>, <code>mega..</code>, <code>nice..</code> Ma in ogni caso non fornirete dettagli. Un lettore esterno potrebbe ragionare sui possibili significato perdendo una o due ore.</p> <h2><a class="main__anchor" name="sovrascrittura-delle-variabili-esterne" href="#sovrascrittura-delle-variabili-esterne">Sovrascrittura delle variabili esterne</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Quando sei nella luce, non puoi vedere niente nell’oscurità.<br> Quando sei nell’oscurità, puoi vedere tutto nella luce.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Guan Yin Zi</cite> </footer></blockquote><p>Usare gli stessi nomi per le variabili interne ed esterne. E’ semplice. Non sono richiesti ulteriori sforzi.</p> <div id="9vh4ecsx2l" data-trusted="1" class="code-example" data-highlight="[{"start":3,"cols":[{"start":6,"end":10}]},{"start":0,"cols":[{"start":4,"end":8}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = authenticateUser(); function render() { let user = anotherValue(); ... ...many lines... ... ... // <-- un programmatore vorrebbe utilizzare user... ... }</code></pre> </div> </div> </div><p>Un programmatore che si trova dentro <code>render</code> probabilmente non si accorgerà che la variabile locale <code>user</code> sta nascondendo quella esterna.</p> <p>Quindi potrebbe provare a lavorare con <code>user</code> pensando erroneamente che sia quella esterna, quella con il risultato di <code>authenticateUser()</code>… La trappola è servita! Addio debugger…</p> <h2><a class="main__anchor" name="side-effect-ovunque" href="#side-effect-ovunque">Side-effect ovunque!</a></h2><p>Ci sono funzioni che sembrano non avere effetti. Come <code>isReady()</code>, <code>checkPermission()</code>, <code>findTags()</code>… Si presume che eseguano semplici calcoli, trovino e ritornino il dato, senza cambiare nulla all’esterno. In altre parole senza “side-effect”.</p> <p><strong>Un bellissima sorpresa potrebbe essere quella di aggiungere un azione “utile”, oltre a quella principale.</strong></p> <p>Un’espressione di stupore apparirà nel volto del vostro collega quando scoprirà che una funzione chiamata <code>is..</code>, <code>check..</code> o <code>find...</code> cambia qualcosa – allargherete di molto i suoi confini di comprensione.</p> <p><strong>Un altro modo per stupire è ritornare risultati non standard.</strong></p> <p>Mostrate il vostro pensiero originale! Alla chiamata di <code>checkPermission</code>, invece che ritornare <code>true/false</code>, ritornate un oggetto complesso contenente il risultato del check.</p> <p>Quindi degli sviluppatori che proveranno a scrivere <code>if (checkPermission(..))</code>, si chiederanno perché non funziona. Rispondete severamente: “Leggete la documentazione”.</p> <h2><a class="main__anchor" name="funzioni-potenti" href="#funzioni-potenti">Funzioni potenti!</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Il grande Tao fluisce ovunque,<br> sia a sinistra che a destra.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Non limitate le funzioni a ciò che il loro nome esprime. Siate elastici.</p> <p>Ad esempio, una funzione <code>validateEmail(email)</code> dovrebbe (dopo averne controllato la correttezza) mostrare un errore e chiedervi di reinserire la mail.</p> <p>Azioni supplementari non dovrebbero risultare ovvie dal nome della funzione. Un vero programmatore ninja cerca di renderle il meno ovvie possibile.</p> <p><strong>Unire più azioni in una protegge il vostro codice dal riutilizzo.</strong></p> <p>Immaginate, un altro sviluppatore vuole solo verificare le email, e non mostrare alcun messaggio. La vostra funzione <code>validateEmail(email)</code> che svolge entrambi i compiti non fa al caso suo. Quindi non dovrà infastidirvi facendo domande, visto che non utilizzerà il vostro codice.</p> <h2><a class="main__anchor" name="riepilogo" href="#riepilogo">Riepilogo</a></h2><p>Tutti i “consigli” forniti sopra provengono da codici reali… Qualche volta scritti da programmatori con esperienza. Forse con più esperienza di voi ;)</p> <ul> <li>Seguite alcuni di questi consigli, e il vostro codice sarà pieno di sorprese.</li> <li>Seguitene molti, e il vostro codice diventerà veramente vostro, nessuno vorrà utilizzarlo.</li> <li>Seguitele tutte, ed il vostro codice sarà una guida spirituali per i giovani sviluppatori in cerca della luce.</li> </ul> </div></article></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/comments" data-tooltip="Commenti"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Lezione precedente</span></a><a class="page__nav page__nav_next" href="/testing-mocha" data-tooltip="Test automatici con Mocha"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Lezione successiva</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">Condividi</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fit.javascript.info%2Fninja-code" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fit.javascript.info%2Fninja-code" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Mappa del tutorial</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">Commenti</a></h2><div class="comments__read-before"><span class="comments__read-before-link">leggi questo prima di lasciare un commento…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Per qualsiasi suggerimento - per favore, <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">apri una issue su GitHub</a> o una pull request, piuttosto di lasciare un commento.</li><li>Se non riesci a comprendere quanto scitto nell'articolo – ti preghiamo di fornire una spiegazione chiara.</li><li>Per inserire delle righe di codice utilizza il tag <code><code></code>, per molte righe – includile nel tag <code><pre></code>, per più di 10 righe – utilizza una 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:\/\/it.javascript.info\/ninja-code","identifier":"\/ninja-code"}); };</script><script>var disqus_shortname = "it-javascript-info";</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="Mappa del tutorial"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Capitolo</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/code-quality">Qualità del codice</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Naviga tra le lezioni</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#la-brevita-e-l-anima-dell-intelligenza">La brevità è l’anima dell’intelligenza</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#variabili-ad-una-lettera">Variabili ad una lettera</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#variabili-abbreviate">Variabili abbreviate</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#libratevi-in-alto-siate-astratti">Libratevi in alto. Siate astratti.</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#test-di-attenzione">Test di attenzione</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#sinonimi-intelligenti">Sinonimi intelligenti</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#riciclo-dei-nomi">Riciclo dei nomi</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#underscore-per-divertimento">Underscore per divertimento</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#mostrate-il-vostro-amore">Mostrate il vostro amore</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#sovrascrittura-delle-variabili-esterne">Sovrascrittura delle variabili esterne</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#side-effect-ovunque">Side-effect ovunque!</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#funzioni-potenti">Funzioni potenti!</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#riepilogo">Riepilogo</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="#comments">Commenti</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Condividi</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fit.javascript.info%2Fninja-code" 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%2Fit.javascript.info%2Fninja-code" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/it.javascript.info/blob/master/1-js/03-code-quality/04-ninja-code" rel="nofollow">Modifica su 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">riguardo il progetto</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">contattaci</a></li></ul></div></body></html>