{"id":23253,"date":"2024-03-09T16:45:56","date_gmt":"2024-03-09T15:45:56","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/introduccion-a-la-indentacion-de-codigo-fundamentos-y-buenas-practicas\/"},"modified":"2024-06-03T17:32:22","modified_gmt":"2024-06-03T16:32:22","slug":"introduccion-a-la-indentacion-de-codigo-fundamentos-y-buenas-practicas","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/","title":{"rendered":"Introduction to code indentation: Fundamentals and good practices"},"content":{"rendered":"<p>When we immerse ourselves in the world of programming, one of the key concepts that we must master is <strong>code indentation<\/strong>. This practice consists of applying spaces or tabs to improve the readability and organization of our source code. In this article, we will explore the fundamentals of code indentation and learn best practices for its implementation, focusing on the JavaScript programming language.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFQue_es_la_indentacion_de_codigo\" >What is code indentation?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFPor_que_es_importante_la_indentacion_de_codigo\" >Why is code indentation important?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#Mejores_practicas_de_indentacion_de_codigo_en_JavaScript\" >Code Indentation Best Practices in JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#Usar_espacios_en_lugar_de_tabulaciones\" >Use spaces instead of tabs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#Indentar_cada_bloque_de_codigo_dentro_de_una_estructura_de_control\" >Indent each block of code within a control structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#Indentar_cada_nivel_de_anidamiento\" >Indent each nesting level<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFEs_obligatoria_la_indentacion_de_codigo_en_JavaScript\" >Is code indentation mandatory in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFLa_indentacion_de_codigo_afecta_el_rendimiento_del_programa_en_JavaScript\" >Does code indentation affect program performance in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFExisten_herramientas_que_ayuden_a_aplicar_la_indentacion_de_codigo_automaticamente\" >Are there tools that help apply code indentation automatically?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-and-good-practices\/#%C2%BFEs_posible_utilizar_la_indentacion_de_codigo_de_manera_incorrecta_en_JavaScript\" >Is it possible to use code indentation incorrectly in JavaScript?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_indentacion_de_codigo\"><\/span>What is code indentation?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Code indentation is the process of adding spaces or tabs to the beginning of each line of code to visually structure a program. Although it is not strictly necessary for the code to work, it is a widely accepted practice and recommended by developers to improve readability and make the code easier to maintain.<\/p>\n<p>Code indentation helps us quickly identify blocks of code, control structures, and function calls. This is especially useful in programming languages with nesting structures, such as JavaScript, where blocks of code are defined by curly braces ({}) and statements within these blocks must be correctly indented to avoid syntax errors.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_es_importante_la_indentacion_de_codigo\"><\/span>Why is code indentation important?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Code indentation has several key benefits:<\/p>\n<ol>\n<li><strong>Readability:<\/strong> By applying proper indentation, our code becomes easier to read and understand both for us and for other developers who may work with it in the future.<\/li>\n<li><strong>Maintainability:<\/strong> A clear, well-indented code structure makes code maintenance and modification easier by quickly identifying where each block of code is located and how they are related to each other.<\/li>\n<li><strong>Error prevention:<\/strong> A lack of indentation can lead to syntax errors that are difficult to identify. With good indentation, you are less likely to make mistakes like forgetting to close a parenthesis or curly brace, or mixing blocks of code incorrectly.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_practicas_de_indentacion_de_codigo_en_JavaScript\"><\/span>Code Indentation Best Practices in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here are some recommendations and best practices for code indentation in JavaScript:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Usar_espacios_en_lugar_de_tabulaciones\"><\/span>Use spaces instead of tabs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Although some text editors allow you to configure the size of tab stops, it is good practice to use spaces for indentation instead of tab stops. Setting a uniform tab size can be complicated in different editors and development environments, which can lead to inconsistencies in indentation.<\/p>\n<p>The most common is to use 2 or 4 spaces for each level of indentation in JavaScript. Here is an example:<\/p>\n<pre><code>\/\/ Code indentation example function greet() { console.log(&quot;Hello, world!&quot;); }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Indentar_cada_bloque_de_codigo_dentro_de_una_estructura_de_control\"><\/span>Indent each block of code within a control structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In JavaScript, control structures like <code>if<\/code>, <code>for<\/code>, <code>while<\/code> y <code>switch<\/code> They contain blocks of code that must be correctly indented. This helps to quickly visualize the instructions that are executed within each of these structures.<\/p>\n<pre><code>\/\/ Example of code indentation in an if structure if (condition) { console.log(&quot;The condition is true&quot;); \/\/ Other instructions here }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Indentar_cada_nivel_de_anidamiento\"><\/span>Indent each nesting level<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If we have nested blocks of code, it is advisable to indent each level of nesting, which helps understand the hierarchy of the code and the relationship between each block. This is especially useful in cases like anonymous functions inside an object or loops inside other loops.<\/p>\n<pre><code>\/\/ Example of code indentation with function nesting var object = { property: &quot;value&quot;, function: function() { setTimeout(function() { console.log(&quot;Nested function executed&quot;); }, 1000); } };<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_obligatoria_la_indentacion_de_codigo_en_JavaScript\"><\/span>Is code indentation mandatory in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Code indentation is not mandatory in JavaScript from a program execution point of view. However, it is widely recommended by the developer community due to the benefits it offers in terms of code readability and maintainability. Additionally, many coding standards and style guides, such as the Google JavaScript style or the Airbnb style, include specific rules for indentation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFLa_indentacion_de_codigo_afecta_el_rendimiento_del_programa_en_JavaScript\"><\/span>Does code indentation affect program performance in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, code indentation has no impact on program performance in JavaScript. The code runs the same regardless of whether it is correctly indented or not. Code indentation is a purely visual practice that improves code readability and understandability, but does not affect performance.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFExisten_herramientas_que_ayuden_a_aplicar_la_indentacion_de_codigo_automaticamente\"><\/span>Are there tools that help apply code indentation automatically?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, there are numerous tools and text editors that offer auto-indentation features, making applying code indentation even easier and faster. Some popular examples include Visual Studio Code, Sublime Text, and Atom.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_utilizar_la_indentacion_de_codigo_de_manera_incorrecta_en_JavaScript\"><\/span>Is it possible to use code indentation incorrectly in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While there is no single &quot;wrong&quot; way to indent code, it is important to follow established coding conventions and standards within the development community. This will ensure that other developers can easily understand and collaborate on your code. Additionally, code with inconsistent or incorrect indentation can make it difficult to detect errors and maintain the code in the long term.<\/p>\n<p>In conclusion, code indentation is a fundamental practice in programming that helps us improve the readability and maintainability of our code. By following the recommendations and best practices mentioned above, we will be able to write clearer and more understandable code, facilitating collaboration and teamwork.<\/p>\n<p>Fountain: <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>When we dive into the world of programming, one of the key concepts we need to master is code indentation. This practice involves applying spaces or tabs to improve the readability and organization of our source code. In this article, we will explore the basics of code indentation and learn the best practices for indenting.<\/p>","protected":false},"author":1,"featured_media":23254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1123],"tags":[205,1034,525,518,642,545,168],"class_list":["post-23253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-fundamentos","tag-blog","tag-buenas","tag-codigo","tag-fundamentos","tag-indentacion","tag-introduccion","tag-practicas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23253"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23254"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}