Indentación de código

Introducción a la legibilidad en Javascript

javascript ᐳ Operadores básicos ᐳ Indentación de código ᐳ Convenciones de nombres

A medida que escribimos líneas de código en nuestro programa, se irá complicando y nos tomará más tiempo leer lo que hemos hecho y comprobar si hay errores o como solucionarlos. Sin embargo, para mejorar la rapidez con la que leemos (y entendemos) nuestro 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) en las líneas de código para facilitar la lectura, e indicar visualmente si nos encontramos en el interior de una función, bucle, condicional, etc...

Observemos el siguiente ejemplo:

function bucle() {
  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 al utilizar estructuras de control, bucles o funciones, los programadores indentamos el código que hay en su interior. De esta forma, es muy sencillo saber a que nivel está actuando la línea de código en cuestión.

Observemos este otro código (mal indentado):

function bucle() { 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.

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.

Una buena práctica de programación es indentar correctamente las líneas de código que escribamos, no obstante, la mayoría de los editores están configurados para que al pulsar ENTER se indenten automáticamente.

¿Tabuladores o espacios?

A la hora de indentar código hay dos aproximaciones: 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.

Una buena práctica a la hora de programar es ayudarnos de un linter como ESLint, una herramienta que analiza nuestro código (generalmente en tiempo real) y nos alerta de posibles errores de escritura, no centrándose en el propio funcionamiento del código, sino en la coherencia y escritura correcta. Más adelante abordaremos este tema.

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)

Tabla de contenidos