Introducción a JavaScript: qué es, para qué sirve y cómo ejecutarlo en el navegador y en Node

¿Qué es JavaScript y por qué aprenderlo?

JavaScript es un lenguaje de programación de alto nivel, dinámico y weakly typed que nació en 1995 para darle vida a las páginas web. Hoy, más de veinte años después, es uno de los lenguajes más usados del planeta: no solo maneja la interactividad en el navegador, sino que también impulsa servidores, aplicaciones de escritorio, herramientas de línea de comandos e incluso sistemas embebidos.

Si estás empezando en el mundo del desarrollo, JavaScript es una excelente puerta de entrada porque:

• Tiene una sintaxis relativamente sencilla y cercana al inglés.
• Se ejecuta en prácticamente cualquier dispositivo con un navegador o con Node.js instalado.
• Su ecosistema es enorme: bibliotecas como React, Vue o Svelte para el frontend; frameworks como Express, NestJS o Fastify para el backend; y herramientas de build como Webpack, Vite o Rollup.
• La comunidad es muy activa, lo que significa que encontrarás tutoriales, paquetes npm y respuestas en Stack Overflow casi al instante.

Este tutorial está pensado para vos que tenés poco o ningún experiencia previa con programación, pero querés entender qué es JavaScript, para qué sirve y cómo ponerlo en marcha tanto en el navegador como en Node.js. Al final vas a poder escribir pequeños programas, ver su salida en la consola y tener una base sólida para seguir aprendiendo.

Cómo se ejecuta JavaScript

En el navegador

Cuando abrís una página web, el navegador descarga el archivo HTML, lo interpreta y, si encuentra una etiqueta <script> con código JavaScript, lo ejecuta mediante su motor (V8 en Chrome y Node, SpiderMonkey en Firefox, JavaScriptCore en Safari). El código puede estar embebido directamente en el HTML o cargarse desde un archivo externo.

Una forma rápida de probar código sin crear un archivo es abrir la consola de desarrollador (F12 en la mayoría de los navegadores) y escribir allí. Cada línea que ingresás se evalúa al instante y el resultado se muestra en la consola.

En Node.js

Node.js es un entorno de ejecución que permite correr JavaScript fuera del navegador, usando el mismo motor V8 de Chrome. Se instala como un programa independiente y se ejecuta desde la terminal con el comando node. Node provee APIs adicionales para trabajar con el sistema de archivos, redes, procesos y mucho más, lo que lo convierte en una plataforma ideal para construir backends, scripts de automatización y herramientas de línea de comandos.

Preparando el ambiente

Antes de escribir código, asegúrate de tener lo necesario:

• Para el navegador: cualquier navegador moderno (Chrome, Firefox, Edge, Safari). No se necesita instalar nada extra.
• Para Node.js: descargá el instalador desde https://nodejs.org/ y seguí los pasos. Al terminar, podés verificar la versión abriendo una terminal y ejecutando:

node --version
npm --version

Deberías ver algo como v20.10.0 y 10.5.0 (los números pueden variar).

Primeros pasos: el clásico "Hola, mundo"

Empecemos con el programa más simple posible: imprimir un saludo en la consola.

En el navegador (consola de desarrollador)

1. Abrí tu navegador y presioná F12 o Ctrl+Shift+I.
2. Seleccioná la pestaña Console.
3. Pegá la siguiente línea y presioná Enter:

console.log('Hola, mundo desde el navegador');

Verás el texto impreso justo debajo de la línea que ingresaste.

En Node.js (archivo)

1. Creá una carpeta para tus pruebas, por ejemplo js-tutorial.
2. Dentro de ella, creá un archivo llamado hola.js con el siguiente contenido:

console.log('Hola, mundo desde Node');

1. Abrí una terminal, navegá hasta esa carpeta y ejecutá:

node hola.js

La salida será:

Hola, mundo desde Node

Sintaxis básica

A continuación repasamos los conceptos fundamentales que vas a usar todo el tiempo.

Variables y tipos de datos

JavaScript tiene tres formas de declarar variables: var, let y const. En la práctica moderna se recomienda usar let para variables que puedan cambiar y const para aquellas que no van a ser reasignadas. var está prácticamente en desuso debido a problemas de alcance.

let nombre = 'Ana';   // cadena de texto (string)
const PI = 3.14159;   // número (number)
let activo = true;    // booleano (boolean)
let edad;             // variable sin valor inicial -> undefined
let nada = null;      // valor explícitamente nulo

Los tipos primitivos son: string, number, boolean, undefined, null, symbol y bigint. Todo lo que no sea primitivo es un objeto (incluyendo arreglos y funciones).

Operadores

