DWEC

Appearance

Elementos básicos del código JavaScript ​

Un programa JavaScript está formado por distintos elementos sintácticos, como expresiones, sentencias, bloques de código y comentarios.

Antes de estudiar las variables, los operadores o las estructuras de control, conviene conocer cómo se organiza el código y qué función desempeña cada uno de estos elementos.

Líneas de código ​

El código fuente de un programa se escribe habitualmente distribuyendo sus instrucciones en diferentes líneas.

js
const firstName = "Alice";
const age = 25;

console.log(firstName);
console.log(age);

Sin embargo, una línea de código es solamente una unidad visual del archivo y no constituye una categoría sintáctica de JavaScript.

Una sentencia puede ocupar varias líneas:

js
const message = "Welcome to the JavaScript course";

También es posible escribir varias sentencias en una misma línea:

js
const firstName = "Alice";
const age = 25;

Aunque es válido, se recomienda escribir cada sentencia en su propia línea para mejorar la legibilidad.

Expresiones ​

Una expresión (expression) es cualquier fragmento de código que produce un valor.

Los valores literales son las expresiones más sencillas:

js
25;
("Hello");
true;
null;

Un identificador que contiene un valor también puede formar una expresión:

js
age;
firstName;
totalPrice;

Las operaciones producen nuevos valores y, por tanto, también son expresiones:

js
2 + 3;
price * quantity;
age >= 18;
firstName + " " + lastName;

Una llamada a una función es otra clase de expresión, ya que produce un valor, aunque dicho valor pueda ser undefined.

js
Math.random();
Number("25");
console.log("Hello");

También son expresiones el acceso a una propiedad y la asignación de un valor:

js
user.name;
numbers[0];
age = 26;

Las expresiones pueden combinarse para formar expresiones más complejas:

js
price * quantity + shippingCost;

En esta expresión aparecen otras expresiones más pequeñas:

  • price
  • quantity
  • price * quantity
  • shippingCost
  • price * quantity + shippingCost

Sentencias ​

Una sentencia (statement), también denominada instrucción, es una unidad completa de código que indica al programa que debe realizar una acción.

js
const age = 25;

Esta sentencia declara una constante llamada age y la inicializa con el resultado de la expresión 25.

js
console.log(age + 1);

Esta línea contiene distintas expresiones:

  • age
  • 1
  • age + 1
  • console.log(age + 1)

La llamada completa se utiliza como una sentencia. Esta clase de construcción recibe el nombre de sentencia de expresión (expression statement).

Una sentencia puede contener una o varias expresiones:

js
const total = price * quantity;

En este caso:

  • price * quantity es una expresión.
  • const total = price * quantity; es una sentencia de declaración.

Sin embargo, no todas las sentencias contienen expresiones.

js
break;
js
continue;

Estas sentencias se utilizan para modificar la ejecución de determinadas estructuras de control y se estudiarán posteriormente.

Diferencia entre expresión y sentencia ​

La diferencia fundamental es la siguiente:

  • Una expresión produce un valor.
  • Una sentencia indica que debe realizarse una acción.
js
2 + 3;

El código anterior es una expresión cuyo valor es 5.

js
const result = 2 + 3;

El código completo es una sentencia que declara una constante. Dentro de ella, 2 + 3 es una expresión.

INFO

Algunas construcciones pueden actuar simultáneamente como expresión y como parte principal de una sentencia.

js
console.log("Hello");

console.log("Hello") es una expresión de llamada. Al escribirse de manera independiente, forma una sentencia de expresión.

Bloques de código ​

Un bloque de código agrupa cero o más sentencias entre llaves ({}).

js
{
  const firstName = "Alice";
  const age = 25;

  console.log(firstName);
  console.log(age);
}

Los bloques aparecen con frecuencia en funciones y estructuras de control:

js
if (age >= 18) {
  console.log("Adult");
}

En este código:

  • age >= 18 es una expresión.
  • console.log("Adult"); es una sentencia.
  • El código delimitado por { y } es un bloque.
  • La construcción completa es una sentencia if.

Los bloques permiten organizar las instrucciones y delimitar el ámbito de determinadas variables, como se estudiará posteriormente.

Comentarios ​

Los comentarios permiten incluir explicaciones dentro del código fuente. El motor de JavaScript los ignora durante la ejecución.

Comentarios de una línea ​

