Comenzando

Tabla de Contenidos

Características de ES6+

ECMAScript 6 (ES6) y versiones posteriores introdujeron características poderosas que mejoran la legibilidad, mantenibilidad y eficiencia de JavaScript. Esta sección cubre las adiciones más importantes.

Let y Const (Variables con Ámbito de Bloque)

ES6 introdujo let y const para reemplazar var.

let permite reasignar valores pero tiene ámbito de bloque.
const previene la reasignación y también tiene ámbito de bloque.

let name = "Alice";
name = "Bob"; // Allowed
  
const age = 30;
age = 31; // Error: Assignment to constant variable

Ejemplo de Ámbito de Bloque

if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // Error: x is not defined

Literales de Plantilla (Interpolación de Cadenas)

Los literales de plantilla usan comillas invertidas (`) y permiten incrustar expresiones usando ${}.

let user = "Alice";
console.log(`Hello, ${user}!`); // Outputs: Hello, Alice!

Las cadenas de varias líneas también son posibles:

let message = `This is
a multiline
string.`;
console.log(message);

Funciones Flecha

Las funciones flecha proporcionan una sintaxis concisa para definir funciones.

const add = (a, b) => a + b;
console.log(add(5, 3)); // Outputs: 8

Si hay solo un parámetro, se pueden omitir los paréntesis:

const greet = name => `Hello, ${name}`;
console.log(greet("Alice"));

Las funciones flecha no tienen su propio vínculo de this, lo que las hace útiles en ciertos contextos como los callbacks.

Desestructuración de Asignación

La desestructuración simplifica la extracción de valores de arreglos y objetos.

Desestructuración de Arreglos

let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first, second); // Outputs: red green

Saltar elementos:

let [, , third] = colors;
console.log(third); // Outputs: blue

Desestructuración de Objetos

let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age); // Outputs: Alice 25

Renombrando variables:

let { name: fullName } = person;
console.log(fullName); // Outputs: Alice

Operador Rest

Se usa en los parámetros de función para recopilar múltiples argumentos.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
  }
console.log(sum(1, 2, 3, 4)); // Outputs: 10

Parámetros por Defecto

Las funciones pueden tener valores por defecto para los parámetros.

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet(); // Outputs: Hello, Guest
greet("Alice"); // Outputs: Hello, Alice

Módulos (Importar/Exportar)

ES6 introdujo módulos para una mejor organización del código.

Exportando un Módulo

// math.js
export function add(a, b) {
     return a + b;
}
  
export const PI = 3.14;

Importando un Módulo

// main.js
import { add, PI } from "./math.js";
console.log(add(2, 3)); // Outputs: 5
console.log(PI); // Outputs: 3.14

Para exportaciones por defecto:

// message.js
export default function message() {
  console.log("This is a default export");
}
  
// main.js
import msg from "./message.js";
msg();

Promesas (JavaScript Asincrónico)

Las promesas simplifican el manejo de operaciones asincrónicas.

let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 2000);
});
  
fetchData.then(result => console.log(result)); // Outputs after 2 seconds: Data loaded

Manejo de errores:

fetchData
  .then(result => console.log(result))
  .catch(error => console.log(error));

Async/Await

async las funciones trabajan con await para simplificar promesas.

async function fetchData() {
  return "Data received";
}
  
fetchData().then(data => console.log(data));

Usando await dentro de una función async:

async function fetchUser() {
  let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  let user = await response.json();
  console.log(user);
}
  
fetchUser();

Conclusión

Las características de ES6+ mejoran la eficiencia, legibilidad y mantenibilidad de JavaScript. La próxima sección explorará JavaScript asincrónico, cubriendo callbacks, promesas y async/await en detalle.

Objetos y Arreglos

JavaScript asíncrono

Únete a nuestro Foro Comunitario

¿Alguna otra pregunta? Ponte en contacto