04- 📝 Declaraciones (Statements) en JavaScript

Índice de los temas

• Statements
• JavaScript Programs
• JavaScript Statements
• Semicolons ;
• JavaScript White Space
• JavaScript Line Length and Line Breaks
• JavaScript Code Blocks
• JavaScript Keywords

---

📜 Statements

🧩 Los **statements** o **sentencias** en JavaScript son las **instrucciones** que le indicas al navegador que debe **ejecutar**. Imagina que cada sentencia es un paso en una receta o una orden en una secuencia de acciones. Un programa JavaScript está formado por una o más de estas sentencias, que se ejecutan en el orden en que aparecen, de arriba a abajo.

Las sentencias en JavaScript pueden ser de muchos tipos, realizando diversas acciones. Algunas de las más comunes incluyen:

• Declaraciones de variables: Se utilizan para crear y, opcionalmente, inicializar variables (let, const, var).
  let nombre = "Carlos"; const PI = 3.14159;
• Sentencias de asignación: Se utilizan para asignar valores a las variables (operador =).
  edad = 31;
• Sentencias de control de flujo: Controlan el orden en que se ejecutan las sentencias, permitiendo tomar decisiones (if, else, switch) y realizar repeticiones (for, while, do...while).
  if (edad > 18) { console.log("Es mayor de edad."); }
• Llamadas a funciones: Ejecutan bloques de código reutilizables (funciones).
  saludar("Ana");
• Sentencias de expresión: Cualquier expresión válida en JavaScript que también puede tener efectos secundarios (por ejemplo, una asignación o una llamada a una función).
  contador++;
• Sentencias de retorno: Se utilizan dentro de las funciones para devolver un valor y finalizar la ejecución de la función (return).
  function sumar(a, b) { return a + b; }

🔑 En resumen: Las statements son las unidades básicas de acción en JavaScript. Cada línea de código que realiza una tarea es una sentencia. Los programas JavaScript son secuencias de estas sentencias que el navegador ejecuta para lograr un comportamiento específico.

💻 JavaScript Programs

🚀 Un **programa JavaScript** es esencialmente una **secuencia de instrucciones** o **statements** que el navegador interpreta y ejecuta para llevar a cabo una tarea específica o para añadir interactividad a una página web. Estas instrucciones se ejecutan generalmente en el **orden en que aparecen** en el código, de forma secuencial.

Los programas JavaScript pueden variar enormemente en su complejidad, desde unas pocas líneas de código que realizan una acción simple hasta miles de líneas que componen aplicaciones web completas y sofisticadas.

Características clave de los programas JavaScript:

• Secuencialidad: Las sentencias se ejecutan una tras otra, a menos que una estructura de control de flujo (como un if o un bucle for) altere este orden.
• Lógica: Los programas implementan una lógica específica para manipular datos, responder a eventos del usuario, modificar el DOM (Document Object Model) y realizar otras acciones.
• Interacción: Muchos programas JavaScript están diseñados para interactuar con el usuario a través de eventos (clics, movimientos del ratón, etc.) y modificar la página en respuesta a estas interacciones.
• Modularidad (a menudo): Los programas más grandes suelen estar organizados en funciones y módulos para facilitar la reutilización del código y el mantenimiento.

Ejemplo simple de un programa JavaScript:

// Este es un programa JavaScript simple let mensaje = "¡Hola, mundo!"; // Declaración y asignación de una variable console.log(mensaje); // Llamada a una función para mostrar el mensaje function saludar(nombre) { // Declaración de una función let saludo = "¡Hola, " + nombre + "!"; console.log(saludo); } saludar("Usuario"); // Llamada a la función saludar

En este ejemplo, el programa realiza las siguientes acciones en secuencia:

1. Declara una variable llamada mensaje y le asigna el valor "¡Hola, mundo!".
2. Llama a la función console.log() para mostrar el valor de la variable mensaje en la consola.
3. Declara una función llamada saludar que toma un argumento nombre y muestra un saludo personalizado en la consola.
4. Llama a la función saludar con el argumento "Usuario".

🔑 En resumen: Un programa JavaScript es una secuencia lógica de statements que trabajan juntas para realizar una tarea. La clave para entender los programas JavaScript es comprender cómo se ejecutan las sentencias en orden y cómo las estructuras de control pueden alterar este flujo para crear un comportamiento dinámico e interactivo.

📑 JavaScript Statements

📝 Como mencionamos anteriormente, una **sentencia JavaScript** es una **instrucción individual** que le dice al navegador qué acción realizar. Cada línea de código JavaScript que ejecuta una tarea específica es una sentencia.

Las sentencias pueden realizar diversas acciones, como:

