En esta sección aprenderemos sobre los fundamentos de JavaScript, su sintaxis básica, variables, operadores, y cómo estos elementos se combinan para crear programas dinámicos y funcionales. JavaScript es un lenguaje de programación interpretado que permite a los desarrolladores construir interactividad en las páginas web. Las variables son contenedores para almacenar datos, que pueden ser manipulados con operadores para realizar cálculos o lógica. Comprender estos conceptos es esencial para cualquier aspirante a desarrollador web.

Fundamentos de JavaScript

2.1 Sintaxis básica

JavaScript utiliza una sintaxis similar a la de otros lenguajes de programación como C y Java. Los comentarios en JavaScript se pueden escribir de dos maneras:

Comentarios de una sola línea:

se escriben con dos barras diagonales (//) y se utilizan para comentarios cortos. Ejemplo:

// Este es un comentario de una sola línea

Comentarios de varias líneas:

se escriben entre /* y */ y se utilizan para comentarios más largos. Ejemplo:

/* Este es un comentario
de varias líneas */

Instrucciones JavaScript

Las instrucciones en JavaScript finalizan con un punto y coma (;), aunque en algunos casos el punto y coma es opcional.

Ejemplo:

let x = 5;
let y = 10;

2.2 Variables y tipos de datos

¿Qué es una variable en JavaScript y para qué sirve?

Las variables son contenedores de información que se utilizan en la programación para almacenar datos. En JavaScript, las variables se usan para almacenar valores que pueden cambiar durante la ejecución de un programa. Estos valores pueden ser de diferentes tipos de datos, como números, cadenas de texto, booleanos, objetos, arreglos, etc.

Las variables son fundamentales en la programación porque permiten:

1. Almacenar y manipular datos: Puedes asignar un valor a una variable, y luego acceder o modificar ese valor según sea necesario en tu código.
2. Reutilizar valores: En lugar de escribir el mismo valor una y otra vez en tu código, puedes almacenarlo en una variable y hacer referencia a ella tantas veces como sea necesario.
3. Realizar cálculos y operaciones: Puedes usar variables para realizar cálculos matemáticos, concatenar cadenas de texto, y realizar otras operaciones.
4. Controlar el flujo del programa: Las variables se utilizan en estructuras de control de flujo, como condicionales (if statements) y bucles (loops), para determinar qué código se ejecutará en función de ciertos valores.

Cómo escribir una variable en JavaScript

Para escribir una variable en JavaScript, sigue estos pasos:

1. Elige el tipo de variable: JavaScript tiene tres tipos de variables principales: var, let y const.
   • var se usaba antes para declarar variables, pero actualmente se recomienda utilizar let y const.
   • let se usa cuando quieres que una variable pueda cambiar de valor. Tiene un ámbito de bloque (block scope), lo que significa que solo está disponible dentro del bloque de código (como un bucle o una función) donde se declaró.
   • const se usa cuando quieres que una variable sea constante, es decir, que no cambie de valor. También tiene un ámbito de bloque.
2. Escribe el nombre de la variable: El nombre de la variable puede ser cualquier combinación de letras, números y guiones bajos (_), pero debe comenzar con una letra o guión bajo. No se pueden usar espacios, caracteres especiales (excepto guión bajo), números al inicio o palabras reservadas de JavaScript.
   • Nombres de variables bien escritos: nombre, edad, esVerdadero, numUsuarios.
   • Nombres de variables mal escritos: 1nombre (no puede comenzar con un número), nombre usuario (no puede contener espacios), var (no puede ser una palabra reservada).
3. Asigna un valor a la variable: Después del nombre de la variable, escribe el signo igual (=) seguido del valor que deseas asignar a la variable. El valor puede ser un número (let edad = 30;), una cadena de texto (entre comillas simples ' o dobles " como let nombre = "Juan";), un booleano (let esVerdadero = true;), un objeto (let persona = { nombre: "Juan", edad: 30 };), un arreglo (let numeros = [1, 2, 3];), etc. En resumen, las cadenas de texto (strings) y las plantillas literales deben ir entre comillas, mientras que los números, booleanos, valores nulos, indefinidos, objetos y arreglos (tipos de datos que conoceremos más adelante) se escriben directamente sin comillas.
4. Finaliza la declaración con un punto y coma (;): Es una buena práctica terminar cada declaración de variable con un punto y coma, aunque en JavaScript no es estrictamente necesario en todos los casos.

Ejemplos:

let nombre = "Juan"; // Una variable llamada nombre con el valor "Juan"
const edad = 30; // Una constante llamada edad con el valor 30
let esVerdadero = true; // Una variable llamada esVerdadero con el valor true
const numeros = [1, 2, 3]; // Una constante llamada numeros con un arreglo de valores

Es importante tener en cuenta que let y const tienen un ámbito de bloque, lo que significa que su valor solo estará disponible dentro del bloque de código donde se declararon. Por otro lado, var tiene un ámbito de función o global.

Siempre que sea posible, se recomienda utilizar const en lugar de let, ya que las variables constantes previenen errores al evitar que su valor sea reasignado accidentalmente.

Notas:

• Los nombres de las variables deben ser descriptivos y significativos para facilitar la lectura y comprensión del código.
• JavaScript es un lenguaje débilmente tipado, lo que significa que no es necesario especificar el tipo de dato de una variable al declararla. Sin embargo, las variables tienen un tipo de dato asociado en tiempo de ejecución.
• En JavaScript, las variables son sensibles a mayúsculas y minúsculas, lo que significa que nombre y Nombre son consideradas como dos variables diferentes.

Tipos de Datos en JavaScript

En el mundo de la programación, los tipos de datos son fundamentales para representar y manipular información de manera eficiente. En JavaScript, un lenguaje de programación ampliamente utilizado en el desarrollo web y otras áreas, los tipos de datos juegan un papel crucial. A continuación, exploraremos en profundidad los diferentes tipos de datos en JavaScript, su propósito, cómo se utilizan y ejemplos claros para una mejor comprensión.

¿Qué son los tipos de datos?
Los tipos de datos son clasificaciones que definen el tipo de valores que una variable puede almacenar en JavaScript. Cada tipo de dato tiene su propio conjunto de características, operaciones y reglas, lo que determina cómo se debe tratar y manipular el valor correspondiente. Existen 2 tipos de datos en JavaScript, los datos primitivos y los datos no primitivos (objetos), la cuales se clasifican en otras y las conoceremos a continuación.

Tipos de datos primitivos en JavaScript
Los tipos de datos primitivos son los tipos de datos más básicos y fundamentales en JavaScript. Son valores inmutables, lo que significa que no se pueden modificar directamente después de su creación. Los tipos de datos primitivos en JavaScript son:

1. Números:

• Los números en JavaScript pueden ser enteros (sin decimales) o números de punto flotante (con decimales).
• Se utilizan para realizar cálculos matemáticos y operaciones numéricas.
• Ejemplos:

let edad = 30; // Entero
let precio = 19.99; // Número de punto flotante
let resultado = 10 + 5; // 15

2. Cadenas de texto (Strings):

• Las cadenas de texto son secuencias de caracteres alfanuméricos, como palabras, frases o cualquier tipo de texto.
• Se utilizan para representar y manipular datos de texto.
• Se escriben entre comillas simples '' o comillas dobles "".
• Ejemplos:

let nombre = "Juan"; // Cadena de texto
let saludo = "Hola, ¿cómo estás?"; // Cadena de texto con espacios y signos de puntuación

3. Booleanos:

• Los valores booleanos son true (verdadero) o false (falso).
• Se utilizan principalmente en operaciones lógicas y condicionales.
• Ejemplos:

let esMayor = true; // Booleano verdadero
let esEstudiante = false; // Booleano falso

4. Undefined:

• undefined es un valor especial que indica que una variable ha sido declarada pero no tiene un valor asignado.
• También se asigna automáticamente a variables que no se han inicializado.
• Ejemplo:

let variable; // variable tiene el valor undefined
console.log(variable); // Salida: undefined

5. Null:

• null es un valor especial que indica la ausencia intencional de un valor.
• Se utiliza para representar un valor nulo o inexistente.
• Ejemplo:

let persona = null; // persona no tiene un valor definido

6. Symbol:

• Los símbolos son un tipo de dato único e inmutable, utilizado como identificador de propiedades de objeto.
• Se introducen en ECMAScript 6 (ES6) y su principal uso es evitar conflictos de nombres de propiedades en objetos.
• Se crean utilizando el constructor Symbol().
• Ejemplo:

let id = Symbol("id");
let usuario = {
  [id]: 123
};
console.log(usuario[id]); // Salida: 123

Tipos de datos no primitivos (Objetos)
Los tipos de datos no primitivos, también conocidos como objetos, son estructuras de datos más complejas que permiten almacenar colecciones de datos y entidades complejas. A diferencia de los tipos de datos primitivos, los objetos son mutables, lo que significa que se pueden modificar después de su creación. Los tipos de datos objeto más comunes en JavaScript son:

1. Objeto regular:

• Un objeto es una colección desordenada de propiedades clave-valor.
• Se utilizan para representar entidades del mundo real, como personas, productos, etc.
• Ejemplos:

let persona = {
  nombre: "Ana",
  edad: 25,
  estudiante: true
};

console.log(persona.nombre); // Salida: "Ana"

2. Array:

• Los arrays son estructuras de datos que permiten almacenar colecciones ordenadas de valores.
• Cada valor del array tiene un índice numérico asociado, que comienza desde 0.
• Se utilizan para almacenar y manipular listas de datos.
• Ejemplos:

let frutas = ["manzana", "banana", "naranja"];
console.log(frutas[0]); // Salida: "manzana"

let numeros = [10, 20, 30, 40];
console.log(numeros.length); // Salida: 4

3. Función:

• Una función es un conjunto de instrucciones reutilizables que pueden aceptar entradas (parámetros) y devolver salidas.
• Se utilizan para encapsular y reutilizar bloques de código.
• Ejemplos:

function sumar(a, b) {
  return a + b;
}

let resultado = sumar(3, 5); // resultado = 8

4. Date:

• El objeto Date representa un momento específico en el tiempo.
• Se utiliza para trabajar con fechas y horas.
• Ejemplo:

let fechaActual = new Date();
console.log(fechaActual); // Salida: La fecha y hora actuales

5. RegExp:

• El objeto RegExp representa una expresión regular, que se utiliza para buscar y manipular patrones de texto.
• Se utiliza en operaciones de búsqueda, reemplazo y validación de patrones de texto.
• Ejemplo:

let patron = /^[a-zA-Z]+$/;
let cadena = "Hola";
console.log(patron.test(cadena)); // Salida: true

Además de estos tipos de datos principales, JavaScript también cuenta con otros tipos de datos más avanzados, como Map, Set, WeakMap, WeakSet, entre otros, que se introdujeron en versiones más recientes del lenguaje.

En conclusión, los tipos de datos en JavaScript son fundamentales para representar y manipular información de manera efectiva. Comprender los diferentes tipos de datos, sus características y cómo se utilizan es esencial para escribir código limpio, eficiente y libre de errores. Ya sea que estés trabajando con números, cadenas de texto, booleanos, objetos o arrays, dominar los tipos de datos te permitirá aprovechar al máximo el potencial de JavaScript y construir aplicaciones web modernas y robustas.

En resumen los tipos de datos en JavaScript incluyen:

• String: una secuencia de caracteres. Ejemplo: let nombre = "Juan";
• Number: un número entero o decimal. Ejemplo: let edad = 30; let precio = 19.99;
• Boolean: un valor verdadero o falso. Ejemplo: let esEstudiando = true; let tieneTrabajo = false;
• Null: un valor nulo. Ejemplo: let valorNulo = null;
• Undefined: un valor indefinido. Ejemplo: let valorIndefinido;
• Object: un objeto que contiene propiedades y métodos. Ejemplo:

let persona = {
  nombre: "Juan",
  edad: 30,
  saludar: function() {
    console.log("Hola, soy " + this.nombre);
  }
};

• Array: una colección ordenada de valores. Ejemplo: let numeros = [1, 2, 3, 4, 5];

2.3 Operadores en JavaScript:

En el mundo de la programación, los operadores son herramientas fundamentales que nos permiten realizar operaciones y manipular datos. En JavaScript, los operadores son una parte esencial del lenguaje y nos brindan la capacidad de realizar cálculos, comparaciones, asignaciones y mucho más. A continuación, exploraremos en profundidad los diferentes tipos de operadores en JavaScript, su propósito, cómo se utilizan y ejemplos claros para una mejor comprensión.

¿Qué son los operadores?
Los operadores son símbolos especiales o palabras clave que indican al intérprete de JavaScript que debe realizar una operación específica. Estos operadores pueden aplicarse a uno o más operandos (valores o variables) para producir un resultado. Los operadores nos permiten realizar tareas como sumar números, concatenar cadenas, comparar valores, asignar valores a variables y mucho más.

Tipos de operadores en JavaScript
JavaScript cuenta con varios tipos de operadores, cada uno con su propio propósito y funcionalidad. A continuación, se describen los principales tipos de operadores en JavaScript:

1. Operadores aritméticos:

• Los operadores aritméticos se utilizan para realizar operaciones matemáticas básicas como suma, resta, multiplicación, división y módulo (resto de una división).
• Ejemplos:

let x = 10, y = 3;
console.log(x + y); // Salida: 13 (suma)
console.log(x - y); // Salida: 7 (resta)
console.log(x * y); // Salida: 30 (multiplicación)
console.log(x / y); // Salida: 3.3333333333333335 (división)
console.log(x % y); // Salida: 1 (módulo)

2. Operadores de asignación:

• Los operadores de asignación se utilizan para asignar valores a variables.
• El operador de asignación más común es =, pero también existen operadores de asignación compuestos como +=, -=, *=, /=, etc.
• Ejemplos:

let x = 10; // Asignación simple
x += 5; // x = x + 5; x ahora es 15
x -= 3; // x = x - 3; x ahora es 12
x *= 2; // x = x * 2; x ahora es 24

3. Operadores de comparación:

• Los operadores de comparación se utilizan para comparar valores y devolver un resultado booleano (true o false).
• Algunos ejemplos son == (igualdad), === (igualdad estricta), != (desigualdad), !== (desigualdad estricta), > (mayor que), < (menor que), >= (mayor o igual que), <= (menor o igual que).
• Ejemplos:

let x = 10, y = 5;
console.log(x == y); // Salida: false
console.log(x != y); // Salida: true
console.log(x > y); // Salida: true
console.log(x <= y); // Salida: false

4. Operadores lógicos:

• Los operadores lógicos se utilizan para combinar o negar expresiones booleanas.
• Los principales operadores lógicos son && (AND), || (OR) y ! (NOT).
• Ejemplos:

let x = 5, y = 10;
console.log(x < 10 && y > 5); // Salida: true (AND)
console.log(x < 5 || y > 8); // Salida: true (OR)
console.log(!(x == y)); // Salida: true (NOT)

5. Operadores de cadena:

• Los operadores de cadena se utilizan para manipular y combinar cadenas de texto.
• El operador principal es +, que se utiliza para concatenar cadenas.
• Ejemplo:

let nombre = "Juan";
let saludo = "Hola, " + nombre; // Salida: "Hola, Juan"

6. Operadores de incremento y decremento:

• Los operadores de incremento (++) y decremento (--) se utilizan para aumentar o disminuir el valor de una variable en 1.
• Pueden utilizarse antes (prefijo) o después (postfijo) de la variable.
• Ejemplos:

let x = 5;
console.log(++x); // Salida: 6 (prefijo)
console.log(x++); // Salida: 6, x ahora es 7 (postfijo)
console.log(--x); // Salida: 6, x ahora es 6 (prefijo)

7. Operadores de bit a bit:

• Los operadores de bit a bit se utilizan para manipular y realizar operaciones a nivel de bits.
• Algunos ejemplos son & (AND a nivel de bits), | (OR a nivel de bits), ^ (XOR a nivel de bits), ~ (NOT a nivel de bits), << (desplazamiento a la izquierda), >> (desplazamiento a la derecha).
• Estos operadores son útiles en casos específicos de programación a bajo nivel o cuando se trabaja con números binarios.

8. Operador condicional (ternario):

• El operador condicional (ternario) es una forma abreviada de escribir una instrucción if-else.
• La sintaxis es condición ? valorSiVerdadero : valorSiFalso.
• Ejemplo:

let edad = 18;
let mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad";
console.log(mensaje); // Salida: "Eres mayor de edad"

9. Operadores de propagación y rest:

• El operador de propagación (...) se utiliza para expandir elementos iterables (como arrays) o propiedades de objetos en otros objetos o arrays.
• El operador rest (...) se utiliza para representar un número indefinido de argumentos en una función.
• Ejemplos:

let numeros = [1, 2, 3];
let otrosNumeros = [...numeros, 4, 5]; // Salida: [1, 2, 3, 4, 5]

function sumar(...args) {
  return args.reduce((a, b) => a + b, 0);
}
console.log(sumar(1, 2, 3, 4, 5)); // Salida: 15

Estos son los principales tipos de operadores en JavaScript. Comprender cómo funcionan y cuándo utilizarlos es fundamental para escribir código eficiente y funcional. Recuerda que puedes combinar diferentes operadores y utilizar paréntesis para controlar el orden de las operaciones.

En conclusión, los operadores son una parte esencial del lenguaje JavaScript y nos brindan la capacidad de realizar una amplia variedad de operaciones. Desde operaciones aritméticas hasta comparaciones lógicas, asignaciones y manipulación de cadenas, los operadores son herramientas poderosas que nos permiten controlar el flujo de nuestros programas y manipular datos de manera efectiva. Comprender los diferentes tipos de operadores, su sintaxis y casos de uso es crucial para convertirse en un desarrollador JavaScript competente y escribir código optimizado y escalable.

2.4 Estructuras de control de flujo

Estructuras de Control de Flujo en JavaScript

Las estructuras de control de flujo son una parte fundamental de cualquier lenguaje de programación, incluyendo JavaScript. Estas estructuras permiten controlar el flujo de ejecución de un programa, lo que significa que determinan qué partes del código se ejecutan y en qué orden, en función de ciertas condiciones o criterios.

En JavaScript, las estructuras de control de flujo se dividen en tres categorías principales: condicionales, iterativas y manejo de excepciones. A continuación, se explican cada una de ellas en detalle.

1. Estructuras Condicionales

Las estructuras condicionales permiten ejecutar diferentes bloques de código según si una determinada condición es verdadera o falsa. Las dos estructuras condicionales principales en JavaScript son if...else y switch.

1.1. if…else

Estructuras Condicionales if…else en JavaScript: Guía Completa

Las estructuras condicionales if...else son una parte fundamental del control de flujo en JavaScript y en la programación en general. Permiten al programador tomar decisiones y ejecutar diferentes bloques de código basados en una o más condiciones específicas. A continuación, exploraremos en detalle qué son las estructuras if...else, cómo funcionan, sus diferentes variantes y algunos ejemplos prácticos.

¿Qué es una estructura condicional if…else?

Una estructura condicional if...else es una declaración que evalúa una expresión booleana (una expresión que puede ser verdadera o falsa) y, en función del resultado, ejecuta un bloque de código específico. Si la condición es verdadera, se ejecuta el bloque de código dentro del if; si es falsa, se ejecuta el bloque de código dentro del else (si está presente).

¿Para qué sirven las estructuras condicionales if…else?

Las estructuras if...else son fundamentales para controlar el flujo de un programa y tomar decisiones basadas en condiciones específicas. Permiten crear programas dinámicos que responden de manera diferente según las circunstancias. Algunos casos de uso comunes incluyen:

• Validación de datos de entrada
• Control de acceso a funcionalidades o áreas restringidas
• Implementación de lógica de juegos o simulaciones
• Ejecución de cálculos o algoritmos condicionales
• Manejo de eventos y respuestas a acciones del usuario

¿Cómo funcionan las estructuras condicionales if…else?

La forma correcta de escribir o sintaxis básica de una estructura if...else en JavaScript es la siguiente:

if (condición) {
  // Bloque de código a ejecutar si la condición es verdadera
} else {
  // Bloque de código a ejecutar si la condición es falsa
}

La condición es una expresión que se evalúa como verdadera (true) o falsa (false). Si la condición es verdadera, se ejecuta el bloque de código dentro del if; si es falsa, se ejecuta el bloque de código dentro del else.

Variantes de las estructuras condicionales if…else

Además de la estructura básica if...else, JavaScript ofrece otras variantes para manejar condiciones más complejas:

1. else if: Permite evaluar múltiples condiciones en secuencia. Si la primera condición es falsa, se evalúa la siguiente, y así sucesivamente.

if (condición1) {
  // Bloque de código 1
} else if (condición2) {
  // Bloque de código 2
} else {
  // Bloque de código alternativo
}

En JavaScript puedes tener varios else if seguidos antes de un else en una estructura condicional if. Esto te permite evaluar múltiples condiciones en secuencia y ejecutar diferentes bloques de código dependiendo de cuál sea verdadera. No hay un límite específico en la cantidad de else if que puedes tener, pero es importante recordar que cada else if debe ir seguido de una condición que se evalúe como verdadera o falsa.

Aquí tienes un ejemplo con cuatro else if:

let num = 10;
if (num > 10) {
    console.log("El número es mayor que 10");
} else if (num === 10) {
    console.log("El número es igual a 10");
} else if (num >= 5 && num < 10) {
    console.log("El número es mayor o igual a 5 y menor que 10");
} else if (num < 5) {
    console.log("El número es menor que 5");
} else {
    console.log("El número es negativo");
}

En este ejemplo, se evalúan múltiples condiciones en secuencia para determinar en qué rango se encuentra num y se imprime un mensaje correspondiente. Si ninguna de las condiciones anteriores es verdadera, se ejecuta el bloque de código dentro del else final.

2. Operador ternario: Es una forma abreviada de escribir una estructura if...else en una sola línea. Es útil para asignaciones simples.

condición ? valorSiVerdadero : valorSiFalso;

3. switch: Aunque no es una estructura if...else, el switch es otra forma de controlar el flujo basada en diferentes casos. Puede ser más legible y eficiente que una cadena de if...else en ciertas situaciones. esta estructura la desarrollaremos más adelante detalladamente.

Ejemplos de uso de estructuras condicionales if…else

1. Validación de edad:

en el ejemplo se declara una variable let edad 18, luego usamos el if para evaluar ciertas condiciones y de acuerdo al resultado se imprimirá la instrucción dada entre llaves, la condiciones es (si edad es mayor o igual a 18) la instrucción es (imprime el texto «eres mayor de edad») luego se expresa else, es decir que si no se cumple la condición dad en if, entonces se ejecutará la instrucción de else la cual es (imprime un texto que diga «eres menor de edad»)

let edad = 18;

if (edad >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

2. Cálculo de descuento:

let precioInicial = 100;
let esCliente = true;

let descuento = esCliente ? 0.2 : 0; // Operador ternario
let precioFinal = precioInicial * (1 - descuento);

console.log(`El precio final es: $${precioFinal}`);

3. Clasificación de notas:

let nota = 85;

if (nota >= 90) {
  console.log("Excelente");
} else if (nota >= 80) {
  console.log("Muy bien");
} else if (nota >= 70) {
  console.log("Bien");
} else if (nota >= 60) {
  console.log("Suficiente");
} else {
  console.log("Insuficiente");
}

Las estructuras condicionales if...else son una herramienta fundamental en JavaScript y en la programación en general. Permiten controlar el flujo de un programa y tomar decisiones basadas en condiciones específicas, lo que es esencial para crear programas dinámicos y responder a diferentes situaciones de manera adecuada.

Notas aclaratorias:

• Si la condición en un if es falsa y no hay un else asociado, no se ejecuta ningún bloque de código adicional.
• Puedes tener múltiples bloques else if después de un if para evaluar condiciones adicionales en secuencia.
• Las condiciones en una serie de else if se evalúan de arriba hacia abajo. Si una condición es verdadera, se ejecuta el bloque de código correspondiente y las condiciones restantes no se evalúan.

1.2. switch

Estructura switch en JavaScript

La estructura switch en JavaScript es otra forma de controlar el flujo de un programa basado en múltiples condiciones. A continuación, exploraremos qué es, para qué sirve, cómo funciona y cómo utilizarla correctamente. También abordaremos algunas dudas comunes que pueden surgir al aprender sobre este tema.

¿Qué es la estructura switch en JavaScript?

La estructura switch en JavaScript es una sentencia que evalúa una expresión, comparando su valor con una serie de casos posibles y ejecutando un bloque de código asociado al caso que coincida. Esto proporciona una manera más limpia y estructurada de manejar múltiples condiciones que una serie de if...else if...else.

¿Para qué sirve la estructura switch?

La estructura switch se utiliza cuando se necesita tomar decisiones basadas en el valor de una expresión específica. Es útil cuando hay múltiples casos posibles y se desea ejecutar un bloque de código diferente para cada caso. La estructura switch es especialmente útil cuando se tiene una expresión que puede tener muchos valores diferentes y se desea ejecutar un bloque de código diferente para cada valor.

¿Cómo funciona la estructura switch?

La estructura básica de una sentencia switch en JavaScript es la siguiente:

Para usar la estructura switch en JavaScript, primero escribimos la palabra switch seguida de una expresión entre paréntesis. Esta expresión puede ser una variable cuyo valor se estableció previamente. Luego, escribimos los casos entre llaves {}. Cada caso comienza con la palabra case, seguida del valor que queremos comparar con la expresión, luego dos puntos (:) y finalmente el código que se ejecutará si la expresión coincide con ese valor. Cada caso debe terminar con la palabra break; para evitar la ejecución de otros casos. Opcionalmente, podemos usar la palabra clave default seguida de dos puntos y un bloque de código para manejar el caso en el que ninguno de los casos anteriores coincida con la expresión.

switch (expresion) {
    case valor1:
        // código a ejecutar si la expresion es igual a valor1
        break;
    case valor2:
        // código a ejecutar si la expresion es igual a valor2
        break;
    default:
        // código a ejecutar si ninguno de los casos anteriores se cumple
}

En esta estructura, expresion es la expresión que se evalúa y se compara con los casos posibles. Cada case representa un valor específico que puede tomar expresion, y el bloque de código asociado se ejecuta si expresion es igual a ese valor. El default es opcional y se ejecuta si ninguno de los casos anteriores se cumple.

Notas aclaratorias:

• Después de que se ejecuta un bloque de código asociado a un case, se utiliza la palabra clave break para salir del switch. Esto evita que se ejecuten los bloques de código asociados a los case siguientes.
• Si omites la palabra clave break, se ejecutarán todos los bloques de código a partir del case que coincida con expresion, incluso si los casos siguientes no coinciden.
• La estructura switch es útil cuando se tienen muchos casos posibles y se desea ejecutar un bloque de código diferente para cada caso.

Ejemplo de uso de la estructura switch:

let dia = 3;
let nombreDia;
switch (dia) {
    case 1:
        nombreDia = "Lunes";
        break;
    case 2:
        nombreDia = "Martes";
        break;
    case 3:
        nombreDia = "Miércoles";
        break;
    case 4:
        nombreDia = "Jueves";
        break;
    case 5:
        nombreDia = "Viernes";
        break;
    default:
        nombreDia = "Fin de semana";
}
console.log(`Hoy es ${nombreDia}`);

En este ejemplo, el valor de dia es 3, por lo que se ejecuta el bloque de código asociado al case 3 y se asigna el valor «Miércoles» a nombreDia. Luego se imprime «Hoy es Miércoles» en la consola.

Conclusión

La estructura switch en JavaScript es una forma eficiente y estructurada de manejar múltiples condiciones. Permite ejecutar un bloque de código diferente para cada caso posible de una expresión dada, lo que es útil cuando se tienen muchos casos posibles y se desea mantener el código organizado y fácil de leer. Es importante recordar utilizar la palabra clave break para salir del switch después de ejecutar un caso y evitar que se ejecuten los casos siguientes.

2. Estructuras Iterativas (Bucles)

Estructuras Iterativas (Bucles) en JavaScript: Una guía completa

Las estructuras iterativas, comúnmente conocidas como bucles, son herramientas fundamentales en la programación que permiten repetir un bloque de código varias veces. En JavaScript, existen varios tipos de bucles, incluyendo for, while, do...while, for...in y for...of; cada uno con su propia sintaxis y casos de uso. En esta guía, exploraremos los diferentes tipos de bucles en JavaScript, cómo funcionan y cómo se pueden aplicar en situaciones prácticas.

¿Qué son y para qué sirven los bucles en JavaScript?

Los bucles en JavaScript son estructuras de control que permiten ejecutar repetidamente un bloque de código mientras se cumpla una condición específica. Su propósito principal es automatizar tareas repetitivas, evitando la repetición manual del mismo código una y otra vez.

Antes de conocer los bucles en JavaScript, si querías hacer algo repetitivo, como contar o mostrar una lista de nombres, tenías que escribir muchas instrucciones una por una. Pero al aprender sobre los bucles, descubres que puedes hacer estas tareas de forma mucho más fácil y rápida con solo una instrucción. Por ejemplo, puedes escribir una sola línea de código para contar o mostrar una lista de nombres sin tener que escribir tantas instrucciones.

En fin, Las estructuras iterativas, también conocidas como bucles, permiten repetir un bloque de código varias veces, según una condición determinada. JavaScript tiene varias estructuras de bucle diferentes, incluyendo for, while, do...while, for...in y for...of. Las cuales desarrollaremos con detenimiento una por una a continuación.

Tipos de bucles en JavaScript

2.1. for

Un bucle for en JavaScript se utiliza para ejecutar un bloque de código de manera repetitiva mientras se cumpla una condición. La condición se evalúa antes de cada iteración, y si es verdadera, se ejecuta el bloque de código. Aquí tienes la sintaxis básica del bucle for:

for ([expresion-inicial]; [condicion]; [expresion-final]) {
    // Sentencias a ejecutar en cada iteración
}

• expresion-inicial: Una expresión (incluyendo las expresiones de asignación) o la declaración de variable. Típicamente se utiliza como variable contador. Esta expresión puede opcionalmente declarar nuevas variables con la palabra clave var. Estas variables no son locales del bucle, es decir, están en el mismo alcance en el que está el bucle for. El resultado de esta expresión es descartado.
• condicion: Una expresión para ser evaluada antes de cada iteración del bucle. Si esta expresión se evalúa como verdadera, se ejecuta la sentencia. Esta comprobación condicional es opcional. Si se omite, la condición siempre se evalúa como verdadera. Si la expresión se evalúa como falsa, la ejecución salta a la primera expresión que sigue al constructor de for.
• expresion-final: Una expresión para ser evaluada al final de cada iteración del bucle. Esto ocurre antes de la siguiente evaluación de la condición. Generalmente se usa para actualizar o incrementar la variable contador.
• sentencia: Una sentencia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro del bucle, utiliza una sentencia block ({ ... }) para agrupar aquellas sentencias.

Aquí tienes un ejemplo práctico de cómo usar el bucle for en JavaScript:

// Suma los números del 0 al 8
let suma = 0;
for (let i = 0; i < 9; i++) {
    suma += i;
}
console.log(suma); // Resultado: 36

En este ejemplo, la variable i se inicializa a 0 y se incrementa en cada iteración hasta que i sea menor que 9. Durante cada iteración, se suma el valor de i a la variable suma.

Otro ejemplo, para imprimir los números del 1 al 5:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

2.2. while

El bucle while se utiliza cuando no se conoce de antemano el número de iteraciones que se realizarán. Su sintaxis es:

while (condición) {
  // Código a ejecutar mientras la condición sea verdadera
}

Por ejemplo, para imprimir los números pares del 1 al 10:

let i = 1;
while (i <= 10) {
  if (i % 2 === 0) {
    console.log(i);
  }
  i++;
}

2.3. do…while

El bucle do...while es similar al bucle while, pero con la diferencia de que el bloque de código se ejecuta al menos una vez, independientemente de si la condición es verdadera o falsa. Su sintaxis es:

do {
  // Código a ejecutar al menos una vez
} while (condición);

Por ejemplo, para solicitar un número al usuario hasta que ingrese un número válido:

let numero;
do {
  numero = prompt("Ingrese un número válido:");
} while (isNaN(numero));

console.log("El número ingresado es:", numero);

2.4. for…in

El bucle for...in se utiliza para recorrer las propiedades enumerables de un objeto. Su sintaxis es:

for (variable in objeto) {
  // Código a ejecutar para cada propiedad
}

Por ejemplo, para imprimir las propiedades de un objeto:

let persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" };

for (let propiedad in persona) {
  console.log(propiedad + ": " + persona[propiedad]);
}

2.5. for…of

El bucle for...of se utiliza para recorrer los valores de objetos iterables, como arrays, strings, etc. Su sintaxis es:

for (variable of iterable) {
  // Código a ejecutar para cada valor
}

Por ejemplo, para imprimir los elementos de un array:

let colores = ["rojo", "verde", "azul"];

for (let color of colores) {
  console.log(color);
}

3. Manejo de Excepciones

JavaScript también proporciona una estructura de control de flujo para manejar excepciones, que son errores que ocurren durante la ejecución del programa. La estructura try...catch se utiliza para capturar y manejar estas excepciones.

try {
  // Código que puede generar una excepción
} catch (error) {
  // Código a ejecutar si se produce una excepción
}

Opcionalmente, puedes agregar un bloque finally que se ejecutará independientemente de si se produjo una excepción o no.

try {
  // Código que puede generar una excepción
} catch (error) {
  // Código a ejecutar si se produce una excepción
} finally {
  // Código a ejecutar siempre, independientemente de si hubo una excepción o no
}

Por ejemplo, para manejar una excepción al intentar dividir por cero:

let a = 10, b = 0;

try {
  console.log(a / b);
} catch (error) {
  console.log("Error:", error.message);
} finally {
  console.log("La operación ha terminado");
}

En resumen, las estructuras de control de flujo en JavaScript son fundamentales para escribir programas efectivos y funcionales. Permiten controlar el flujo de ejecución del código, tomar decisiones basadas en condiciones y repetir tareas múltiples veces. Dominar estas estructuras es esencial para cualquier desarrollador de JavaScript.

4. Sentencias de Control de Flujo

Además de las estructuras de control condicionales, iterativas y manejo de excepciones, JavaScript también tiene dos sentencias especiales que permiten controlar el flujo dentro de los bucles: break y continue.

break

La sentencia break se utiliza para salir de un bucle antes de que se complete su ejecución normal. Cuando se encuentra la sentencia break dentro de un bucle, el programa sale inmediatamente del bucle y continúa con la siguiente instrucción después del bucle.

Por ejemplo, para encontrar el primer número par en un array:

let numeros = [1, 3, 5, 7, 8, 9];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] % 2 === 0) {
    console.log("El primer número par es:", numeros[i]);
    break;
  }
}

