Introducción a ES6

ECMAScript 2015, también conocido como ES6 (ECMAScript 6), es una actualización importante de JavaScript que introduce nueva sintaxis y características que hacen que la codificación sea más eficiente y más fácil de administrar. JavaScript es uno de los lenguajes de programación más populares utilizados para el desarrollo web y las mejoras en ES6 mejoran enormemente sus capacidades.

Esta guía cubrirá las características importantes introducidas en ES6, con un enfoque especial en Funciones de flecha, una nueva y poderosa forma de escribir funciones.

Características clave de ES6

1. dejar y const

ES6 introdujo dos nuevas formas de declarar variables: let y const.

• let: declara una variable con ámbito de bloque, lo que significa que la variable solo está disponible dentro del bloque en el que se declaró.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: declara una variable constante que no se puede reasignar. Sin embargo, esto no hace que la variable sea inmutable: los objetos declarados con const aún pueden cambiar sus propiedades.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. Funciones de flecha

Una de las características de ES6 de las que más se habla es la Función de flecha. Proporciona una sintaxis más corta y concisa para escribir funciones.

#### Comparación de sintaxis:

Función tradicional (ES5):

   var add = function(x, y) {
     return x   y;
   };

Función de flecha (ES6):

   const add = (x, y) => x   y;

Esto es lo que hace que las funciones de flecha sean diferentes:

• Sintaxis más corta: No es necesario escribir la palabra clave de la función y puedes omitir las llaves {} si la función tiene una sola declaración.
• Retorno implícito: Si la función contiene solo una expresión, el resultado de esa expresión se devuelve automáticamente.
• No this vinculante: Las funciones de flecha no tienen su propio this, lo que las hace inadecuadas para métodos de objeto.

Ejemplo de una función de flecha de una sola línea:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Las funciones de flecha también se pueden usar sin parámetros:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Para funciones con más de una línea, se requieren llaves {} y la declaración de devolución debe ser explícita:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

Funciones de flecha y esto
Una distinción importante es cómo se comporta esto en las funciones de flecha. A diferencia de las funciones tradicionales, las funciones de flecha no vinculan su propio esto: lo heredan del contexto que lo rodea.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

En el ejemplo anterior, la función de flecha dentro de setTimeout hereda esto del método sayName, que se refiere correctamente al objeto persona.

3. Asignación de desestructuración

La desestructuración nos permite extraer valores de arrays u objetos y asignarlos a variables de una forma más concisa.

Desestructuración de objetos:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

Desestructuración de matrices:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Operador de extensión y reposo (...)

El operador... se puede utilizar para expandir matrices en elementos individuales o para reunir múltiples elementos en una matriz.

• Difundir: expande una matriz en elementos individuales.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Descanso: reúne varios argumentos en una matriz.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. Promesas

Las promesas se utilizan para manejar operaciones asincrónicas en JavaScript. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca.

Ejemplo:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

En este ejemplo, la promesa se resuelve después de 1 segundo y el método then() maneja el valor resuelto.

6. Parámetros predeterminados

En ES6, puede establecer valores predeterminados para los parámetros de función. Esto es útil cuando no se proporciona un parámetro o no está definido.

Ejemplo:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. Métodos de cadena (incluye(), comienza con(), termina con())

Se agregaron nuevos métodos a las cadenas para facilitar las tareas comunes:

• incluye(): comprueba si una cadena contiene un valor específico.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): Comprueba si una cadena comienza con un valor específico.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): Comprueba si una cadena termina con un valor específico.
  

   console.log(str.endsWith("!")); // true
  

8. Métodos de matriz (find(), findIndex(), from())

ES6 introdujo nuevos métodos para trabajar con matrices:

• find(): Devuelve el primer elemento que satisface una condición.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): Devuelve el índice del primer elemento que satisface una condición.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. Clases

ES6 introdujo clases en JavaScript, que son azúcar sintáctica sobre la herencia basada en prototipos existente de JavaScript. Las clases permiten una programación orientada a objetos más limpia y comprensible.

Ejemplo:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Conclusión

ES6 ha transformado JavaScript, haciéndolo más eficiente y más fácil de usar. La introducción de Funciones de flecha simplifica la sintaxis de las funciones, mientras que nuevas características como desestructuración, promesas, clases y el operador de extensión permiten a los desarrolladores escribir código más limpio y expresivo. Ya sea un desarrollador principiante o avanzado, comprender estas características de ES6 es esencial para escribir JavaScript moderno.

Al dominar estos conceptos, estará mejor equipado para manejar los desafíos de codificación del mundo real y crear aplicaciones web eficientes y escalables.

Seguimiento del proyecto Arrow Functions en GitHub

Referencias

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements