{"id":22952,"date":"2024-01-29T13:13:21","date_gmt":"2024-01-29T12:13:21","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/introduccion-a-la-indentacion-de-codigo-fundamentos-de-la-indentacion-en-javascript-en-espanol-3\/"},"modified":"2024-06-03T17:30:22","modified_gmt":"2024-06-03T16:30:22","slug":"introduccion-a-la-indentacion-de-codigo-fundamentos-de-la-indentacion-en-javascript-en-espanol-3","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-of-indentation-in-javascript-in-spanish-3\/","title":{"rendered":"Introduction to code indentation: Fundamentals of indentation in Javascript in Spanish"},"content":{"rendered":"<p>Code indentation is one of the fundamental concepts in programming, especially in the Javascript programming language. In this article, I&#039;ll walk you through the basics of code indentation and how to properly apply it in your projects. You will learn why indentation is important, how it is done in Javascript, and how it can improve the readability and maintainability of your code.<\/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-of-indentation-in-javascript-in-spanish-3\/#%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-of-indentation-in-javascript-in-spanish-3\/#Importancia_de_la_indentacion_de_codigo\" >Importance of code indentation<\/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-of-indentation-in-javascript-in-spanish-3\/#Indentacion_de_codigo_en_Javascript\" >Code indentation in Javascript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-of-indentation-in-javascript-in-spanish-3\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-of-indentation-in-javascript-in-spanish-3\/#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-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-of-indentation-in-javascript-in-spanish-3\/#%C2%BFLa_indentacion_de_codigo_afecta_el_funcionamiento_del_codigo_en_Javascript\" >Does code indentation affect how code works in Javascript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/introduction-to-code-indentation-fundamentals-of-indentation-in-javascript-in-spanish-3\/#%C2%BFQue_convencion_se_utiliza_para_la_indentacion_en_Javascript\" >What convention is used for indentation in Javascript?<\/a><\/li><li class='ez-toc-page-1 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-of-indentation-in-javascript-in-spanish-3\/#%C2%BFPor_que_es_importante_aplicar_una_correcta_indentacion_de_codigo\" >Why is it important to apply correct code indentation?<\/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-of-indentation-in-javascript-in-spanish-3\/#%C2%BFExisten_herramientas_que_ayuden_a_realizar_la_indentacion_de_codigo_en_Javascript\" >Are there tools that help perform code indentation 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-of-indentation-in-javascript-in-spanish-3\/#%C2%BFEs_obligatorio_seguir_una_convencion_de_indentacion_en_Javascript\" >Is it mandatory to follow an indentation convention 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 indentation or white space to the beginning of lines of code to structure and organize the code in a visually pleasing way. Although indentation does not directly affect the functioning of the code, it plays a crucial role in its readability.<\/p>\n<p>The most common indentation conventions in Javascript are to use two or four white spaces as indentations. This helps distinguish blocks of code such as functions, loops, and conditionals, improving code understanding for both you and other developers who may work on the project.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Importancia_de_la_indentacion_de_codigo\"><\/span>Importance of code indentation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The importance of code indentation lies in its ability to make code more readable and understandable. By adding appropriate indentation, you can visually separate blocks of code and make the logical structure of the program easier to follow.<\/p>\n<p>Additionally, code indentation makes code maintenance and debugging easier. When code is properly indented, it is easier to identify errors and make changes or improvements in the future. It also helps prevent common mistakes, such as forgetting to close a brace or a parenthesis.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Indentacion_de_codigo_en_Javascript\"><\/span>Code indentation in Javascript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Javascript, indentation follows the common conventions of two or four whitespace. However, it is important to note that indentation also varies depending on the coding style adopted in the project or developer community.<\/p>\n<p>Here is an example of how indentation should be done in Javascript:<\/p>\n<pre>\nfunction greet() { if (condition) { console.log(&quot;Hello World&quot;); } else { console.log(&quot;Goodbye World&quot;); } }\n<\/pre>\n<p>In this example, two blank spaces are used for each level of indentation. The &quot;greet&quot; function has one indentation level, the &quot;if&quot; block has another indentation level, and the &quot;else&quot; block has the same indentation level as the &quot;if&quot; block. This creates a visually coherent structure and makes the code easy to read.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Code indentation is a fundamental aspect of programming. Although it does not directly affect the operation of the code, it improves its readability and maintainability. In Javascript, the common convention is to use two or four whitespace for indentation. By applying indentation properly, you can make your code easier to understand, maintain, and debug.<\/p>\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%BFLa_indentacion_de_codigo_afecta_el_funcionamiento_del_codigo_en_Javascript\"><\/span>Does code indentation affect how code works in Javascript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, code indentation does not directly affect the functioning of code in Javascript. It is a recommended practice to improve the readability and maintainability of the code.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_convencion_se_utiliza_para_la_indentacion_en_Javascript\"><\/span>What convention is used for indentation in Javascript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In Javascript, two or four white spaces are commonly used for indentation. However, this may vary depending on the coding style adopted in the project or developer community.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_es_importante_aplicar_una_correcta_indentacion_de_codigo\"><\/span>Why is it important to apply correct code indentation?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Correct code indentation is important because it improves the readability and understanding of the code. It makes code easier to maintain and debug, prevents common errors, and makes the logical structure of the program easier to follow.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFExisten_herramientas_que_ayuden_a_realizar_la_indentacion_de_codigo_en_Javascript\"><\/span>Are there tools that help perform code indentation in Javascript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, there are several tools that can help you perform code indentation in Javascript automatically, such as Prettier or ESLint. These tools apply predefined indentation rules and format your code accordingly.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_obligatorio_seguir_una_convencion_de_indentacion_en_Javascript\"><\/span>Is it mandatory to follow an indentation convention in Javascript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, it is not mandatory to follow a specific indentation convention in Javascript. However, following a consistent indentation convention throughout the project improves consistency and makes it easier to collaborate with other developers.<\/p>","protected":false},"excerpt":{"rendered":"<p>La indentaci\u00f3n de c\u00f3digo es uno de los conceptos fundamentales en la programaci\u00f3n, especialmente en el lenguaje de programaci\u00f3n Javascript. En este art\u00edculo, te guiar\u00e9 a trav\u00e9s de los fundamentos de la indentaci\u00f3n de c\u00f3digo y c\u00f3mo aplicarla correctamente en tus proyectos. Aprender\u00e1s por qu\u00e9 la indentaci\u00f3n es importante, c\u00f3mo se realiza en Javascript y [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1123],"tags":[205,525,580,518,642,545,185],"class_list":["post-22952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-fundamentos","tag-blog","tag-codigo","tag-espanol","tag-fundamentos","tag-indentacion","tag-introduccion","tag-javascript"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22952","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=22952"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22953"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}