Los operadores aritméticos (+, -, *, /, %) funcionan como esperás. El operador + también concatena cadenas:

let saludo = 'Hola' + ' ' + nombre; // 'Hola Ana'
let suma = 5 + 3;                  // 8
let resto = 10 % 3;                // 1

Los operadores de comparación (==, ===, !=, !==, <, >, <=, >=) devuelven booleanos. Se recomienda usar la versión estricta (===, !==) para evitar coerciones inesperadas.

5 == '5'   // true  (coerción)
5 === '5'  // false (tipo distinto)

Estructuras de control

Condicionales

if (edad >= 18) {
  console.log('Sos mayor de edad');
} else if (edad >= 13) {
  console.log('Sos adolescente');
} else {
  console.log('Sos un niño');
}

Bucles

• while y do...while se repiten mientras una condición sea verdadera.
• for es útil cuando conocés la cantidad de iteraciones.
• for...of recorre elementos iterables (arreglos, strings, etc.).
• for...in recorre las propiedades enumerables de un objeto (menos usado en la práctica).

Ejemplo con for:

for (let i = 0; i < 5; i++) {
  console.log(`Iteración ${i}`);
}

Funciones

Las funciones son bloques de código reutilizables. Podés declararlas de tres maneras principales:

1. Declaración de función (hoisted):

function doble(x) {
  return x * 2;
}

1. Expresión de función asignada a una variable:

const triple = function (x) {
  return x * 3;
};

1. Función flecha (arrow function), sintaxis más corta y léxico de this:

const cuadrado = x => x * x;

Llamarlas es idéntico:

console.log(doble(4)); // 8
console.log(triple(3)); // 9
console.log(cuadrado(5)); // 25

Trabajando con datos estructurados

Arreglos (arrays)

Un arreglo es una lista ordenada de valores. Se crea con corchetes y sus elementos se acceden mediante índice (empezando en 0).

let frutas = ['manzana', 'banana', 'cereza'];
console.log(frutas[0]); // manzana
frutas.push('durazno'); // agrega al final
console.log(frutas.length); // 4

Métodos útiles:

• push, pop (final).
• shift, unshift (principio).
• slice, splice (subconjuntos y eliminación/inserción).
• forEach, map, filter, reduce (iteración funcional).

Ejemplo de map:

let numeros = [1, 2, 3, 4];
let alCuadrado = numeros.map(n => n * n);
console.log(alCuadrado); // [1, 4, 9, 16]

Objetos

Los objetos son colecciones de pares clave‑valor. Las claves son strings (o símbolos) y los valores pueden ser cualquier tipo, incluyendo otras funciones u objetos.

let persona = {
  nombre: 'Luis',
  edad: 29,
  saludar: function () {
    console.log(`Hola, soy ${this.nombre}`);
  }
};

console.log(persona.nombre); // Luis
persona.saludar(); // Hola, soy Luis

La notación de punto (.) y la de corchetes ([]) son equivalentes cuando la clave es un string válido.

console.log(persona['edad']); // 29

Ejecutando código en ambos entornos con ejemplos comentados

A continuación vas a ver dos bloques de código idénticos que funcionan tanto si los pegás en la consola del navegador como si los guardás en un archivo .js y los corre con node. Cada bloque incluye comentarios que explican qué hace y cuál es el resultado esperado en la consola.

Ejemplo 1: cálculo del área de un círculo

// Definimos una constante para PI (valor aproximado)
const PI = 3.14159;

// Función que recibe el radio y devuelve el área
function areaDelCirculo(radio) {
  return PI * radio * radio;
}

// Probamos la función con varios valores
console.log('Área con radio 1:', areaDelCirculo(1));   // ~3.14159
console.log('Área con radio 2.5:', areaDelCirculo(2.5)); // ~19.6349
console.log('Área con radio 0:', areaDelCirculo(0));   // 0

Salida esperada

Área con radio 1: 3.14159
Área con radio 2.5: 19.6349375
Área con radio 0: 0

Ejemplo 2: filtrado y transformación de una lista de productos

// Arreglo de objetos que representan productos
const productos = [
  { nombre: 'Laptop', precio: 1200, disponible: true },
  { nombre: 'Mouse', precio: 25, disponible: false },
  { nombre: 'Teclado', precio: 75, disponible: true },
  { nombre: 'Monitor', precio: 300, disponible: true },
  { nombre: 'Webcam', precio: 80, disponible: false }
];

// 1. Filtramos solo los productos disponibles
const disponibles = productos.filter(p => p.disponible);
console.log('Productos disponibles:', disponibles.map(p => p.nombre));
// Salida esperada: ['Laptop', 'Teclado', 'Monitor']

