2. Sintaxis Básica de JavaScript

Sintaxis Básica de JavaScript. Antes de crear funciones, manipular elementos en una página o trabajar con datos externos, es fundamental dominar la sintaxis básica de JavaScript. En este capítulo veremos los conceptos clave que forman la base del lenguaje: desde los tipos de datos que puedes usar hasta cómo declarar variables y realizar operaciones lógicas y matemáticas.

Aprenderás qué tipos de valores puede manejar JavaScript (como números, textos, booleanos, etc.), cómo almacenar esos valores en variables usando var, let o const, y qué operadores puedes aplicar para construir expresiones. También veremos cómo se escriben los comentarios en el código y cómo aplicar buenas prácticas para que tu código sea claro, limpio y fácil de mantener. Empezamos!!!!

SanDisk Pendrive 64 GB Ultra Memoria flash USB 3.0 hasta 130 MB/s

5,90€

(SecureAccess Software, Protección de contraseñas) Negro.

Toshiba Canvio Partner 1TB Disco Duro Externo portátil de 2,5», USB 3.2

63,99€

(Toshiba Canvio Partner 1TB Disco Duro Externo portátil de 2,5», USB 3.2, Compatible con Mac y Windows. Xbox, PS4, PS5 (HDTB510EK3AB)

TP-Link LS105G – Switch Ethernet 5 Puertos (10/100/1000Mbps), Switch Gigabit, Switch WiFi

11,99€

TP-Link LS105G – Switch Ethernet 5 Puertos (10/100/1000Mbps), Switch Gigabit, Switch WiFi, Carcasa metálica, Ultraligero, Disipación de Calor, QoS, Ahorro de Energía, Silencioso, No Gestionado, Azul

2.1 Tipos de datos primitivos en JavaScript

En JavaScript, los tipos de datos primitivos son los valores más básicos que puedes usar y manipular en el lenguaje. Se llaman «primitivos» porque no son objetos y no tienen métodos (aunque JavaScript los trata a veces como si los tuvieran gracias al autoboxing, que veremos más adelante). Son el bloque de construcción más esencial para cualquier programa.

Estos tipos de datos se comportan de forma sencilla: almacenan valores inmutables, es decir, no puedes modificar directamente su contenido (aunque puedes reemplazarlos por otros). En total, JavaScript tiene siete tipos primitivos:

1. number

En JavaScript, todos los números son del tipo number, ya sean enteros o decimales.

let edad = 30;
let temperatura = 36.5;

También incluye algunos valores especiales como:

• Infinity (infinito positivo)
• -Infinity (infinito negativo)
• NaN (Not a Number), que indica que una operación no es numéricamente válida:

let resultado = "hola" * 3; // NaN

2. string

Las cadenas de texto se representan con comillas simples '...', dobles "...", o plantillas literales `...`.

let nombre = "María";
let saludo = `Hola, ${nombre}!`;  // Template literal con interpolación

3. boolean

Representan valores lógicos: true (verdadero) o false (falso). Son esenciales para el control de flujo y la toma de decisiones en tu programa.

let estaLogueado = true;
let tienePermiso = false;

4. undefined

Este valor representa la ausencia de valor asignado. Por defecto, una variable declarada pero no inicializada tiene el valor undefined.

let resultado;
console.log(resultado); // undefined

5. null

A diferencia de undefined, null es un valor asignado intencionadamente para indicar que una variable está vacía.

let usuario = null;

@Tip. aunque null es un valor primitivo, si usas typeof null, te devolverá "object". Esto es un bug histórico de JavaScript.

6. symbol

Introducido en ECMAScript 6, symbol es un tipo de dato que genera identificadores únicos. Se usa principalmente en estructuras de datos complejas como objetos o metaprogramación.

let id = Symbol("identificador");

Dos símbolos con la misma descripción nunca son iguales:

Symbol("id") === Symbol("id"); // false

7. bigint

También introducido en las útlimas versiones del lenguaje, bigint permite representar números enteros muy grandes, más allá del límite de number.

let numeroGrande = 9007199254740991n; // Nótese la 'n' al final

Resumen

2.2 Variables: var, let y const

En JavaScript, las variables son espacios en memoria donde se almacenan valores para ser usados y manipulados en tu código. Declarar una variable es como ponerle una etiqueta a una caja: puedes guardar algo dentro, cambiarlo después o incluso dejarlo cerrado permanentemente (como con const).

Hasta ES5 (versión anterior de JavaScript), todo se declaraba con var. Pero con ES6 llegaron let y const, mucho más seguros y previsibles. A día de hoy, es recomendable evitar var y trabajar principalmente con let y const. Vamos a ver por qué.

var – La vieja confiable (aunque algo rebelde)

var nombre = "Ana";
nombre = "Lucía";

var tiene dos particularidades peligrosas:

• Tiene alcance de función (no de bloque): Si la defines dentro de un if, sigue accesible fuera del bloque:

if (true) {
  var mensaje = "Hola";
}
console.log(mensaje); // "Hola"

• Puede redeclararse sin error: Esto puede provocar errores difíciles de detectar, por eso se recomienda no usar var en nuevos proyectos.

var nombre = "Pedro";
var nombre = "Juan"; // No da error

let – La forma moderna de declarar variables

let edad = 25;
edad = 30; // ✅ Puedes cambiar el valor

Ventajas clave:

• Tiene alcance de bloque (block scope):

let edad = 25;
edad = 30; // ✅ Puedes cambiar el valor

• No permite redeclaraciones en el mismo ámbito: Ideal para variables que van a cambiar en algún momento.

if (true) {
  let saludo = "Hola";
  console.log(saludo); // "Hola"
}
console.log(saludo); // ❌ Error: saludo is not defined

const – Para valores que no cambian

const PI = 3.1416;

• Debe inicializarse al declararse:

const nombre; // ❌ Error

• No puedes cambiar su valor después:

const nombre = "Carlos";
nombre = "David"; // ❌ Error

• Importante: Si el valor es un objeto o arreglo, no puedes cambiar la referencia, pero sí puedes modificar el contenido interno

const persona = { nombre: "Luis" };
persona.nombre = "Raúl"; // ✅ Esto sí se puede

¿Cuándo usar let o const?

• Usa const por defecto que no van a cambiar a lo largo de la ejecución del programa
• Si necesitas reasignar el valor, entonces usa let para definir la variable.
• Solo usa var si estás manteniendo código antiguo

Veamos un ejemplo sencillo:

const nombre = "Laura";
let edad = 28;
edad = edad + 1;

console.log(`${nombre} tiene ${edad} años`);

Resultado: Laura tiene 29 años

En resumen:

2.3 Operadores: Aritméticos, de Comparación y Lógicos

Los operadores en JavaScript son símbolos especiales que nos permiten realizar operaciones sobre valores y variables, como sumar números, comparar datos o combinar condiciones. Son una herramienta esencial para tomar decisiones y procesar información.

Vamos a ver qué categorías y operadores pone a nuestra disposición JavaScript:

2.3.1 Operadores Aritméticos

Los operadores aritmeticos nos sirven para hacer cálculos matemáticos básicos.

@Tip: El operador + también se usa para concatenar cadenas de texto

let nombre = "Ana";
let saludo = "Hola, " + nombre;
console.log(saludo); // Hola, Ana

2.3.2 Operadores de Comparación

Estos operadores comparan dos valores y devuelven un booleano (true o false).

@Tip: usa siempre === y !== para evitar errores por conversión de tipos automáticos que hace JavaScript con ==.

2.3.3 Operadores Lógicos

Se utilizan para combinar condiciones booleanas.

Ejemplo:

let edad = 20;
let tieneCarnet = true;

if (edad >= 18 && tieneCarnet) {
  console.log("Puedes conducir");
} else {
  console.log("No puedes conducir");
}
// Resultado: "Puedes conducir"

Uso combinado en la evaluación de condiciones

En muchas ocasiones tenemos la necesidad de realizar comparaciones utilizando varios operadores juntos, esto es perfectamente válido, en estos casos, aconsejamos el uso de () para delmitar las comparaciones:

let usuario = "admin";
let clave = "1234";

if ((usuario === "admin") && (clave === "1234")) {
  console.log("Acceso concedido");
} else {
  console.log("Acceso denegado");
}

En resumen:

• Los operadores aritméticos te permiten realizar cálculos.
• Los de comparación sirven para verificar condiciones.
• Los lógicos te permiten combinar múltiples condiciones.

2.4 Comentarios y Buenas Prácticas

¿Qué son los comentarios?

En JavaScript al igual que el resto de lenguajes de programación, los comentarios son líneas de texto que el programa ignora completamente. Sirven para que tú (o cualquier otra persona que lea tu código) pueda entender qué estás haciendo, por qué tomaste ciertas decisiones o incluso para dejar recordatorios.

Los comentarios son esenciales cuando estás aprendiendo, cuando trabajas en equipo, o cuando tienes que revisar un código semanas después y ya no recuerdas nada, por eso es áltamente recomendable la escritura de comentarios en tus programas.

Tipos de Comentarios en JavaScript

JavaScript admite dos tipos de comentarios:

1. Comentario de una sola línea

Se escribe usando // seguido del texto explicativo que se quiere incluir

// Esto es un comentario de una línea
let nombre = "Carlos"; // También puedes ponerlo al final de la línea

2. Comentario de varias líneas (o bloque)

Se escriben el texto que queremos comentar entre los símbolos /* */

/*
  Esto es un comentario
  de varias líneas.
  Útil para explicar cosas largas o desactivar fragmentos de código.
*/
let edad = 25;

¿Cuándo usar comentarios?

Para explicar qué hace un bloque de código.

• Para dejar notas como

// TODO: mejorar esta parte o // REVISAR esto si falla algo

• Para desactivar temporalmente líneas de código (muy útil para probar):

// let resultado = suma(5, 3);

Buenas Prácticas con los Comentarios

• No abuses de los comentarios innecesarios. Si el código ya es claro, no hace falta comentarlo todo:

// Sumo 2 y 2
let resultado = 2 + 2; // ❌ Comentario innecesario

• Explica el “por qué” más que el “qué”. En lugar de explicar lo obvio, intenta explicar por qué haces algo si no es evidente:

// Usamos parseInt para asegurarnos de que sea un número entero
let edad = parseInt(input.value);

• Utiliza comentarios para separar secciones: Si tu archivo crece, puedes usar comentarios como títulos visuales:

// ==== FUNCIONES PRINCIPALES ====

• Sé claro y directo. Los comentarios no son novelas. Intenta que sean breves y comprensibles.

// Validar si el usuario tiene permisos para ver el contenido

• Mantén los comentarios actualizados. A veces el código cambia pero el comentario no… y eso confunde más que ayuda.

Comentarios automáticos en editores

Algunas herramientas como VS Code permiten comentar varias líneas fácilmente:

• Seleccionas varias líneas y presionas Ctrl + / (Windows/Linux) o Cmd + / (Mac).
• Para comentarios de bloque: Shift + Alt + A

También existen extensiones como Better Comments que mejoran la legibilidad visual de tus notas y facilitan mucho la labor, te animo a que explores las capacidades de este editor.

2.5 Uso de typeof

¿Qué es typeof?

En JavaScript, typeof es un operador que se utiliza para saber el tipo de dato que tiene una variable o expresión. Es como preguntarle al lenguaje: “Oye, ¿qué tipo de cosa es esto?”

typeof 42 // "number"
typeof "Hola" // "string"
typeof true // "boolean"

typeof es muy útil cuando estás depurando código, validando datos o simplemente no estás seguro de qué tipo estás manipulando.

¿Cómo se usa?

typeof se puede usar de dos formas (ambas son válidas):

typeof variable
typeof(valor)

Ejemplos:

let nombre = "Laura";
console.log(typeof nombre); // "string"

console.log(typeof 123); // "number"

console.log(typeof false); // "boolean"

Tipos que devuelve typeof

Aquí tienes los resultados más comunes que devuelve typeof:

⚠️ @Tip: typeof null devuelve "object" por un error en el lenguaje que se arrastra desde los años 90. ¡Pero no te preocupes! Todos los desarrolladores lo saben y lo tienen en cuenta.

Casos de uso comunes

1. Validar el tipo antes de ejecutar algo

function imprimirNumero(x) {
  if (typeof x === "number") {
    console.log("El número es:", x);
  } else {
    console.log("¡Eso no es un número!");
  }
}

2. Comprobar si una variable existe o no es undefined

let edad;

if (typeof edad === "undefined") {
  console.log("La variable edad no tiene valor");
}

3. Saber si algo es una función

let saludo = function() { console.log("Hola"); };

if (typeof saludo === "function") {
  saludo();
}

Limitaciones de typeof

Aunque typeof es muy útil, no es perfecto. Por ejemplo:

• No puede distinguir entre arrays y objetos: ambos devuelven "object".
• Como ya vimos, null también devuelve "object".

Para identificar arrays de forma más precisa puedes usar:

Array.isArray([1, 2, 3]); // true

Conclusión

En este capítulo hemos asentado las bases de la sintaxis de JavaScript, estas reglas y conceptos forman la columna vertebral de todo programa en JavaScript.

Aprendiste a identificar y trabajar con los tipos de datos primitivos, como números, cadenas, booleanos y valores especiales como null o undefined. Luego conociste las distintas formas de declarar variables con var, let y const, entendiendo las diferencias de alcance y mutabilidad entre ellas, esencial para evitar errores comunes en el desarrollo.

También te adentraste en el uso de operadores para realizar operaciones matemáticas, comparar valores y construir expresiones lógicas, imprescindible para tomar decisiones. Aprendiste cómo comentar correctamente el código y seguir buenas prácticas que te ayudarán a mantenerlo limpio y legible.

Por último, vimos cómo el operador typeof te permite inspeccionar los tipos de datos con facilidad, aunque también descubrimos sus límites y cómo complementarlo en ciertos casos.

Es el momento de poner en práctica lo aprendico con unos ejercicios prácticos.

let dato = "Hola Mundo";
console.log(typeof dato); // "string"

dato = 2025;
console.log(typeof dato); // "number"

Editlet edad = 25;
edad = 30;
console.log("Edad:", edad); // 30

const pais = "España";
// pais = "México"; // ❌ Error: Assignment to constant variable.
console.log("País:", pais);

let usuario = "Juan";

if (typeof usuario === "string" && usuario.length > 0) {
  console.log("Nombre válido");
} else {
  console.log("Nombre no válido");
}

Bibliografía

• Curso de JavaScript (MANUALES IMPRESCINDIBLES). Autor: Astor de Caso Parra. Editorial: Anaya Multimedia
• Clean JavaScript: Aprende a aplicar Código Limpio, SOLID y Testing. Autor: Miguel A. Gómez. Editorial: Editor independiente.
• Aprendiendo JavaScript: Desde cero hasta ECMAScript 6+. Autor: Carlos Azaustre. Editorial: Editor independiente.
• JavaScript: JavaScript Programming Made Easy for Beginners & Intermediates (Step By Step With Hands On Projects). Autor: Craig Berg. Editorial: Editor Independiente
• JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun, interactive, and dynamic web apps, games, and pages. Autor: Laurence Lars Svekis, Maaike van Putten, Codestars By Rob Percival. Editorial: Packt Publishing