• Declarar variables.
• Asignar valores a variables.
• Realizar operaciones aritméticas.
• Llamar a funciones.
• Crear estructuras de control de flujo (decisiones y bucles).
• Devolver valores desde funciones.

El punto y coma (;):

Tradicionalmente, **cada sentencia JavaScript debe terminar con un punto y coma (;)**. El punto y coma actúa como un **separador**, indicando el final de una sentencia y permitiendo que múltiples sentencias se escriban en la misma línea (aunque esto generalmente se desaconseja por razones de legibilidad).

Ejemplos de sentencias:

let x; // Declaración de una variable x = 5; // Asignación de un valor let y = 10; // Declaración e inicialización let suma = x + y; // Operación aritmética y asignación console.log(suma); // Llamada a una función if (suma > 10) { // Sentencia de control de flujo console.log("La suma es mayor que 10."); }

En este ejemplo, cada línea (excepto el bloque if) es una sentencia individual terminada por un punto y coma.

Omisión del punto y coma (Semicolon Insertion - ASI):

Curiosamente, en muchos casos, JavaScript puede **inferir** el final de una sentencia incluso si el punto y coma se omite. Esto se conoce como **Automatic Semicolon Insertion (ASI)**. Sin embargo, **confiar en ASI puede llevar a comportamientos inesperados y errores difíciles de depurar**. Por lo tanto, **la recomendación general es siempre incluir el punto y coma al final de cada sentencia** para asegurar la claridad y evitar problemas.

🔑 En resumen: Las statements son las acciones que componen un programa JavaScript. Aunque el punto y coma puede ser omitido en algunos casos debido a ASI, es una buena práctica terminar cada sentencia con ; para garantizar la correcta interpretación del código y mejorar la legibilidad.

➖ Semicolons ;

✒️ El **punto y coma (;)** en JavaScript actúa como un **delimitador de sentencias**. Su función principal es **indicar el final de una instrucción** o statement. Esto permite al intérprete de JavaScript saber dónde termina una acción y dónde comienza la siguiente.

La regla general: Terminar las sentencias con ;

Aunque JavaScript tiene la capacidad de realizar la **Automatic Semicolon Insertion (ASI)**, que intenta insertar automáticamente los puntos y comas donde cree que deberían estar, **la práctica recomendada y más segura es siempre incluir explícitamente el punto y coma al final de cada sentencia**. Esto ayuda a:

• Evitar ambigüedades: En ciertos casos, la omisión del punto y coma puede llevar a que JavaScript interprete las líneas de código de una manera diferente a la que se pretendía, causando errores sutiles y difíciles de depurar.
• Mejorar la legibilidad: El punto y coma hace que el código sea más claro y fácil de seguir, especialmente para otros desarrolladores (o para ti mismo en el futuro).
• Prevenir errores inesperados: Confiar en ASI puede resultar en errores cuando se combinan ciertas sentencias o cuando se trabaja con código minificado.

Casos donde la omisión del punto y coma puede ser problemática:

