A medida que escribimos líneas de código en nuestro programa, este se irá complicando y nos tomará más tiempo leer lo que hemos hecho y comprobar si hay errores o buscar como solucionarlos. Sin embargo, para mejorar la rapidez con la que leemos (y entendemos) el código, una buena práctica es usar la indentación.
¿Qué es la indentación?
Se llama indentación de código al hecho de utilizar sangrado (mover ligeramente hacia la derecha) las líneas de código, facilitando así la lectura, e indicando visualmente si nos encontramos en el interior de una estructura concreta, en el programa principal, etc...
Observemos el siguiente ejemplo (el código ahora no es importante, simplemente observa los espacios iniciales):
function action() {
for (i = 0; i < 10; i++) {
console.log("Iteración #", i);
if (i == 9) {
console.log("Estoy en la última iteración");
} // if
} // for
} // function
En el ejemplo anterior se puede observar que ciertas líneas tienen el texto indentado, incluso a diferentes niveles. Los programadores indentamos el código para mostrar visualmente que fragmento de código actúa dentro de otro. De esta forma, es muy sencillo saber a que nivel está actuando la línea de código en cuestión.
Por ejemplo, observando el ejemplo podemos ver rápidamente que el for actúa dentro de la function, y que el if está dentro del for, simplemente observando el nivel de indentación.
En algunos lenguajes de programación, como Python, la indentación es una característica obligatoria, que acostumbra al programador a indentar correctamente. Es por esta razón, que Python se indica como un lenguaje ideal para adquirir buenos hábitos de programación.
Observemos este otro código (intencionadamente mal indentado):
function action() { for (i = 0; i < 10; i++) {
console.log("Iteración #", i);
if (i == 9) console.log("Estoy en la última iteración"); }
}
En principio, puede parecer que este código aprovecha mejor el espacio, porque ocupa menos, pero es mucho menos legible que el ejemplo anterior debido a su falta de indentación, ya que no queda claro que instrucciones están dentro de otras.
Una buena práctica de programación inicial es aprender a indentar correctamente las líneas de código que escribamos. Muchos editores de texto incorporan complementos que permiten que al guardar, se revise la indentación del código y se corrija automáticamente.
Una buena práctica a la hora de programar en Javascript es ayudarnos de un linter como ESLint: una herramienta que analiza nuestro código en tiempo real y nos alerta de posibles errores de escritura. No se centra en corregir errores de funcionamiento, sino en la coherencia y la sintaxis escrita.
¿Tabuladores o espacios?
A la hora de indentar código hay dos aproximaciones popularmente extendidas: usar espacios o usar tabuladores. Utilizar una u otra estrategia de tabulación depende del programador, pero lo importante es ser coherente y siempre utilizar la misma.
Espacios: Si decidimos utilizar espacios, ten en cuenta que puedes elegir indentar con 2, 3 ó 4 espacios (por ejemplo). En los ejemplos de esta página suelo utilizar indentación a 2 espacios.
Tabuladores: Si decidimos utilizar tabuladores, debes saber que el carácter utilizado por la tecla TAB no es el mismo que el de los espacios. Por ejemplo, un tabulador puede ser visualmente equivalente a 3 espacios, pero sólo ocupará un carácter. Muchos editores convierten automáticamente un tabulador a un número de espacios concreto.
En VSCode puedes activar la visualización de esta característica mediante puntos
·(espacios) o flechas->(tabulador), pulsando la tecla F1 y buscando/activando la opción «Alternar representación de espacio en blanco» (Toggle Render Whitespace)