Los comentarios de una línea comienzan con dos barras (//).

js
// Calculate the final price
const totalPrice = price * quantity;

También pueden escribirse al final de una sentencia:

js
const taxRate = 0.21; // VAT rate

Comentarios de varias líneas ​

Los comentarios de varias líneas comienzan con /* y terminan con */.

js
/*
Calculate the final price by applying
the corresponding tax rate.
*/
const finalPrice = price * (1 + taxRate);

BUENAS PRÁCTICAS

  • Utiliza los comentarios para explicar decisiones, restricciones o aspectos que no resulten evidentes.
  • Evita comentarios que se limiten a repetir literalmente lo que ya expresa el código.
  • Mantén los comentarios actualizados cuando modifiques el programa.
  • Escribe código suficientemente claro para que no necesite comentarios innecesarios.
js
// Increase age by one
age++;

El comentario anterior no aporta información relevante, ya que repite lo que hace la instrucción.

js
// The minimum age is established by the service terms
const minimumAge = 18;

En este caso, el comentario explica el motivo de la decisión.

El punto y coma ​

El punto y coma (;) se utiliza para indicar el final de determinadas sentencias.

js
const firstName = "Alice";
const age = 25;

console.log(firstName);
console.log(age);

JavaScript incorpora un mecanismo denominado inserción automática de punto y coma (Automatic Semicolon Insertion o ASI), que añade puntos y coma en determinados lugares cuando se han omitido.

Por este motivo, el siguiente código suele funcionar:

js
const firstName = "Alice";
const age = 25;

console.log(firstName);
console.log(age);

Sin embargo, el punto y coma no es completamente opcional. Su ausencia puede provocar que JavaScript interprete dos líneas consecutivas como una única sentencia.

js
const message = "Hello"[(1, 2, 3)].forEach((number) => {
  console.log(number);
});

JavaScript puede interpretar el comienzo de la segunda línea como una continuación de la expresión anterior:

js
const message = "Hello"[(1, 2, 3)].forEach((number) => {
  console.log(number);
});

Esto produce un comportamiento distinto del esperado.

El problema se evita terminando la primera sentencia con un punto y coma:

js
const message = "Hello";

[1, 2, 3].forEach((number) => {
  console.log(number);
});

BUENAS PRÁCTICAS

Utiliza puntos y coma de forma coherente al final de las sentencias que los admiten.

Esta convención evita determinadas ambigüedades y facilita que todas las personas que participan en un proyecto utilicen el mismo estilo.

Herramientas de formato como Prettier pueden añadirlos automáticamente.

Espacios en blanco ​

JavaScript ignora generalmente los espacios, las tabulaciones y los saltos de línea que aparecen entre los distintos elementos del código.

Las siguientes sentencias son equivalentes:

js
const age = 25;
js
const     age     =     25;

No obstante, los espacios no pueden insertarse dentro de un identificador, una palabra reservada o determinados operadores.

js
const firstName = "Alice";

El siguiente código no es válido porque firstName se ha dividido en dos identificadores:

js
const first Name = "Alice";

Aunque muchos espacios sean ignorados por el motor de JavaScript, deben utilizarse de manera coherente para facilitar la lectura del programa.

js
const totalPrice = price * quantity;

Resulta menos legible escribir:

js
const totalPrice=price*quantity;

Indentación ​

La indentación consiste en añadir espacios al comienzo de las líneas para representar visualmente la estructura del código.

js
if (age >= 18) {
  console.log("Adult");
  console.log("Access granted");
}

Sin indentación, la relación entre el bloque y sus sentencias resulta menos evidente:

js
if (age >= 18) {
console.log("Adult");
console.log("Access granted");
}

La indentación no suele modificar el comportamiento del programa, pero resulta fundamental para comprender su estructura.

BUENAS PRÁCTICAS

  • Indenta todas las sentencias que se encuentren dentro de un bloque.
  • Utiliza siempre el mismo número de espacios para cada nivel de indentación.
  • Evita mezclar espacios y tabulaciones.
  • Utiliza una herramienta de formato automático, como Prettier, para mantener un estilo uniforme.

Uso de mayúsculas y minúsculas ​

JavaScript distingue entre letras mayúsculas y minúsculas. Esta característica se denomina sensibilidad a mayúsculas y minúsculas (case sensitivity).

js
const age = 25;

console.log(age); // 25
console.log(Age); // ReferenceError

Los identificadores age, Age y AGE son diferentes:

js
const age = 25;
const Age = 30;
const AGE = 35;

console.log(age); // 25
console.log(Age); // 30
console.log(AGE); // 35

También deben respetarse las mayúsculas y minúsculas de las palabras y propiedades proporcionadas por JavaScript.

js
console.log("Hello");

El siguiente código no funciona porque Console no es el mismo identificador que console:

js
Console.log("Hello"); // ReferenceError

Resumen ​

Los principales elementos básicos del código JavaScript son:

  • Una línea de código es una división visual del archivo, pero no necesariamente una sentencia completa.
  • Una expresión es un fragmento de código que produce un valor.
  • Una sentencia es una unidad completa que indica la realización de una acción.
  • Muchas sentencias contienen expresiones, aunque no todas.
  • Un bloque agrupa sentencias entre llaves.
  • Los comentarios permiten documentar el código y no se ejecutan.
  • El punto y coma indica el final de determinadas sentencias y evita posibles ambigüedades.
  • Los espacios en blanco y la indentación mejoran la legibilidad.
  • JavaScript distingue entre letras mayúsculas y minúsculas.