Introducción a JavaScript
Aspectos generales del lenguaje y su propósito en el desarrollo Web.
Slides
Javascript
JavaScript es un lenguaje de programación ampliamente utilizado para el desarrollo web, especialmente para crear experiencias interactivas en el navegador. Es versátil, ya que se puede utilizar tanto en el lado del cliente como en el lado del servidor (gracias a entornos como Node.js).
Paradigma del lenguaje
JavaScript es multiparadigma, lo que significa que soporta varios estilos de programación:
-
Imperativo: se basa en instrucciones paso a paso. Este paradigma es útil para entender cómo se ejecutan las operaciones en secuencia.
Paradigma del lenguajelet numeros = [1, 2, 3];for (let i = 0; i < numeros.length; i++) {console.log(numeros[i]); // Imprime cada número en la consola} -
Orientado a objetos: basado en prototipos y, más recientemente, en clases. Este paradigma permite modelar entidades del mundo real como objetos.
Paradigma del lenguaje (2)class Persona {constructor(nombre) {this.nombre = nombre;}saludar() {console.log(`Hola, soy ${this.nombre}`);}} -
Funcional: permite tratar funciones como ciudadanos de primera clase. Este paradigma es ideal para trabajar con datos de manera declarativa.
Paradigma del lenguaje (3)let numeros = [1, 2, 3];numeros.forEach(num => console.log(num)); // Imprime cada número usando una función
¿Qué significa ser un lenguaje interpretado?
Un lenguaje interpretado se ejecuta línea por línea mediante un intérprete, en lugar de ser compilado a código máquina antes de su ejecución. Esto hace que el desarrollo sea más rápido, pero puede ser menos eficiente en rendimiento que los lenguajes compilados.
En JavaScript, el intérprete generalmente es el motor del navegador (como V8 en Chrome o SpiderMonkey en Firefox).
Ejemplo:
console.log("Hola mundo"); // Se ejecuta inmediatamente
console.log("Esta línea se ejecuta después"); // Se ejecuta en orden
Javascript vs ECMAScript
- ECMAScript (ES): Especificación que define cómo debe funcionar el lenguaje. Es el estándar que guía las implementaciones.
- JavaScript: Implementación práctica de esa especificación, utilizada en navegadores y otros entornos.
Por ejemplo:
- ES5: Introdujo
strict mode, que ayuda a evitar errores comunes. - ES6 (2015): Introdujo características modernas como
let,const, arrow functions, clases, etc.
Ejemplo ES6:
const saludar = (nombre) => `Hola, ${nombre}`;
console.log(saludar("Ana")); // "Hola, Ana"
Ejemplo de Strict Mode:
"use strict"; // Activa el modo estricto
let x = 3.14;
console.log(x); // 3.14
Pasos de instalación en Node (Mac, Windows, Linux)
Node.js es un entorno de ejecución para JavaScript en el lado del servidor. Aquí se explica cómo instalarlo:
Windows
- Ir a https://nodejs.org.
- Descargar el instalador LTS (versión recomendada para la mayoría de usuarios).
- Ejecutar el instalador y seguir los pasos.
MacOS (Homebrew)
brew install node
Linux (Ubuntu/Debian)
sudo apt update
sudo apt install nodejs npm
Verificar instalación:
node -v // Muestra la versión de Node.js instalada
npm -v // Muestra la versión de npm instalada
Variables y tipos de dato
JavaScript tiene varios tipos de datos: string, number, boolean, null, undefined, symbol, bigint, y objetos.
Inmutables
Los valores primitivos no se pueden cambiar. Esto significa que no puedes modificar directamente el contenido de un valor primitivo.
let texto = "Hola";
texto[0] = "J"; // No cambia
console.log(texto); // "Hola"
Mutables
Los objetos y arrays pueden modificarse. Esto permite trabajar con estructuras de datos más complejas.
let arr = [1, 2, 3];
arr[0] = 99; // Cambia el primer elemento
console.log(arr); // [99, 2, 3]
Tipado dinámico
El tipo de una variable puede cambiar en tiempo de ejecución. Esto hace que JavaScript sea flexible pero puede causar errores si no se maneja con cuidado.
let x = 5; // number
x = "Hola"; // string
Hoisting
El hoisting es el comportamiento por el cual las declaraciones se "mueven" al inicio de su contexto. Esto puede causar confusión si no se entiende bien.
Variables
Las variables declaradas con var son "hoisted", pero su valor no lo es.
console.log(a); // undefined
var a = 5;
Funciones
Las funciones declaradas son completamente "hoisted", lo que significa que puedes llamarlas antes de declararlas.
saludar(); // Funciona
function saludar() {
console.log("Hola");
}
Manipulación de datos
Operadores
Los operadores permiten realizar cálculos y operaciones con datos.
let suma = 5 + 3; // 8
let resta = 10 - 4; // 6
let multiplicacion = 2 * 6; // 12
let division = 10 / 2; // 5
Métodos populares
Los métodos de cadenas y arrays son útiles para manipular datos.
let texto = "JavaScript";
console.log(texto.toUpperCase()); // "JAVASCRIPT"
console.log(texto.includes("Script")); // true
Type coercion
JavaScript convierte automáticamente tipos de datos en ciertas operaciones.
console.log("5" + 2); // "52" (concatenación)
console.log("5" - 2); // 3 (conversión a número)
Loose vs Strict equality
La comparación estricta (===) verifica tipo y valor, mientras que la comparación laxa (==) solo verifica valor.
console.log(5 == "5"); // true
console.log(5 === "5"); // false
Estructuras de control
Condicionales
Permiten ejecutar código basado en condiciones.
if (true) console.log("Se cumple");
Iterativas
Permiten repetir bloques de código.
for (let i = 0; i < 3; i++) console.log(i);
Excepciones
Permiten manejar errores de manera controlada.
try {
throw new Error("Error ejemplo");
} catch (e) {
console.log(e.message);
}
Funciones
Declaración
Las funciones declaradas son "hoisted" y pueden ser llamadas antes de su definición.
function saludar() {
console.log("Hola");
}
Expresiones
Las funciones expresadas no son "hoisted".
const saludar = function() { console.log("Hola"); }
Arrow
Las funciones flecha son una forma concisa de escribir funciones.
const saludar = () => console.log("Hola");
Orden superior
Las funciones de orden superior aceptan otras funciones como argumentos.
function operar(fn, a, b) {
return fn(a, b);
}
console.log(operar((x, y) => x + y, 3, 4)); // 7
Callbacks
Los callbacks son funciones que se ejecutan después de que otra función termina.
function proceso(callback) {
console.log("Ejecutando...");
callback();
}
proceso(() => console.log("Finalizado"));
Objetos
Literales
Los objetos literales son una forma sencilla de crear estructuras de datos.
let persona = { nombre: "Ana", edad: 25 };
Clases
Las clases son una forma moderna de trabajar con objetos y herencia.
class Persona {
constructor(nombre) { this.nombre = nombre; }
saludar() { console.log("Hola, soy " + this.nombre); }
}
Prototipos
Los prototipos son la base de la herencia en JavaScript.
function Animal(nombre) { this.nombre = nombre; }
Animal.prototype.saludar = function() { console.log("Hola, soy " + this.nombre); }
Los prototipos en JavaScript son objetos que actúan como plantillas para otros objetos. Cada objeto tiene un prototipo que puede proporcionar propiedades y métodos compartidos. Esto permite reutilizar código y establecer relaciones entre objetos.
Ejemplo básico:
function Animal(nombre) {
this.nombre = nombre;
}
Animal.prototype.saludar = function() {
console.log(`Hola, soy ${this.nombre}`);
};
let perro = new Animal("Firulais");
perro.saludar(); // "Hola, soy Firulais"
Los prototipos son fundamentales para la herencia en JavaScript, permitiendo que los objetos compartan comportamientos sin duplicar código.
Métodos de objetos
Los métodos de objetos permiten trabajar con las propiedades de los mismos.
let obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // ["a", "b"]
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]