¿Qué es JavaScript?
JavaScript es un lenguaje de programación utilizado principalmente para hacer que las páginas web sean interactivas y dinámicas. Permite a los desarrolladores agregar funcionalidades como animaciones, validación de formularios y actualizaciones en tiempo real en los sitios web. Es ampliamente utilizado en el desarrollo web junto con HTML y CSS.
¿Qué es lo mínimo que necesito saber de JS para iniciarme como desarrollador React?
El objetivo del artículo es hacer un breve repaso de lo más importante que debemos conocer de JavaScript para iniciarnos como desarrolladores React, por eso he dejado aquí algunos temas y ejemplos para ayudar con su aprendizaje.
- Variables: Comprender cómo declarar variables, los diferentes tipos de datos como strings, números, booleanos, arrays, objetos, entre otros y cómo trabajar con ellos.
- Funciones: Familiarízate con la declaración y llamada de funciones, los parámetros y el alcance de las variables (scope).
- Objetos y Arrays: JavaScript es un lenguaje orientado a objetos y entender cómo funcionan los objetos y los arrays es crucial para trabajar con React.
- Operadores: Conocer los diferentes operadores de JavaScript, como los operadores aritméticos, de asignación, de comparación y los lógicos.
- Control de flujo: Comprender las estructuras de control de flujo como if-else, switch, y bucles como for y while.
- Eventos: Entender cómo funcionan los eventos en JavaScript y cómo puedes manejarlos.
- DOM (Document Object Model): Saber cómo interactuar con el DOM (interfaz que representa la estructura de un documento HTML) es importante, ya que React utiliza una abstracción virtual del DOM para actualizar la interfaz de usuario de manera eficiente.
- Asincronismo y Promesas: Aprender sobre asincronismo en JavaScript es esencial para comprender cómo manejar las operaciones asíncronas, como las solicitudes de red.
- Desestructuración de Objetos, arrays y clases.
Variables
Las variables se utilizan básicamente para almacenar datos. Actualmente se manejan dos formas para crear esas variables, let y const; en algunos códigos podemos encontrar var, pero esta se encuentra en desuso. Aquí tenemos algunos ejemplos:
Tipos de datos
JavaScript es un lenguaje de tipado dinámico, lo que significa que no necesitas especificar el tipo de datos al declarar una variable. Los tipos de datos en JavaScript incluyen:
String(Cadena de texto)
let nombre = «Programación»;
Number(Número)
let cantidad = 10;
Boolean(Booleano)
let feliz = true;
Array(Arreglo)
let colores [«Amarillo»,»Azul»,»Rojo»]
Object(Objeto)
let persona = {nombre: «Juan», apellido: «Perez, edad: 30}
Null
let valorNull = null;
undefined
let valorUndefined;
Symbol(Símbolo) representa un valor único.
const id = Symbol(«id»);
Function(Funcion)
function sumar(a, b) { return a + b; }
Existen otros tipos de datos como date, pero estos son los mas importantes. Ver mas en la pagina oficial.
Funciones
Las funciones en JavaScript son bloques de código reutilizables que realizan una tarea específica. Pueden aceptar datos de entrada (llamados argumentos) y devolver un resultado. Son fundamentales para organizar y modularizar el código. Este es un ejemplo simple de una función que suma dos números (Es el «Hola Mundo» de las funciones):
function sumar(a, b) {
return a + b;
}
// Llamada a la función
let resultado = sumar(3, 5);
console.log(resultado); // Output: 8
En este ejemplo, la función sumar toma dos argumentos (a y b) y devuelve la suma de estos dos números. Luego, la función es llamada con los valores 3 y 5, y el resultado se guarda en la variable resultado.
Objetos y Arrays
Objetos
Los objetos en JavaScript son estructuras de datos que pueden contener propiedades y métodos. Las propiedades son pares clave-valor que almacenan datos, y los métodos son funciones asociadas al objeto que pueden realizar acciones. Aquí hay un ejemplo simple de un objeto en JavaScript:
// Definición de un objeto persona
let persona = {
nombre: «Juan»,
edad: 30,
esEstudiante: false,
saludar: function() {
return «¡Hola! Mi nombre es » + this.nombre + » y tengo » + this.edad + » años.»;
}
};
// Accediendo a las propiedades del objeto
console.log(persona.nombre); // Output: «Juan»
console.log(persona.edad); // Output: 30
// Llamando a un método del objeto
console.log(persona.saludar()); // Output: «¡Hola! Mi nombre es Juan y tengo 30 años.»
En este ejemplo, persona es un objeto que tiene propiedades como nombre, edad y esEstudiante, y un método llamado saludar que devuelve un saludo personalizado. Puedes acceder a las propiedades y llamar a los métodos del objeto utilizando la notación de punto (objeto.propiedad o objeto.método()). Los objetos en JavaScript son fundamentales para organizar y manipular datos de manera eficiente.
Arrays
Los arrays en JavaScript son estructuras de datos que permiten almacenar múltiples valores en una sola variable. Estos valores pueden ser de cualquier tipo de dato, incluyendo números, strings, objetos u otros arrays. Aquí tienes un ejemplo sencillo de un array en JavaScript:
// Definición de un array de números
let numeros = [1, 2, 3, 4, 5];
// Accediendo a elementos del array
console.log(numeros[0]); // Output: 1
console.log(numeros[2]); // Output: 3
// Modificando un elemento del array
numeros[1] = 10;
console.log(numeros); // Output: [1, 10, 3, 4, 5]
// Añadiendo un elemento al final del array
numeros.push(6);
console.log(numeros); // Output: [1, 10, 3, 4, 5, 6]
// Eliminando el último elemento del array
numeros.pop();
console.log(numeros); // Output: [1, 10, 3, 4, 5]
En este ejemplo, numeros es un array que contiene una secuencia de números. Puedes acceder a los elementos del array utilizando su índice entre corchetes (numeros[0] accede al primer elemento). Además, puedes modificar, añadir o eliminar elementos del array utilizando métodos como push() para agregar elementos al final, y pop() para eliminar el último elemento. Los arrays en JavaScript son muy versátiles y se utilizan ampliamente para almacenar y manipular colecciones de datos.
Operadores
Los operadores en JavaScript se utilizan para realizar operaciones en variables y valores. Aquí tengo una lista de algunos de los operadores más comunes en JavaScript:
Operadores Aritméticos:
+ (suma)
– (resta)
* (multiplicación)
/ (división)
% (módulo)
Operadores de Asignación:
= (asignación)
+= (suma y asigna)
-= (resta y asigna)
*= (multiplica y asigna)
/= (divide y asigna)
%= (calcula el módulo y asigna)
Operadores de Comparación:
== (igualdad, no estricta)
=== (igualdad estricta, comprueba igualdad de valor y tipo de dato)
!= (no igual, no estricto)
!== (no igual estricto, incluye tipo de dato)
> (mayor que)
< (menor que)
>= (mayor o igual que)
<= (menor o igual que)
Operadores Lógicos:
&& (y lógico)
|| (o lógico)
! (negación lógica)
Operadores de Incremento/Decremento:
++ (incremento)
— (decremento)
Operadores de Concatenación:
+ (concatenación de cadenas)
Operador Ternario:
? : (también conocido como operador condicional)
Operadores Bit a Bit:
& (AND)
| (OR)
^ (XOR)
~ (NOT)
<< (Desplazamiento a la izquierda)
>> (Desplazamiento a la derecha)
>>> (Desplazamiento sin signo a la derecha)
Estos son solo algunos de los operadores más comunes en JavaScript. Hay otros operadores menos comunes y más específicos, pero estos deberían cubrir la mayoría de tus necesidades en la programación diaria.
Control de flujo
Las estructuras de control en JavaScript permiten controlar el flujo de ejecución del código, permitiendo tomar decisiones y repetir acciones según ciertas condiciones. Los tipos principales son:
Estructuras de control condicionales:
if: Ejecuta un bloque de código si una condición es verdadera.
else: Ejecuta un bloque de código si la condición de un if no es verdadera.
else if: Permite encadenar múltiples condiciones después de un if.
Ejemplo:
let edad = 18;
if (edad >= 18) {
console.log(«Eres mayor de edad»);
} else {
console.log(«Eres menor de edad»);
}
Estructuras de control de bucles:
for: Repite un bloque de código un número específico de veces.
while: Repite un bloque de código mientras una condición sea verdadera.
do…while: Similar a while, pero garantiza que el bloque de código se ejecute al menos una vez.
Ejemplos:
for:
for (let i = 0; i < 5; i++) {
console.log(i);
}
while:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
do … while:
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
Eventos
Los eventos en JavaScript son acciones que ocurren en el navegador, como hacer clic en un botón, mover el ratón sobre un elemento o cargar una página. Puedes manejar estos eventos utilizando funciones llamadas «event handlers» que se ejecutan cuando ocurre el evento. Aquí hay un ejemplo que muestra cómo manejar el evento de hacer clic en un botón:
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Eventos</title>
<script>
// Función de manejo del evento clic
function doyUnClick() {
alert(«¡Has hecho clic en el botón!»);
}
</script>
</head>
<body>
<!– Botón con evento de clic –>
<button onclick=»doyUnClick()»>Haz clic aquí</button>
</body>
</html>
En este ejemplo, hemos definido una función llamada doyUnClick() que muestra un mensaje de alerta cuando se hace clic en el botón. Luego, asociamos esta función con el evento onclick del botón en línea utilizando el atributo onclick=»doyUnClick()». Cuando el botón se hace clic, la función doyUnClick() se ejecuta y muestra el mensaje de alerta.
DOM (Document Object Model)
El DOM en JavaScript es una representación jerárquica de una página web como una estructura de árbol, donde cada elemento de la página es un nodo en ese árbol. Permite a los programas acceder y manipular dinámicamente la estructura, el contenido y el estilo de una página web. Aquí tienes un ejemplo sencillo:
Supongamos que tenemos un HTML simple con el que tenemos en la imagen.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de DOM</title>
</head>
<body>
<div id=»miDiv»>
<p>Hola, soy un párrafo dentro de un div.</p>
</div>
</body>
</html>
Queremos cambiar el contenido del párrafo usando JavaScript:
// Accediendo al elemento div con el id «miDiv»
let divElemento = document.getElementById(«miDiv»);
// Accediendo al primer párrafo dentro del div
let parrafoElemento = divElemento.getElementsByTagName(«p»)[0];
// Cambiando el contenido del párrafo
parrafoElemento.textContent = «¡Hola! Soy un nuevo párrafo.»;
// Añadiendo un estilo al párrafo
parrafoElemento.style.color = «red»;
En este ejemplo, estamos:
- accediendo al elemento div con el id «miDiv» utilizando document.getElementById(),
- luego estamos accediendo al primer párrafo dentro de ese div con getElementsByTagName(),
- cambiando su contenido con textContent,
- y finalmente cambiando su color de texto con style.color.
Este es solo un ejemplo básico de cómo puedes utilizar el DOM en JavaScript para acceder y manipular elementos HTML de manera dinámica.
Asincronísmo y promesas
En JavaScript, las promesas son objetos que representan la eventual finalización (resolve) o falla (reject) de una operación asincrónica, y su resultado valor retornado. El asincronismo se refiere a la capacidad de ejecutar tareas en segundo plano sin detener la ejecución del programa principal.
Ejemplo:
Supongamos que queremos realizar una solicitud HTTP para obtener datos de un servidor. En lugar de esperar a que se complete la solicitud y bloquear la ejecución del código, podemos usar promesas y asincronismo para manejar esta operación de manera eficiente.
// Crear una promesa
let miPromesa = new Promise(function(resolve, reject) {
// Simulamos una operación asincrónica, como una solicitud HTTP
setTimeout(function() {
// Comprobar si la solicitud se completó correctamente
let exito = true;
if (exito) {
// Si se completó correctamente, llamar a resolve con los datos
resolve(«Datos obtenidos exitosamente»);
} else {
// Si falla, llamar a reject con un mensaje de error
reject(«Error al obtener datos»);
}
}, 2000); // Simulamos un tiempo de espera de 2 segundos
});
// Manejar la promesa
miPromesa.then(function(resultado) {
// La promesa se resolvió correctamente, hacer algo con los datos
console.log(resultado);
}).catch(function(error) {
// La promesa fue rechazada, manejar el error
console.log(error);
});
En este ejemplo, creamos una promesa que simula una solicitud HTTP asincrónica con setTimeout de 2 segundos. Dentro de la promesa, comprobamos si la solicitud se completó correctamente y llamamos a resolve, o a reject si falla. Luego, usamos then para manejar el resultado si la promesa se resuelve correctamente, y catch para manejar cualquier error que ocurra durante el proceso.
Desestructuración de Objetos, arrays y clases.
La desestructuración es una característica que permite extraer valores de objetos y arrays de una manera más precisa, asignándolos a variables individuales. También se puede aplicar a las propiedades de los objetos y a los elementos de los arrays.
Ejemplos:
Desestructuración de Objetos:
// Objeto
let persona = { nombre: «Juan», edad: 30 };
// Desestructuración
let { nombre, edad } = persona;
console.log(nombre); // Output: «Juan»
console.log(edad); // Output: 30
Desestructuración de Arrays:
// Array
let colores = [«rojo», «verde», «azul»];
// Desestructuración
let [color1, color2, color3] = colores;
console.log(color1); // Output: «rojo»
console.log(color2); // Output: «verde»
console.log(color3); // Output: «azul»
Desestructuración de Clases (usando constructor):
// Clase
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
}
// Creación de instancia
let persona = new Persona(«Ana», 25);
// Desestructuración
let { nombre, edad } = persona;
console.log(nombre); // Output: «Ana»
console.log(edad); // Output: 25
La desestructuración es una característica poderosa y útil en JavaScript que te permite escribir código más limpio y preciso al extraer valores de objetos, arrays y clases de manera eficiente.
Conclusión
Javascript sin lugar a dudas es el lenguaje de programación mas utilizado en los últimos años para el desarrollo web; en el 2023 github octoverse lo posicionaba en el primer puesto, otras como TIOBE lo ubican en el sexto puesto pero junto a lenguajes utilizados en backend como java, C, C++.
Imagen recuperada de la página oficial de github octoverse.
Seguro no lo aprenderás en un fin de semana, pero seguro con mucha práctica y dedicación lograrás hacer muchas cosas con este lenguaje que tal como lo presento en la imagen principal del artículo, JS se utiliza para desarrollo web, mobile, backend .. y bueno la web3.
Adicional es necesario para que entres en las nuevas tecnologías y en especial en React, que justo estoy aprendiendo y antes de iniciar el autor Carlos Azaustre en su libro Aprendiendo React, guía para aprender React.js desde cero; menciona que «React es una herramienta potente y flexible, pero tambien puede ser compleja si no se tiene una base solida » y menciona a Java Script como la primera y mas importane (por obvias razones). Les comparto la foto del libro de Carlos que compré esta semana y que cuando lo termine les estaré contando que tal me fue con él.
