DEV Community

Cover image for Las 10 principales características de ES6 que todo desarrollador debería conocer
Wellington Cua
Wellington Cua

Posted on

Las 10 principales características de ES6 que todo desarrollador debería conocer

JavaScript es uno de los lenguajes de programación más utilizados en el mundo y su popularidad sigue creciendo. ES6, también conocido como ECMAScript 2015, introdujo muchas características nuevas e interesantes al lenguaje JavaScript. En este blog, veremos 10 funciones avanzadas de ES6 que todo desarrollador de JavaScript debería dominar para mantenerse a la vanguardia. Ya sea un principiante o un desarrollador experimentado, estas funciones seguramente mejorarán sus habilidades de JavaScript y llevarán su codificación al siguiente nivel.

Funciones de flecha:

Las funciones de flecha proporcionan una sintaxis concisa para escribir funciones anónimas.

En lugar de escribir esto:

const square = function (num) {
  return num * num;
};
Enter fullscreen mode Exit fullscreen mode

Puedes escribir el mismo código con una función de flecha:

const square = (num) => num * num;
Enter fullscreen mode Exit fullscreen mode

Literales de plantilla:

Los literales de plantilla permiten incrustar expresiones en literales de cadena utilizando comillas invertidas en lugar de comillas tradicionales. También permiten escribir cadenas de varias líneas.

Por ejemplo:

const name = "John";
const greeting = `Hello, ${name}!`;
Enter fullscreen mode Exit fullscreen mode

Desestructuración:

La desestructuración permite extraer datos de matrices u objetos en variables separadas, facilitando el trabajo con estructuras de datos complejas.

Ejemplo:

const numbers = [1, 2, 3];
const [first, second, third] = numbers; // Desestructuración de array

const person = {
  name: "John",
  age: 18,
};
const { name, age } = person; // Desestructuración de objeto
Enter fullscreen mode Exit fullscreen mode

Operador de propagación:

El operador de propagación (...) permite distribuir elementos de una matriz o propiedades de un objeto en una nueva matriz u objeto. Es útil para fusionar matrices u objetos, o para distribuir una matriz en argumentos de función.

Ejemplo:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
Enter fullscreen mode Exit fullscreen mode

Parámetros predeterminados:

Los parámetros predeterminados permiten especificar valores por defecto para los parámetros de función en caso de que no se pase ningún valor.

Ejemplo:

const greet = (name = "John") => {
  console.log(`Hello, ${name}!`);
};
Enter fullscreen mode Exit fullscreen mode

Parámetros de descanso:

Los parámetros de descanso (...) permiten recopilar una cantidad indefinida de argumentos en una matriz, útil para escribir funciones que acepten cualquier número de argumentos.

Ejemplo:

const sum = (...numbers) => {
  return numbers.reduce((acc, number) => acc += number, 0);
};
Enter fullscreen mode Exit fullscreen mode

Definiciones de clases:

Las definiciones de clases proporcionan una forma más orientada a objetos de definir objetos en JavaScript, facilitando la creación de objetos reutilizables con herencia y encapsulación.

Ejemplo:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Módulos:

Los módulos permiten organizar el código en partes más pequeñas y reutilizables, facilitando la gestión de proyectos complejos y reduciendo el riesgo de colisiones de nombres.

Ejemplo sencillo:

// greeting.js
export const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// main.js
import { greet } from "./greeting.js";
greet("John");
Enter fullscreen mode Exit fullscreen mode

Promesas:

Las promesas son una forma de manejar operaciones asincrónicas en JavaScript. Proporcionan una forma de manejar errores y se pueden combinar para crear flujos asincrónicos complejos.

Ejemplo:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
};

fetchData().then((data) => {
  console.log(data);
});
Enter fullscreen mode Exit fullscreen mode

Map y Set:

Las estructuras de datos Map y Set proporcionan una manera eficiente de almacenar valores únicos en JavaScript, con una variedad de métodos útiles para buscar y manipular los datos.

Ejemplo:

// Creando un Map
const map = new Map();
map.set("name", "John");
map.set("age", 30);

// Accediendo a valores en un Map
console.log(map.get("name")); // Output: John
console.log(map.get("age")); // Output: 30

// Iterando sobre un Map
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Output:
// name: John
// age: 30

// Creando un Set
const set = new Set();
set.add("John");
set.add("Jane");
set.add("Jim");

// Iterando sobre un Set
for (const name of set) {
  console.log(name);
}

// Output:
// John
// Jane
// Jim

// Verificando si un valor existe en un Set
console.log(set.has("John")); // Output: true
Enter fullscreen mode Exit fullscreen mode

En conclusión, las funciones avanzadas de ES6 descritas en este blog son esenciales para que todo desarrollador de JavaScript las domine. Proporcionan una forma más eficiente, concisa y organizada de escribir código, facilitando el trabajo con estructuras de datos complejas y el manejo de operaciones asincrónicas. Ya sea que busques mejorar tus habilidades existentes o estés comenzando con JavaScript, estas características son un excelente punto de partida. Recuerda que convertirse en un experto en estas funciones requiere tiempo y práctica, así que no te desanimes si no comprendes todo de inmediato. Con esfuerzo y dedicación constantes, podrás dominar estas funciones avanzadas de ES6 y llevar tus habilidades de JavaScript a nuevas alturas.

Top comments (0)