• Cuando una sentencia comienza con ciertos caracteres, como (, [, /, + o -, y la sentencia anterior no termina con un punto y coma.
  let a = 1 let b = a + (function() { return 2 })() // ¡Podría interpretarse incorrectamente!
• Al trabajar con return, break, continue, throw si la palabra clave va seguida de una nueva línea. JavaScript insertará automáticamente un punto y coma después de estas palabras clave si no hay nada más en la misma línea, lo que podría no ser el comportamiento deseado.
  function ejemplo() { return // ASI insertará un punto y coma aquí, devolviendo undefined { valor: 1 }; }

👍 En resumen: Aunque JavaScript puede intentar insertar puntos y comas automáticamente, es una práctica sólida y recomendada **terminar siempre tus sentencias con un punto y coma (;)** para evitar errores inesperados, mejorar la legibilidad y asegurar la correcta interpretación de tu código.

⚪ JavaScript White Space

💨 El término **"white space"** o **espacio en blanco** en JavaScript se refiere a los caracteres que se utilizan para añadir **espacio visual** en el código fuente. Estos caracteres incluyen:

• Espacios (el carácter generado al presionar la barra espaciadora).
• Tabulaciones (el carácter generado al presionar la tecla Tab).
• Saltos de línea (el carácter generado al presionar la tecla Enter o Return).

Impacto en la ejecución: Ninguno

Es importante entender que **JavaScript ignora la mayoría de los espacios en blanco** entre los elementos del lenguaje (como palabras clave, identificadores, operadores, etc.) durante la ejecución del código. Esto significa que la cantidad y el tipo de espacios en blanco que utilices generalmente no afectarán cómo se comporta tu programa.

Los siguientes ejemplos son equivalentes en términos de ejecución:

let mensaje = "Hola"; let mensaje="Hola"; let contador = 0 ; let contador = 0; if (contador > 0) { console.log("Contador es positivo"); } if(contador>0){console.log("Contador es positivo");}

Importancia para la legibilidad: ¡Mucha!

Aunque los espacios en blanco no afectan la ejecución, son **cruciales para mejorar la legibilidad y la organización del código**. Un código bien formateado con espacios en blanco adecuados es mucho más fácil de entender, mantener y depurar. Las convenciones comunes incluyen:

• Usar espacios alrededor de los operadores (=, +, -, etc.).
• Usar tabulaciones o espacios para la indentación dentro de bloques de código ({}), como en las estructuras de control de flujo y las funciones.
• Dejar líneas en blanco para separar secciones lógicas de código, lo que facilita la comprensión de la estructura general.

Ejemplo de código con buen uso de espacios en blanco:

function calcularAreaCirculo(radio) { const PI = 3.14159; let area = PI * radio * radio; return area; } let radioCirculo = 5; let areaCalculada = calcularAreaCirculo(radioCirculo); console.log("El área del círculo es:", areaCalculada);

Este código es mucho más fácil de leer y entender gracias al uso de espacios en blanco para la indentación y la separación lógica.

🔑 En resumen: JavaScript ignora la mayoría de los espacios en blanco en la ejecución, pero estos son fundamentales para la legibilidad y el mantenimiento del código. Adoptar convenciones de espaciado consistentes es una buena práctica de programación.

📏 JavaScript Line Length and Line Breaks

📐 Mantener una **longitud de línea razonable** en tu código JavaScript es una práctica importante para mejorar la **legibilidad**. Las líneas de código demasiado largas pueden dificultar el seguimiento visual y requerir el desplazamiento horizontal, lo cual es inconveniente.

Longitud de línea recomendada:

Aunque no hay una regla estricta, una recomendación común es mantener las líneas de código **por debajo de los 80 a 120 caracteres**. Muchos guías de estilo de código y linters (herramientas para analizar código en busca de errores de estilo) sugieren estos límites.

Saltos de línea (Line Breaks):

Cuando una línea de código se vuelve demasiado larga, es necesario utilizar **saltos de línea** o **quiebres de línea** para dividirla en varias líneas más cortas y legibles. JavaScript permite realizar saltos de línea en casi cualquier punto donde un espacio en blanco es permitido.

Dónde realizar saltos de línea:

Generalmente, es buena práctica romper las líneas en los siguientes lugares:

• Después de una coma (,) en listas de variables, parámetros de funciones, argumentos de funciones o elementos de arrays y objetos.
• Antes o después de un operador (=, +, -, *, /, &&, ||, etc.). Si se rompe antes o después es una cuestión de preferencia, pero la consistencia es clave.
• Después de la apertura de un paréntesis, corchete o llave, especialmente si el contenido es extenso.

Ejemplos de saltos de línea:

// Línea larga sin saltos de línea (difícil de leer) let resultado = unaFuncionMuyLarga(parametro1, parametro2, unTercerParametroRealmenteExtenso, otroParametro); // Línea dividida después de las comas let resultado = unaFuncionMuyLarga( parametro1, parametro2, unTercerParametroRealmenteExtenso, otroParametro ); // Línea larga con operadores if (condicionUno && otraCondicionMuchoMasLarga || !unaTerceraCondicion) { // ... } // Línea dividida antes de los operadores (más común) if (condicionUno && otraCondicionMuchoMasLarga || !unaTerceraCondicion) { // ... } // Inicialización de un objeto largo let miObjeto = { propiedadUno: "valorUnoExtremadamenteLargo", propiedadDos: 12345, propiedadTres: true, propiedadCuatro: [ "elementoUno", "elementoDosMuyLargo" ] };

Consideraciones:

• La consistencia en la forma de realizar los saltos de línea es importante para mantener un estilo de código uniforme en todo el proyecto.
• Las herramientas de formateo de código (como Prettier) pueden automatizar el proceso de aplicar una longitud de línea y un estilo de saltos de línea consistentes.

🔑 En resumen: Mantener una longitud de línea razonable y utilizar saltos de línea estratégicos son prácticas clave para escribir código JavaScript legible y mantenible. Esto facilita la colaboración y reduce la probabilidad de errores.

🔲 JavaScript Code Blocks

🧱 Los **bloques de código** en JavaScript son **grupos de una o más sentencias** que se encierran entre **llaves** (`{}`). Estos bloques se utilizan para **agrupar lógicamente instrucciones relacionadas** y tratarlas como una sola unidad.

Usos comunes de los bloques de código:

• Estructuras de control de flujo: Los bloques de código son esenciales en las sentencias if, else, for, while, do...while, y switch para definir el conjunto de sentencias que se ejecutarán bajo ciertas condiciones o en bucle.
• Declaraciones de funciones: El cuerpo de una función (el código que se ejecuta cuando se llama a la función) siempre está encerrado en un bloque de código.
• Declaraciones de clases: Similar a las funciones, el cuerpo de una clase también se define dentro de un bloque de código.
• Bloques try...catch...finally: Se utilizan para el manejo de errores, donde el bloque try contiene el código que podría generar un error, y los bloques catch y finally definen cómo manejar ese error y qué hacer al final.

Características importantes de los bloques de código:

• Agrupación lógica: Permiten organizar el código de manera coherente, facilitando la lectura y el entendimiento de la estructura del programa.
• Ámbito (Scope): Los bloques de código crean un **ámbito de bloque** para las variables declaradas con let y const (introducido en ES6). Esto significa que estas variables solo son accesibles dentro del bloque donde se declaran y en cualquier bloque anidado dentro de él. Las variables declaradas con var tienen un ámbito de función o global, no de bloque.
• Ejecución condicional o repetitiva: Las sentencias dentro de un bloque de código se ejecutan juntas, ya sea condicionalmente (si la condición de un if se cumple) o repetidamente (en un bucle for o while).

Ejemplos de bloques de código:

// Bloque if if (edad >= 18) { console.log("Es mayor de edad."); let permiso = true; // 'permiso' solo existe dentro de este bloque } // Bloque for for (let i = 0; i < 5; i++) { console.log("Iteración:", i); } // Bloque de función function saludar(nombre) { let saludo = "Hola, " + nombre + "!"; console.log(saludo); return saludo; }

En estos ejemplos, las llaves {} delimitan los bloques de código que contienen las sentencias a ejecutar bajo la condición del if, en cada iteración del for, o cuando se llama a la función saludar.

🔑 En resumen: Los bloques de código son una construcción fundamental en JavaScript para agrupar sentencias, definir el alcance de las variables (con let y const), y controlar el flujo de ejecución del programa.

🗝️ JavaScript Keywords

🔑 Las **palabras clave** (o **keywords**) en JavaScript son **palabras reservadas** que tienen un **significado especial** para el intérprete del lenguaje. Estas palabras forman la **sintaxis fundamental** de JavaScript y se utilizan para definir la estructura y el comportamiento del código.

Características principales de las palabras clave:

• Reservadas: No puedes usar palabras clave como nombres para tus variables, funciones, clases u otros identificadores. Intentar hacerlo resultará en un error de sintaxis.
• Significado específico: Cada palabra clave tiene una función predefinida en el lenguaje. Por ejemplo, let se usa para declarar variables, if para iniciar una sentencia condicional, y function para declarar una función.
• Parte de la sintaxis: Las palabras clave son elementos esenciales de la gramática de JavaScript y ayudan a definir la estructura lógica del código.

Ejemplos de palabras clave comunes en JavaScript:

• Declaraciones: var, let, const, class, function, return.
• Estructuras de control de flujo: if, else, switch, case, break, continue, for, while, do.
• Manejo de errores: try, catch, finally, throw.
• Operadores especiales: typeof, instanceof, new, delete, void.
• Palabras clave relacionadas con módulos: import, export.
• Otras palabras clave: this, super, async, await, yield, in, of.

Ejemplo de uso de palabras clave:

let nombre = "Sofía"; // 'let' es una palabra clave para declarar una variable if (nombre === "Sofía") { // 'if' es una palabra clave para una sentencia condicional console.log("El nombre es Sofía."); } else { // 'else' es otra palabra clave para la sentencia condicional console.log("El nombre no es Sofía."); } function saludar(nombre) { // 'function' es una palabra clave para declarar una función return "¡Hola, " + nombre + "!"; // 'return' es una palabra clave para devolver un valor }

Es crucial familiarizarse con las palabras clave de JavaScript para poder escribir código válido y comprensible. A medida que aprendas más sobre el lenguaje, te encontrarás con estas palabras repetidamente y comprenderás su función específica.

📚 Nota: JavaScript también tiene algunas **palabras reservadas para uso futuro**, lo que significa que aunque no tienen una función actual en el lenguaje, están reservadas y no deben usarse como identificadores para evitar posibles conflictos en el futuro.

🔑 En resumen: Las palabras clave son los bloques de construcción fundamentales de la sintaxis de JavaScript. Son palabras reservadas con significados especiales que definen la estructura y el comportamiento del código. No se pueden usar como nombres para variables u otros identificadores.

Ir al indice