Fundamentos de JavaScript

Los bloques de construcción de JavaScript

Piensa en JavaScript como un lenguaje. Al igual que el español o el inglés, tiene su propio vocabulario y reglas gramaticales. Para escribir código que una computadora pueda entender, primero debemos aprender estas reglas fundamentales. A esto lo llamamos sintaxis.

Sintaxis: las reglas del juego

La sintaxis en programación es el conjunto de reglas que dictan cómo se escriben las instrucciones. Cada instrucción que le das al programa se llama una declaración. En JavaScript, es una buena práctica terminar cada declaración con un punto y coma (;). Aunque JavaScript a veces puede inferir dónde termina una línea, usarlo siempre evita errores y hace que tu código sea más claro.

También puedes dejar notas en tu código que la computadora ignorará. Estas se llaman comentarios y son increíblemente útiles para explicar lo que hace tu código a otros programadores, o a tu yo del futuro.

// Este es un comentario de una sola línea.
let mensaje = "¡Hola, mundo!"; // Las declaraciones suelen terminar con punto y coma.

/*
  Este es un comentario
  de varias líneas. Es útil para
  explicaciones más largas.
*/

Variables y tipos de datos

Para que un programa sea útil, necesita recordar información. Aquí es donde entran las variables. Una variable es como una caja etiquetada donde puedes guardar un dato para usarlo más tarde. Para crear una variable en JavaScript, usamos las palabras clave let o const.

Usa let para variables cuyo valor podría cambiar. Usa const para valores que no cambiarán, como una constante matemática o una fecha de nacimiento.

El tipo de información que guardas en una variable determina su tipo de dato. Los tipos de datos básicos en JavaScript son:

Tipo de Dato	Descripción	Ejemplo
String	Texto. Siempre va entre comillas.	`"Hola"` o `'JavaScript'`
Number	Números, ya sean enteros o con decimales.	`42` o `3.14`
Boolean	Un valor de verdadero o falso.	`true` o `false`
undefined	Una variable que ha sido declarada pero no tiene valor.	`let nombre;`
null	Representa la ausencia intencional de un valor.	`let usuario = null;`

// Una variable para texto (String)
let saludo = "Bienvenido a JavaScript";

// Una variable para un número (Number)
let edad = 25;

// Una constante para un valor booleano (Boolean)
const esEstudiante = true;

Operadores: haciendo cálculos y comparaciones

Una vez que tienes datos en variables, puedes empezar a trabajar con ellos usando operadores.

Operador

noun

Un símbolo especial que realiza una operación sobre uno o más valores (operandos) y produce un resultado.

Los operadores aritméticos se usan para matemáticas básicas:

let a = 10;
let b = 5;

let suma = a + b;     // suma es 15
let resta = a - b;    // resta es 5
let producto = a * b; // producto es 50
let division = a / b; // division es 2
let residuo = a % 3;  // residuo es 1 (10 dividido por 3 es 3 con residuo 1)

Los operadores de comparación comparan dos valores y devuelven un resultado booleano (true o false). Son la base para tomar decisiones en el código.

Operador	Significado	Ejemplo (x=5)	Resultado
`>`	Mayor que	`x > 8`	`false`
`<`	Menor que	`x < 8`	`true`
`>=`	Mayor o igual que	`x >= 5`	`true`
`<=`	Menor o igual que	`x <= 4`	`false`
`===`	Estrictamente igual (valor y tipo)	`x === 5`	`true`
`!==`	Estrictamente desigual	`x !== "5"`	`true`

Usa siempre === para comparar igualdad en lugar de ==. El operador == puede tener comportamientos inesperados porque intenta convertir los tipos de datos antes de comparar, mientras que === es estricto y seguro.

Finalmente, los operadores lógicos nos permiten combinar múltiples condiciones booleanas.

// && (Y Lógico) - true solo si AMBAS condiciones son verdaderas
(5 > 3) && (10 > 5) // Resultado: true

// || (O Lógico) - true si AL MENOS UNA condición es verdadera
(5 < 3) || (10 > 5) // Resultado: true

// ! (NO Lógico) - Invierte el valor booleano
!true // Resultado: false

Estructuras de control: guiando el flujo

Tu código no siempre se ejecuta en línea recta. A menudo, necesitas que tome decisiones o repita acciones. Para eso usamos las estructuras de control.

La estructura if...else permite que tu programa ejecute un bloque de código si una condición es verdadera, y otro bloque si es falsa. Es como una bifurcación en el camino.

let edad = 18;

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

// Se imprimirá "Eres mayor de edad."

Cuando necesitas repetir una tarea varias veces, usas un bucle. El bucle for es ideal cuando sabes exactamente cuántas veces quieres que se repita una acción.

// Este bucle se ejecutará 5 veces.
for (let i = 1; i <= 5; i++) {
  // La variable i aumenta en 1 en cada repetición.
  console.log("Vuelta número " + i);
}

// Resultado en la consola:
// Vuelta número 1
// Vuelta número 2
// Vuelta número 3
// Vuelta número 4
// Vuelta número 5

El bucle while es útil cuando quieres que el código se repita mientras una condición sea verdadera, pero no sabes de antemano cuántas veces ocurrirá.

let contador = 0;

while (contador < 3) {
  console.log("El contador es " + contador);
  contador++; // Importante: ¡Incrementa el contador para evitar un bucle infinito!
}

// Resultado en la consola:
// El contador es 0
// El contador es 1
// El contador es 2

Quiz Questions 1/6

En JavaScript, ¿cuál es el propósito principal de usar un punto y coma (;) al final de una declaración?

Quiz Questions 2/6

Observa la siguiente línea de código: let edad = 25;. ¿Cuál es el tipo de dato de la variable edad?

Con estos conceptos, ya tienes las herramientas básicas para empezar a escribir programas sencillos en JavaScript. Has aprendido a guardar datos, realizar operaciones con ellos y controlar el flujo de ejecución de tu código.

Desarrollo Web con JavaScript en Español