---

Utilice siempre las mismas convenciones de codificación para todos sus proyectos de JavaScript.

---

Convenciones de codificación de JavaScript

Las convenciones de codificación son pautas de estilo para la programación. Normalmente cubren:

• Reglas de denominación y declaración de variables y funciones.

• Reglas para el uso de espacios en blanco, sangrías y comentarios.

• Prácticas y principios de programación.

Las convenciones de codificación garantizan la calidad:

• Mejorar la legibilidad del código

• Facilitar el mantenimiento del código

Las convenciones de codificación pueden ser reglas documentadas que deben seguir los equipos o simplemente ser su práctica de codificación individual.

Esta página describe las convenciones generales del código JavaScript utilizadas por W3Schools. También deberías leer el siguiente capítulo, "Mejores prácticas", y aprender cómo evitar errores de codificación.

---

Nombres de variables

En W3schools utilizamos camelCase para los nombres de identificadores (variables y funciones).

Todos los nombres comienzan con una letra.

Al final de esta página, encontrará una discusión más amplia sobre las reglas de nomenclatura.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

---

Espacios alrededor de los operadores

Coloque siempre espacios alrededor de los operadores ( = + - * / ), y después de las comas:

let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];

---

Sangría de código

Utilice siempre 2 espacios para sangría de bloques de código:

Funciones:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

No utilice tabs (tabuladores) para realizar sangrías. Cada editor interpreta los tabs de forma diferente.

---

Reglas de declaración

Reglas generales para declaraciones simples:

• Termine siempre una declaración simple con un punto y coma.

Ejemplos:

const cars = ["Volvo", "Saab", "Fiat"];

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Reglas generales para declaraciones complejas (compuestas):

• Coloque el corchete de apertura al final de la primera línea.

• Utilice un espacio antes del corchete de apertura.

• Coloque el corchete de cierre en una nueva línea, sin espacios iniciales.

• No termine una declaración compleja con un punto y coma.

Funciones:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

Bucles:

for (let i = 0; i < 5; i++) {
  x += i;
}

Condicionales:

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

---

Reglas de objetos

Reglas generales para definiciones de objetos:

• Coloque el corchete de apertura en la misma línea que el nombre del objeto.

• Utilice dos puntos más un espacio entre cada propiedad y su valor.

• Utilice comillas alrededor de valores de cadena, no de valores numéricos.

• No agregue una coma después del último par propiedad-valor.

• Coloque el corchete de cierre en una nueva línea, sin espacios iniciales.

• Termine siempre la definición de un objeto con un punto y coma.

Ejemplo:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Los objetos cortos se pueden escribir comprimidos, en una línea, usando espacios solo entre propiedades, así:

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

---

Line Length < 80

Para facilitar la lectura, evite líneas de más de 80 caracteres.

Si una declaración de JavaScript no cabe en una línea, el mejor lugar para dividirla es después de un operador o una coma.

Ejemplo:

document.getElementById("demo").innerHTML =
"Hello Dolly.";

---

Convenciones de nombres

Utilice siempre la misma convención de nomenclatura para todo su código. Por ejemplo:

• Nombres de variables y funciones escritos como camelCase

• Variables globales escritas en MAYÚSCULAS (Nosotros no, pero es bastante común)

• Constantes (como PI) escritas en MAYÚSCULAS

¿Debería utilizar guiones (hyp-hens), camelCase o under_scores en los nombres de las variables?

Esta es una pregunta que los programadores suelen discutir. La respuesta depende de a quién se le pregunte:

Guiones en HTML y CSS:

Los atributos HTML5 pueden comenzar con data- (data-quantity, data-price).

CSS usa guiones en los nombres de propiedades (font-size).

Los guiones pueden confundirse con una operación de resta. No se permiten guiones en los nombres de JavaScript.

Guines bajo (underscores)

Muchos programadores prefieren utilizar guiones bajos (fecha_de_nacimiento), especialmente en bases de datos SQL.

Los guiones bajos se utilizan a menudo en la documentación PHP.

PascalCase

Los programadores de C suelen preferir PascalCase.

camelCase

camelCase es utilizado por el propio JavaScript, por jQuery y otras bibliotecas de JavaScript.

No empiece los nombres con el signo $. Te pondrá en conflictos con muchos nombres de librerías JavaScript.

---

Cargando JavaScript en HTML

Utilice una sintaxis simple para cargar scripts externos (el atributo de tipo no es necesario):

<script src="myscript.js"></script>

---

Accediendo a elementos HTML

Una consecuencia del uso de estilos HTML "desordenados" puede provocar errores de JavaScript.

Estas dos declaraciones de JavaScript producirán resultados diferentes:

const obj = getElementById("Demo")

const obj = getElementById("demo")

Si es posible, utilice la misma convención de nomenclatura (que JavaScript) en HTML.

---

Extensiones de archivo

Los archivos HTML deben tener una extensión .html

Los archivos CSS deben tener una extensión .css

Los archivos JavaScript deben tener una extensión .js

---

Utilice nombres de archivos en minúsculas

La mayoría de los servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivos:

No se puede acceder a london.jpg como London.jpg.

Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas:

Se puede acceder a london.jpg como London.jpg o london.jpg.

Si utiliza una combinación de mayúsculas y minúsculas, debe ser extremadamente consistente.

Si pasa de un servidor que no distingue entre mayúsculas y minúsculas a un servidor que sí lo hace, incluso los errores más pequeños pueden dañar su sitio web.

Para evitar estos problemas, utilice siempre nombres de archivos en minúsculas (si es posible).

---

Rendimiento

Las computadoras no utilizan convenciones de codificación. La mayoría de las reglas tienen poco impacto en la ejecución de los programas.

La sangría y los espacios adicionales no son significativos en escrituras pequeñas.

Para el código en desarrollo, se debe preferir la legibilidad. Se deben minimizar los guiones de producción más extensos.

---

W3Schools es el sitio de desarrolladores web más grande del mundo.