// 2. Creamos un nuevo arreglo con los precios aumentados en un 10%
const preciosConImpuesto = disponibles.map(p => ({
  ...p,
  precio: Math.round(p.precio * 1.10)
}));
console.log('Precios con impuesto:');
preciosConImpuesto.forEach(p => {
  console.log(`- ${p.nombre}: $${p.precio}`);
});
// Salida esperada:
// - Laptop: $1320
// - Teclado: $83
// - Monitor: $330

// 3. Calculamos el precio total de todos los productos disponibles
const total = disponibles.reduce((acc, p) => acc + p.precio, 0);
console.log('Total a pagar (sin impuesto): $' + total);
// Salida esperada: Total a pagar (sin impuesto): $1575

Salida esperada (idéntica a los comentarios dentro del bloque).

Buenas prácticas y errores comunes

Buenas prácticas

1. Usá const y let en lugar de var

   • Evita problemas de hoisting y de alcance de bloque.

2. Preferí las funciones flecha para callbacks simples

   • Son más concisas y no enlazan su propio this, lo que suele ser lo que querés en métodos de arreglos.

3. Nunca comparés con == salvo que tengas un motivo muy específico

   • La coerción de tipos puede producir resultados confusos; usá === y !==.

4. Separá las responsabilidades

   • Una función debería hacer una sola cosa y hacerlo bien. Esto facilita pruebas y reuso.

5. Documentá tu código con comentarios cuando la intención no sea obvia

   • Un buen comentario explica el porqué, no el qué.

6. Manejá errores con try...catch cuando trabajás con operaciones que pueden fallar (lectura de archivos, peticiones de red, JSON.parse, etc.)

7. Usá linters y formatters (ESLint, Prettier)

   • Ayudan a mantener un estilo consistente y a detectar problemas potenciales antes de ejecutar el código.

Errores frecuentes para principiantes

• Olvidar return en una función → devuelve undefined sin que lo notes.
• Confundir = (asignación) con == o === (comparación) → produce asignaciones inesperadas.
• Iterar sobre un arreglo y modificarlo al mismo tiempo → puede saltarse elementos o producir bucles infinitos.
• Suponer que null y undefined son intercambiables → aunque ambos representan "ausencia de valor", tienen usos distintos y operadores diferentes.
• No esperar a que las promesas se resuelvan → al trabajar con APIs asíncronas, olvidar await o .then conduce a valores Promise { <pending> }.

Próximos pasos para seguir aprendiendo

Ahora que ya sabés qué es JavaScript, cómo se ejecuta y tenés algunas bases de sintaxis, podés profundizar en los siguientes temas:

1. Manipulación del DOM – aprender a seleccionar, crear y modificar elementos HTML desde JavaScript.
2. Eventos – responder a clicks, teclas, envío de formularios y otros sucesos del navegador.
3. Fetch y AJAX – hacer peticiones HTTP a APIs externas y manejar respuestas JSON.
4. ES6+ – desestructuración, spread/rest, módulos (import/export), clases y promesas.
5. Node.js – trabajar con el sistema de archivos (fs), crear servidores básicos con http o express, y usar el administrador de paquetes npm.
6. Testing – escribir pruebas unitarias con Jest o Vitest para asegurar que tus funciones se comporten como esperás.
7. Build tools – conocer Webpack, Vite o Parcel para empaquetar y optimizar aplicaciones frontend.

Cada uno de estos temas tiene excelentes recursos gratuitos: la MDN (developer.mozilla.org), el tutorial oficial de Node.js, cursos en freeCodeCamp, Codecademy o YouTube. Lo más importante es practicar: escribí pequeños proyectos, como una lista de tareas, un conversor de monedas o un servidor que sirva una página estática, y vamos aumentando la complejidad gradualmente.

Conclusión

JavaScript es un lenguaje versátil que te permite crear interactividad en el navegador y construir aplicaciones del lado del servidor con Node.js. En este tutorial vimos:

• Qué es JavaScript y por qué es tan ampliamente usado.
• Cómo ejecutarlo tanto en la consola del navegador como en Node mediante el comando node.
• Los conceptos básicos: variables, tipos, operadores, estructuras de control, funciones, arreglos y objetos.
• Ejemplos prácticos comentados, con su salida esperada en consola, que podés correr inmediatamente tanto en el navegador como en Node.
• Buenas prácticas para escribir código limpio y errores comunes que debés evitar.
• Sugerencias de próximos pasos para seguir profundizando en el ecosistema.

Con esta base, ya estás listo para explorar el vasto mundo del desarrollo web y de backend con JavaScript. ¡Manos al código y a seguir aprendiendo!