¿Cómo evolucionó ES6 (ES2015) y trajo nuevas características al JavaScript moderno?

En este artículo, veremos las características de ECMAScript 6/ES2015 en JavaScript.

1. Función de flecha: la función de flecha usa la sintaxis => como abreviatura. Es una alternativa a la función de flecha tradicional.

veamos un ejemplo para comparar las funciones tradicional y de flecha.

<script>
 
    // Without using Arrow Function
    let square = function (x) {
        return (x * x);
    };
    console.log(square(9));
 
    // Using Arrow Function
    square = (x) => { return x * x; }
 
    console.log(square(9));
 
</script>

Producción:

81
81

Obtenga más información sobre la función de flecha consultando este artículo de GFG

2. Clases ES6/ES2015: esta característica realmente convirtió a javascript en el lenguaje que es ahora. Como sabrá, las clases son una plantilla para crear un objeto. Las clases de ES6 trajeron el poder de la herencia, las súper llamadas, una instancia de una clase y el constructor (que se inicializa al crear una clase).

Declaración de clase:

<script>
 
    // Here class is declared
    class Rectangle {
 
        constructor(a, b) {
            this.a = a;
            this.b = b;
        }
    }
    let rect = new Rectangle(10, 20);
    console.log(rect.a, rect.b)
</script>

Producción:

10 20

Más información sobre las clases aquí  

3. Literales de objeto mejorados (nuevos): se amplía para admitir la configuración del prototipo en construcción, abreviatura para geeks: asignaciones de geeks, también para definir métodos, crear superclases y, por último, también para calcular nombres de propiedades con expresiones.

<script>
 
    // JavaScript code demonstrating
    // a simple object
    let school = {
        name: 'Vivekananda School',
        location: 'Delhi',
        established: '1971',
        displayInfo: function () {
            console.log(`${school.name}
            was established in
            ${school.established}
            at ${school.location}`);
        }
    }
    school.displayInfo();
</script>

Producción:

Vivekananda School was established in 1971 at Delhi

Obtenga más información sobre Objeto aquí

4. Promises: Adivinaste bien, esta fue la versión de ECMAScript que trajo promesas al mundo de Javascript y el resto es historia. Promises es una biblioteca para programación asincrónica que se usa ampliamente en Javascript. Las promesas también son representaciones de primera clase de un valor que puede estar disponible en el futuro, ahora lo que esto significa es un ejemplo.

Ejemplo: supongamos que solicitamos un artículo que está fuera de servicio en un sitio de compras, entonces lo que podemos hacer es seleccionar la opción de recordarme cuando esté disponible si está disponible en el sitio web y salir de ese sitio y tal vez más tarde algunos días después de que podamos obtener un resto, que lo que promete es que promete que obtendremos lo que tenemos una solicitud en algún momento.  

tomemos un programa del mundo real para entender esto

<script>
    let geeksforgeeks = new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("a Portal for Geeks")
 
        }, 2000);
    })
    geeksforgeeks.then((msg) => {
        console.log("GeeksforGeeks is" + msg + " Ofc it is.");
    })
</script>

Producción:

GeeksforGeeks is a Portal for Geeks Ofc it is. 

Existe un concepto de promesas enstringdas a partir del cual se utiliza el método .then(). En términos simples, estos se utilizan para asociar una acción posterior con una promesa que se cumple. También hay otros métodos como promise.catch() y promise.finally() que también devuelven un objeto de promesa recién generado. Puedes leer más sobre esto aquí.

Obtenga más información sobre las promesas en el artículo de GFG aquí .

5. String de plantilla: es simplemente azúcar sintáctico para construir strings. La función de string de plantilla de Javascript es similar a las funciones de interpolación en Python. También permite la expresión incrustada, la creación de strings de varias líneas también es posible con esto.

<script>
 
    // Without template literal
    console.log('Some text that I want \non two lines!');
     
    // With template literal
    console.log(`Some text that I wanton two lines!`);
</script>

Producción:

Some text that I want
on two lines!
Some text that I want
on two lines!

Obtenga más información al respecto aquí

6. Desestructuración: si tiene conocimiento de Reactjs, entonces puede saber la importancia de la desestructuración, así que comprendamos qué es realmente. La desestructuración permite la vinculación mediante la coincidencia de patrones con soporte para la coincidencia de arrays y objetos. O en términos simples, es una expresión de javascript que descomprime valores de arrays o incluso de objetos en distintas variables.

<script>
    // Array destructuring
    let a, b, rest;
    [a, b, ...rest] = ['g', 'e', 'e', 'k', 's'];
 
    console.log(a, b, rest);
 
    // Object destructuring
    const geeks = {
        name: "maestro",
        logged_in: true
 
    };
    const { name, logged_in } = geeks;
 
    console.log(name, "is logged in?", logged_in);
