CINXE.COM

<!DOCTYPE html><html lang="es" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "EUR";</script><script>window.countryCode = "in";</script><script>window.rateShopTo = {"EUR":1,"USD":1.0793366397012396,"AMD":422.57935336941915};</script><title itemprop="name">Código 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://es.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://es.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Código ninja"><meta property="og:image" content="https://es.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="Código ninja"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://es.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.bfbd8f163f7371f4e613.js"></script><script src="/pack/head.f0ef0d46af631501e6b2.js" defer></script><meta property="og:title" content="Código ninja"><meta property="og:type" content="article"><script src="/pack/tutorial.7c36b8184a7e0fd79e5d.js" defer></script><script src="/pack/footer.d61f12af96e4007b382f.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 = "es";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>ES</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 supported-langs__item_current"><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"><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>Queremos que este proyecto de código abierto esté disponible para personas de todo el mundo.</p> <p><a href="https://javascript.info/translate">Ayuda a traducir</a> el contenido de este tutorial a tu idioma!</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">Comprar</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="Buscar en Javascript.info" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Buscar</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="Buscar en el tutorial" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Buscar</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">Mapa 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">Compartir</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fes.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%2Fes.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" selected>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">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="94" data-tooltip="Lección 26 de 94"></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>El lenguaje JavaScript</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/code-quality"><span>Calidad del código</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutorial","item":"https://es.javascript.info/"},{"@type":"ListItem","position":2,"name":"El lenguaje JavaScript","item":"https://es.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Calidad del código","item":"https://es.javascript.info/code-quality"}]}</script></ol><div class="updated-at" data-tooltip="Última actualización el 28 de septiembre de 2022"><div class="updated-at__content">28 de septiembre de 2022</div></div></div><h1 class="main__header-title">Código ninja</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Código 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>Aprender sin pensar es inútil. Pensar sin aprender, peligroso.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Confucio (Analectas)</cite> </footer></blockquote><p>Los programadores ninjas del pasado usaron estos trucos para afilar la mente de los mantenedores de código.</p> <p>Los gurús de revisión de código los buscan en tareas de prueba.</p> <p>Los desarrolladores novatos algunas veces los usan incluso mejor que los programadores ninjas.</p> <p>Léelos detenidamente y encuentra quién eres: ¿un ninja?, ¿un novato?, o tal vez ¿un revisor de código?</p> <div class="important important_warn"> <div class="important__header"><span class="important__type"> <em>IRONÍA</em> detectada</span></div> <div class="important__content"><p>Muchos intentan seguir los caminos de los ninjas. Pocos tienen éxito.</p> </div></div> <h2><a class="main__anchor" name="la-brevedad-es-el-alma-del-ingenio" href="#la-brevedad-es-el-alma-del-ingenio">La brevedad es el alma del ingenio</a></h2><p>Haz el código lo más corto posible. Demuestra cuán inteligente eres.</p> <p>Deja que las características sutiles del lenguaje te guíen.</p> <p>Por ejemplo, echa un vistazo a este operador ternario <code>'?'</code>:</p> <div id="cvj6pmhyju" 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>// tomado de una librería de javascript muy conocida i = i ? i < 0 ? Math.max(0, len + i) : i : 0;</code></pre> </div> </div> </div><p>Fascinante, ¿cierto?. Si escribes de esa forma, un desarrollador que se encuentre esta línea e intente entender cuál es el valor de <code>i</code> la va a pasar muy mal. Por lo que tendrá que venir a ti, buscando una respuesta.</p> <p>Diles que mientras más corto mucho mejor. Guíalos a los caminos del ninja.</p> <h2><a class="main__anchor" name="variables-de-una-sola-letra" href="#variables-de-una-sola-letra">Variables de una sola letra</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>El Dao se esconde sin palabras. Solo el Dao está bien comenzado y bien terminado.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Otra forma de programar más rápido es usando variables de una sola letra en todas partes. Como <code>a</code>, <code>b</code> o <code>c</code>.</p> <p>Una variable corta desaparece en el código como lo hace un ninja en un bosque. Nadie será capaz de encontrarla usando “buscar” en el editor. E incluso si alguien lo hace, no será capaz de “descifrar” el significado de <code>a</code> o <code>b</code>.</p> <p>…Pero hay una excepción. Un verdadero ninja nunca usaría <code>i</code> como el contador en un bucle <code>"for"</code>. En cualquier otro lugar, pero no aquí. Mira alrededor, hay muchas más letras exóticas. Por ejemplo, <code>x</code> o <code>y</code>.</p> <p>Una variable exótica como el contador de un bucle es especialmente genial si el cuerpo del bucle toma 1-2 páginas (hazlo más grande si puedes). Entonces si alguien mira en las profundidades del bucle, no será capaz de figurarse rápidamente que la variable llamada <code>x</code> es el contador del bucle.</p> <h2><a class="main__anchor" name="usa-abreviaciones" href="#usa-abreviaciones">Usa abreviaciones</a></h2><p>Si las reglas del equipo prohíben el uso de nombres de una sola letra o nombres vagos – acórtalos, haz abreviaciones.</p> <p>Como esto:</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 aquel con buena intuición será capaz de entender dichos nombres. Intenta acortar todo. Solo una persona digna debería ser capaz de sostener el desarrollo de tu código.</p> <h2><a class="main__anchor" name="vuela-alto-se-abstracto" href="#vuela-alto-se-abstracto">Vuela alto. Sé abstracto</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>El gran cuadrado no tiene esquina<br> La gran vasija se completa por última vez,<br> La gran nota es un sonido enrarecido,<br> La gran imagen no tiene forma.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Cuando estés escogiendo un nombre intenta usar la palabra más abstracta. Como <code>obj</code>, <code>data</code>, <code>value</code>, <code>item</code>, <code>elem</code>, etc.</p> <ul> <li> <p><strong>El nombre ideal para una variable es <code>data</code>.</strong> Úsalo lo más que puedas. En efecto, toda variable contiene <em>data</em>, ¿no?</p> <p>…¿Pero qué hacer si <code>data</code> ya está siendo usado? Intenta con <code>valor</code>, también es universal. Después de todo, una variable eventualmente recibe un <em>valor</em> .</p> </li> <li> <p><strong>Nombra una variable por su tipo: <code>str</code>, <code>num</code>…</strong></p> <p>Pruébalos. Un recién iniciado puede preguntarse: ¿Son estos nombres realmente útiles para un ninja? En efecto, ¡lo son!</p> <p>Claro, el nombre de la variable sigue significando algo. Dice que hay en el interior de la variable: una cadena de texto, un número o cualquier otra cosa. Pero cuando una persona ajena intenta entender el código, se verá sorprendido al ver que en realidad no hay información. Y finalmente fracasará en el intento de alterar tu código tan bien pensado.</p> <p>El tipo de valor es fácil de encontrar con una depuración. Pero, ¿cuál es el significado de la variable? ¿Qué cadena de texto o número guarda?</p> <p>¡No hay forma de saberlo sin una buena meditación!</p> </li> <li> <p><strong>…Pero, ¿Y si ya no hay más de tales nombres?</strong> Simplemente añade un número: <code>data1, item2, elem5</code>…</p> </li> </ul> <h2><a class="main__anchor" name="prueba-de-atencion" href="#prueba-de-atencion">Prueba de atención</a></h2><p>Solo un programador realmente atento debería ser capaz de entender tu código. Pero, ¿cómo comprobarlo? ``</p> <p><strong>Una de las maneras – usa nombre de variables similares, como <code>date</code> y <code>data</code>.</strong></p> <p>Combínalos donde puedas.</p> <p>Una lectura rápida de dicho código se hace imposible. Y cuando hay un error de tipografía…. Ummm… Estamos atrapados por mucho tiempo, hora de tomar té.</p> <h2><a class="main__anchor" name="sinonimos-inteligentes" href="#sinonimos-inteligentes">Sinónimos inteligentes</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>El Tao que puede ser expresado no es el Tao eterno. El nombre que puede ser nombrado no es el nombre eterno.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Lao Tse (Tao Te Ching)</cite> </footer></blockquote><p>Usando nombres <em>similares</em> para las mismas cosas hace tu vida mas interesante y le muestra al público tu creatividad.</p> <p>Por ejemplo, considera prefijos de funciones. Si una función muestra un mensaje en la pantalla – comiénzalo con <code>mostrar...</code>, como <code>mostarMensaje</code>. Y entonces si otra función muestra en la pantalla otra cosa, como un nombre de usuario, comiénzalo con <code>presentar...</code> (como <code>presentarNombre</code>).</p> <p>Insinúa que hay una diferencia sutil entre dichas funciones, cuando no lo hay.</p> <p>Haz un pacto con tus compañeros ninjas del equipo: si John comienza funciones de “mostrar” con <code>presentar...</code> en su código, entonces Peter podría usar <code>exhibir..</code>, y Ann – <code>pintar...</code>. Nota como el código es mucho más interesante y diverso ahora.</p> <p>…¡Y ahora el truco del sombrero!</p> <p>Para dos funciones con importantes diferencias, ¡usa el mismo prefijo!</p> <p>Por ejemplo, la función <code>imprimirPágina(página)</code> usara una impresora. Y la función <code>imprimirTexto(texto)</code> mostrará el texto en la pantalla… Deja que un lector no familiar a tu código piense bien sobre una función llamada de forma similar <code>imprimirMensaje</code>: "¿Dónde coloca el mensaje? ¿A una impresora o en la pantalla?. Para que realmente se destaque, ¡<code>imprimirMensaje(mensaje)</code> debería mostrar el mensaje en una nueva ventana!</p> <h2><a class="main__anchor" name="reutilizar-nombres" href="#reutilizar-nombres">Reutilizar nombres</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Una vez que el todo se divide, las partes <br> necesitan nombres. <br> Ya hay suficientes nombres. <br> Uno debe saber cuándo parar.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>Añade una nueva variable sólo cuando sea necesario.</p> <p>En lugar, reutiliza nombres que ya existen. Simplemente escribe nuevo valores en ellos.</p> <p>En una función intenta sólo usar las variables pasadas como parámetros.</p> <p>Eso hará que sea realmente difícil identificar qué es exactamente la variable <em>ahora</em>. Y además de donde viene. El propósito es desarrollar la intuición y memoria de la persona que lee el código. Una persona con intuición débil tendrá que analizar el código línea por línea y seguir los cambios en cada rama de código.</p> <p><strong>Una variante avanzada del enfoque es reemplazar los valores de forma encubierta con algo parecido en la mitad de un bucle o una función.</strong></p> <p>Por ejemplo:</p> <div id="ya9vsnfff9" 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 líneas de código trabajando con elem elem = clone(elem); // 20 líneas más, ¡ahora trabajando con el clon de elem! }</code></pre> </div> </div> </div><p>Un colega programador que quiera trabajar con <code>elem</code> en la segunda mitad de la función será sorprendido… ¡Solo durante la depuración, después de examinar el código encontrara que está trabajando con un clon!</p> <p>Visto regularmente en códigos. Letalmente efectivo, incluso contra ninjas experimentados.</p> <h2><a class="main__anchor" name="guiones-bajos-por-diversion" href="#guiones-bajos-por-diversion">Guiones bajos por diversión</a></h2><p>Coloca guiones bajos <code>_</code> y <code>__</code> antes de los nombres de las variables. Como <code>_name</code> o <code>__value</code>. Sería genial si solo tú sabes su significado. O, mejor, añádelos simplemente por diversión, sin ningún significado especial. O diferentes significados en diferentes lugares.</p> <p>Matarás dos pájaros de un solo tiro. Primero, el código se hará más largo y menos legible, y segundo, un colega desarrollador podría gastar una gran cantidad de tiempo intentado entender el significado del guion bajo.</p> <p>Un ninja inteligente coloca los guiones bajos en un solo lugar del código y los evita en otros lugares. Eso hace que el código sea mucho más frágil y aumenta la probabilidad de errores futuros.</p> <h2><a class="main__anchor" name="muestra-tu-amor" href="#muestra-tu-amor">Muestra tu amor</a></h2><p>¡Deja que todos vean cuán magníficas son tus entidades! Nombres como <code>superElement</code>, <code>megaFrame</code> and <code>niceItem</code> iluminaran sin duda al lector.</p> <p>En efecto, por una parte, algo es escrito: <code>super..</code>, <code>mega..</code>, <code>nice..</code>, pero por otra parte – no da ningún detalle. Un lector podría decidir mirar por un significado oculto y meditar por una hora o dos.</p> <h2><a class="main__anchor" name="superpon-variables-externas" href="#superpon-variables-externas">Superpón variables externas</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>Cuando está a la luz, no puede ver nada en la oscuridad. <br> Cuando está en la oscuridad, puede ver todo a la luz.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Guan Yin Zi</cite> </footer></blockquote><p>Usa los mismos nombres para variables dentro y fuera de una función. Así de simple. Sin el esfuerzo de inventar nuevos nombres.</p> <div id="ae7x6my6fm" 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 programador quiere trabajar con user aquí y... ... }</code></pre> </div> </div> </div><p>Un programador que se adentra en <code>render</code> probablemente no notara que hay un <code>user</code> local opacando al de afuera.</p> <p>Entonces intentaran trabajar con <code>user</code> asumiendo que es la variable externa, el resultado de <code>authenticateUser()</code>… ¡Se activa la trampa! Hola, depurador…</p> <h2><a class="main__anchor" name="efectos-secundarios-en-todas-partes" href="#efectos-secundarios-en-todas-partes">¡Efectos secundarios en todas partes!</a></h2><p>Hay muchas funciones que parecen que no cambian nada. Como <code>estaListo()</code>, <code>comprobarPermiso()</code>, <code>encontrarEtiquetas()</code>… Se asume que sacan los cálculos, encuentran y regresan los datos, sin cambiar nada fuera de ellos. En otras palabras, sin “efectos secundarios”.</p> <p><strong>Un truco realmente bello es añadirles una acción “útil”, además de su tarea principal.</strong></p> <p>Una expresión de sorpresa aturdida aparecerá en la cara de tus colegas cuando vean que la función llamada <code>es..</code>, <code>comprobar..</code> o <code>encontrar...</code> cambia algo. Definitivamente ampliará tus límites de razón.</p> <p><strong>Otra forma de sorprender es retornar un resultado no estándar</strong></p> <p>¡Muestra tu pensamiento original! Deja que la llamada de <code>comprobarPermiso</code> retorne no <code>true/false</code> sino un objeto complejo con los resultados de tu comprobación.</p> <h2><a class="main__anchor" name="funciones-poderosas" href="#funciones-poderosas">¡Funciones poderosas!</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>El gran Tao fluye por todas partes, <br> tanto a la izquierda como a la derecha.</p> </div></div><footer class="quote__footer"> <cite class="quote__author">Laozi (Tao Te Ching)</cite> </footer></blockquote><p>No limites la función por lo que está escrito en el nombre. Se más abierto.</p> <p>Por ejemplo, una función <code>validarEmail(email)</code> podría (además de comprobar el email por exactitud) muestra un mensaje de error y preguntar de nuevo por el email.</p> <p>Acciones adicionales no deberían ser obvias por el nombre de la función. Un verdadero programador ninja no las hará obvias por el código tampoco.</p> <p><strong>Uniendo muchas acciones en una protege tu código de reúsos.</strong></p> <p>Imagina, otro desarrollador quiere solo comprobar el correo, y no mostrar ningún mensaje. Tu función <code>validarEmail(email)</code> que hace ambas no le será de utilidad. Así que no romperán tu meditación preguntando cualquier cosa sobre ello.</p> <h2><a class="main__anchor" name="resumen" href="#resumen">Resumen</a></h2><p>Todos los <em>consejos</em> anteriores fueron extraidos de código real… Algunas veces, escrito por desarrolladores experimentados. Quizás incluso más experimentado que tú ;)</p> <ul> <li>Sigue alguno de ellos, y tu código estará lleno de sorpresas.</li> <li>Sigue muchos de ellos, y tu código será realmente tuyo, nadie querrá cambiarlo.</li> <li>Sigue todos, y tu código será una lección valiosa para desarrolladores jóvenes buscando iluminación.</li> </ul> </div></article></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/comments" data-tooltip="Comentarios"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Lección anterior</span></a><a class="page__nav page__nav_next" href="/testing-mocha" data-tooltip="Automatización de pruebas con Mocha"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Próxima lección</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">Compartir</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fes.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%2Fes.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">Mapa 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">Comentarios</a></h2><div class="comments__read-before"><span class="comments__read-before-link">lea esto antes de comentar…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Si tiene sugerencias sobre qué mejorar, por favor <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">enviar una propuesta de GitHub</a> o una solicitud de extracción en lugar de comentar.</li><li>Si no puede entender algo en el artículo, por favor explique.</li><li>Para insertar algunas palabras de código, use la etiqueta <code><code></code>, para varias líneas – envolverlas en la etiqueta <code><pre></code>, para más de 10 líneas – utilice una entorno controlado (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:\/\/es.javascript.info\/ninja-code","identifier":"\/ninja-code"}); };</script><script>var disqus_shortname = "es-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="Mapa del Tutorial"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Capítulo</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/code-quality">Calidad del código</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Navegación de lección</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#la-brevedad-es-el-alma-del-ingenio">La brevedad es el alma del ingenio</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#variables-de-una-sola-letra">Variables de una sola letra</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#usa-abreviaciones">Usa abreviaciones</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#vuela-alto-se-abstracto">Vuela alto. Sé abstracto</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#prueba-de-atencion">Prueba de atención</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#sinonimos-inteligentes">Sinónimos inteligentes</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#reutilizar-nombres">Reutilizar nombres</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#guiones-bajos-por-diversion">Guiones bajos por diversión</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#muestra-tu-amor">Muestra tu amor</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#superpon-variables-externas">Superpón variables externas</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#efectos-secundarios-en-todas-partes">¡Efectos secundarios en todas partes!</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#funciones-poderosas">¡Funciones poderosas!</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#resumen">Resumen</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">Comentarios</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Compartir</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fes.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%2Fes.javascript.info%2Fninja-code" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/es.javascript.info/blob/master/1-js/03-code-quality/04-ninja-code" rel="nofollow">Editar en 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">acerca del proyecto</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">contáctenos</a></li></ul></div></body></html>