JavaScript ECMAScript 6 - 12 Características Resaltantes

lunes, abril 02, 2018
Banner JavaScript

Esta entrada está dedicada a aquellas personas que ya han trabajado con anteriores versiones de JavaScript, pero no se han actualizado acerca de las características que trajo consigo JavaScript ECMAScript 6, también conocido como JavaScript ECMAScript 2015.

Estaré resumiendo algunas de las características más resaltantes, como un inicio para conocer JavaScript ECMAScript 6.



Sin más, comencemos:

1. Declaración de Constantes.

Es posible declarar valores constantes con Const que no varíen a la largo de la ejecución de nuestros programas. Se acostumbra como buena práctica escribir en mayúsculas los nombres de las constantes, aunque no es algo obligatorio:

const PI = 3.1416;

2. Declaración de Variables con "Let".

La declaración de variables con Let, complementa la antigua declaración mediante Var. La diferencia radica en que las variables declaradas con Let tienen vida solo en el bloque en el cual han sido declaradas:

//Declaración Tradicional con "Var"
var valorVar = 1;
if(true){
    var valorVar = 2;
    console.log(valorVar); //Imprime: 2
}
console.log(valorVar); //Imprime: 2

//Declaración con "Let"
let valorLet = 1;
if(true){
    let valorLet = 2;
    console.log(valorLet); //Imprime: 2
}
console.log(valorLet); //Imprime: 1

3. Interpolación de Cadenas.

Con la interpolación de cadenas usando el símbolo "`" (acento grave) para encerrar la cadena y la expresión "${x}" (dolar, llave inicio, llave fin) para delimitar las variables, se puede intercalar texto y variables sin tener que concatenarlas de la forma tradicional con el carácter "+". Lo cual lo hace mucho más practico:

let pelicula = "Avengers: Infinity War"
let estreno = "2018";

let texto = `En ${estreno} es el estreno de la película ${pelicula}`;

console.log(texto); //Imprime: En 2018 es el estreno de la película Avengers: Infinity War

4. Mapas de Clave/Valor.

Los mapas Map permiten definir una colección de elementos Clave/Valor:

let movil = new Map();

movil.set('marca','Nokia');
movil.set('modelo','Nokia 8');
movil.set('memoria','4 GB');

console.log(movil); //Imprime: Map(3) {"marca" => "Nokia", "modelo" => "Nokia 8", "memoria" => "4 GB"}

//Obtener un valor
console.log(movil.get('marca')); //Imprime: Nokia

//Borrar un valor
console.log(movil.delete('memoria')); //Imprime: true

//Comprobar si existe un valor
console.log(movil.has('memoria')); //Imprime: false

console.log(movil); //Imprime: Map(2) {"marca" => "Nokia", "modelo" => "Nokia 8"}

5. Conjuntos de Valores.

Los conjuntos Set permiten definir una colección de elementos con un Valor:

let colores = new Set();

colores.add('Azul');
colores.add('Amarillo');
colores.add('Verde');
colores.add('Rojo');

console.log(colores); //Imprime: Set(4) {"Azul", "Amarillo", "Verde", "Rojo"}

//Obtener la cantidad de elementos
console.log(colores.size); //Imprime: 4

//Borrar un valor
console.log(colores.delete('Azul')); //Imprime: true

//Comprobar si existe un valor
console.log(colores.has('Azul')); //Imprime: false

console.log(colores); //Imprime: Set(3) {"Amarillo", "Verde", "Rojo"}

6. Iteración con "For of".

La sentencia For of nos permite iterar sobre elementos de objetos iterables como son los arreglos:

let vocales = ['a','e','i','o','u'];

for(let vocal of vocales){
    console.log(vocal);
}
//Imprime:
//a
//e
//i
//o
//u

7. Generadores de Valores.

Los generadores permiten construir una secuencia personalizada de valores que sean retornados por la expresión yield:

function* secuencia(){
    var i = 1;
    while(true){
        yield i++;
    }
}

let sec = secuencia();

//Obtener próximo valor con next()
console.log(sec.next().value); //Imprime: 1
console.log(sec.next().value); //Imprime: 2
console.log(sec.next().value); //Imprime: 3

8. Funciones con Parámetros por Defecto.

Permite establecer valores por defecto a los parámetros, si no se especifica ninguno en la llamada:

function multiplicar(a = 1, b = 1){
    return a*b;
}

console.log(multiplicar()); //Imprime: 1
console.log(multiplicar(5,10)); //Imprime: 50

9. Funciones con Parámetros Agrupados (Rest).

Permiten representar un número indefinido de argumentos como un arreglo:

function verAnimales (...animales){
    console.log(animales);
}

verAnimales("Perro","Gato","Elefante"); //Imprime: (3) ["Perro", "Gato", "Elefante"]

10. Propagación de Parámetros en Funciones (Spread).

Permite enlazar un solo elemento a una función que solicita múltiples argumentos:

function verPais (pais,continente,capital){
    console.log(`${pais}, ${continente}, ${capital}`); 
}

let pais = ["Venezuela","América","Caracas"];

verPais(...pais); //Imprime: Venezuela, América, Caracas

11. Declaración de Funciones Flecha (Arrow).

Es una sintaxis más corta para la declaración de una función:

let sumar = (x,y) => x+y;

console.log(sumar(70,7)); //Imprime: 77

12. Definición de Clases (Programación Orientada a Objetos).

Permite la programación orientada a objetos, incluyendo clases, herencia, polimorfismo, etc:

class Automovil{
    constructor(marca, modelo){
        this.marca = marca;
        this.modelo = modelo;
    }

    getMarca(){
        return this.marca;
    }

    setMarca(marca){
        this.marca = marca;
    }

    getModelo(){
        return this.annio;
    }

    setModelo(modelo){
        this.modelo = modelo;
    }
}

let auto = new Automovil("Tesla","");

auto.setModelo("Model X");

console.log(auto); //Imprime: Automovil {marca: "Tesla", modelo: "Model X"}

Referencias Consultadas:

También te puede interesar

Cuando navego por los sitios web, mi parte favorita es leer los comentarios. Es por eso que tus comentarios son un complemento valioso para mis entradas. Cualquier duda o aporte no dejes de escribirlo, en breve lo estaré publicando. ¡Gracias!


0 comentarios

Lo más reciente

¡Bendiciones para mi Venezuela!

¡Bendiciones para mi Venezuela!