</script>

Producción:

g e ["e", "k", "s"]
maestro is logged in? true

Obtenga más información al respecto consultando el artículo de GFG aquí

7. REST y SPREAD: El parámetro rest permite que una función acepte un número indefinido de argumentos como una array. Spread permite que un iterable, como una array o strings, se expanda en lugares donde cero o más argumentos, también hay opciones para usar la expresión de objeto para expandirse en lugares donde se esperan cero o más pares clave-valor.

<script>
 
    // REST concept
    function fun(a, ...b) {
        return a * b.length
    }
 
    fun(3, "GeeksforGeeks", "hello")
    console.log("Function fun output:",
        fun(3, "GeeksForGeeks", "hello"));
 
    // Spread concept
    function a(x, y, z) {
        return x * y * z;
    }
 
    console.log("Output for function a:",
        a(...[10, 20, 30]));
</script>

Producción:

Function fun output: 6
Output for function a: 6000

Conoce más sobre REST y difunde aquí .

8: let + const: la instrucción Let declara variables locales con ámbito bloqueado, a diferencia de la palabra clave var, que cuando se usa declara una variable global o localmente para una función completa, independientemente del ámbito del bloque. Mientras que, por otro lado, la declaración const crea una referencia de solo lectura a una variable definida. El identificador de variable no se puede reasignar.

<script>
 
    let gfg;
 
    const maestro = "coder";
 
    // Reassigning the above variable
    // will give out an error
 
    // maestro = "developer";  (ERROR)
    gfg = "javascript"; // (VALID)
 
    // Declaring again will not give
    // out an error in case with let
 
    // let gfg = "python";
 
    console.log(gfg, maestro);
</script>

Producción:

javascript coder

Obtenga más información sobre let y const aquí .

9. Mapa, conjunto, conjunto débil y mapa débil: el objeto Mapa contiene el par clave-valor y tiene en cuenta el orden de inserción original de las claves.

<script>
    let lang = new Map();
 
    // .set() method is used to store data in the map
 
    lang.set("python", { type: "interpreted lang" })
 
    lang.get("python") // Returns python type
</script>

Producción:

{type: "interpreted lang"}

Establecer objetos almacena valores únicos (al igual que establecer en matemáticas) de cualquier tipo. Contiene una colección de valores y es posible iterar a través de los elementos de un conjunto en el orden en el momento de la inserción.

<script>
    let newSet = new Set();
 
    // Add values into the set
    newSet.add("geeksforgeeks");
    newSet.add("coder");
 
    // Checks for existence of values in the set
    console.log(newSet.has("coder"));
 
    console.log(newSet);
</script>

Producción:

true
{"geeksforgeeks", "coder"}

débilSet y débilMapa: El objeto débilmapa es una colección (clave, valor) de pares, y en este caso de débilmapa las claves están débilmente referenciadas, las claves en débilmapa son del tipo de objeto. 

Los objetos débiles nos permiten almacenar objetos débiles en la colección. Al igual que el mapa débil, también es una colección de objetos, la diferencia radica en que débil es la única colección de objetos y débil es débil, lo que significa que la referencia a un objeto se mantiene débil y, por lo tanto, si no hay referencia a un el objeto almacenado en un conjunto débil existe, entonces esos objetos pueden ser recolectados como basura por el recolector de basura.

<script>
    let s = new Set()
 
    s.add({ course: "Complete placement guide" });
    console.log(s);
 
    const course = { course: "python fundamentals" };
 
    // weakmap
    var gfg = new WeakMap();
    gfg.set(s, course);
 
 
    // waekset
    var coder = new WeakSet();
    coder.add(course);
 
    console.log(gfg, coder);
</script>

Producción:

WeakMap{Set(1) => {
    key: {Set{...}}
    value: {course: "python fundamentals"}
}}
WeakSet{{
    0: 
    value: {course: "python fundamentals"}
}}

Todo sobre los temas anteriores se puede aprender aquí

10. Símbolos: Esto da paso al control de acceso para un estado de objeto. también permite que las propiedades se introduzcan con cualquier string. Es un tipo de dato primitivo y para crear un nuevo símbolo primitivo podemos usar el siguiente código:

<script>
    let mySymbol1 = Symbol()
 
    // Optional string description can also be given
    let mySymbol2 = Symbol("GeeksforGeeks");
 
    console.log(mySymbol1 === mySymbol2);
</script>

Producción:

false

NOTA: no se requiere una nueva palabra clave al crear Symbol()