La sentencia break también se puede utilizar dentro de una estructura switch para salir de la misma una vez que se ha encontrado una coincidencia.

continue

La sentencia continue se utiliza para omitir la iteración actual de un bucle y continuar con la siguiente iteración. Cuando se encuentra la sentencia continue dentro de un bucle, el programa salta a la siguiente iteración sin ejecutar el resto del código dentro del bucle para esa iteración.

Por ejemplo, para imprimir todos los números impares de un array:

let numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] % 2 === 0) {
    continue;
  }
  console.log(numeros[i]);
}

En este ejemplo, si el número es par, se omite esa iteración y se continúa con la siguiente usando la sentencia continue.

Tanto break como continue son herramientas poderosas que permiten un control más preciso sobre el flujo de ejecución dentro de los bucles en JavaScript. Sin embargo, es importante utilizarlas con precaución, ya que un uso excesivo o incorrecto puede dificultar la legibilidad y el mantenimiento del código.

Resumen

Las estructuras de control de flujo en JavaScript se utilizan para controlar el flujo de ejecución de un programa. Las estructuras más comunes son:

• Condicionales: permiten ejecutar código en función de una condición. Ejemplo:

let edad = 18;
if (edad >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

• Iteraciones: permiten ejecutar código varias veces. Ejemplo:

for (let i = 0; i < 10; i++) {
  console.log(i);
}

2.5 Funciones

Las funciones en JavaScript son bloques de código reutilizables que realizan una tarea específica. Para declarar una función, se utiliza la palabra clave «function».

Ejemplo:

function saludar() {
  console.log("Hola, mundo");
}

saludar(); // Llama a la función

Las funciones también pueden aceptar parámetros y devolver valores.

Ejemplo:

function sumar(a, b) {
  return a + b;
}

let resultado = sumar(5, 10); // resultado = 15

2.6 Alcance y clausuras (closures)

El alcance en JavaScript se refiere a la visibilidad de una variable en una parte del código. Las variables declaradas con «let» y «const» tienen alcance de bloque, mientras que las variables declaradas con «var» tienen alcance de función.

Las clausuras (closures) en JavaScript son funciones que tienen acceso a variables declaradas en su ámbito léxico externo.

Ejemplo:

function crearSaludo(nombre) {
  return function() {
    console.log("Hola, " + nombre);
  }
}

let saludarJuan = crearSaludo("Juan");
saludarJuan(); // Muestra "Hola, Juan"

2.7 Objetos y arrays

Los objetos en JavaScript son colecciones de propiedades y métodos. Las propiedades son valores asociados a una clave, y los métodos son funciones asociadas a un objeto.

Ejemplo:

let persona = {
  nombre: "Juan",
  edad: 30,
  saludar: function() {
    console.log("Hola, soy " + this.nombre);
  }
};

persona.saludar(); // Muestra "Hola, soy Juan"

Los arrays en JavaScript son colecciones ordenadas de valores. Los valores se pueden acceder mediante su índice.

Ejemplo:

let numeros = [1, 2, 3, 4, 5];
console.log(numeros[0]); // Muestra 1

2.8 Tipos de datos avanzados (Map, Set)

Los tipos de datos avanzados en JavaScript incluyen:

• Map: una colección de pares clave-valor. Ejemplo:

let mapa = new Map();
mapa.set("nombre", "Juan");
mapa.set("edad", 30);
console.log(mapa.get("nombre")); // Muestra "Juan"

• Set: una colección de valores únicos. Ejemplo:

let conjunto = new Set();
conjunto.add(1);
conjunto.add(2);
conjunto.add(3);
console.log(conjunto.has(1)); // Muestra true

2.9 Destructuring y Spread Operator

El destructuring en JavaScript permite extraer valores de arrays y objetos y asignarlos a variables.

Ejemplo:

let [a, b] = [1, 2];
console.log(a); // Muestra 1
console.log(b); // Muestra 2

let { nombre, edad } = { nombre: "Juan", edad: 30 };
console.log(nombre); // Muestra "Juan"
console.log(edad); // Muestra 30

El spread operator en JavaScript permite expandir los elementos de un array o las propiedades de un objeto en otro array o objeto.

Ejemplo:

let numeros1 = [1, 2, 3];
let numeros2 = [4, 5, 6];
let todosLosNumeros = [...numeros1, ...numeros2];
console.log(todosLosNumeros); // Muestra [1, 2, 3, 4, 5, 6]

let persona1 = { nombre: "Juan" };
let persona2 = { edad: 30 };
let personaCompleta = { ...persona1, ...persona2 };
console.log(personaCompleta); // Muestra { nombre: "Juan", edad: 30 }

2.10 Ejemplos y casos de uso

Algunos ejemplos y casos de uso de los fundamentos de JavaScript incluyen:

• Crear una función que calcule el área de un círculo dado su radio.
• Crear una función que devuelva el mayor número de un array.
• Crear una función que convierta una cadena de texto en mayúsculas.
• Crear una función que valide si una contraseña es segura (tiene al menos 8 caracteres, contiene letras y números, etc.).
• Crear una función que muestre una lista de tareas pendientes en una página web.
• Crear una función que realice una petición a una API y muestre los resultados en una página web.