[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

Características introducidas en ES6 Javascript

ES6 Javascript, también conocido como ECMAScript 6, es la sexta versión principal del lenguaje de programación JavaScript. Algunas de las nuevas características introducidas en ES6 incluyen:

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

1. Funciones de flecha

Una sintaxis abreviada para crear funciones anónimas. Ejemplo:

// ES5
var add = function(a, b) {
return a + b;
};

// ES6
let add = (a, b) => a + b;

2. Literales de plantilla

Una forma de crear cadenas con expresiones incrustadas. Ejemplo:

let name = "John";
console.log(`Hello, ${name}!`); // Output: "Hello, John!"

3. Desestructuración

Una forma de extraer valores de matrices u objetos y asignarlos a variables. Ejemplo:

// Array destructuring
let numbers = [1, 2, 3];
let [a, b, c] = numbers;
console.log(a, b, c); // Output: 1 2 3

// Object destructuring
let person = { name: "John", age: 30 };
let { name, age } = person;
console.log(name, age); // Output: "John" 30

4. Clases

Una forma de crear clases orientadas a objetos con constructores y métodos. Ejemplo:

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}let john = new Person("John", 30);
john.sayHello(); // Output: "Hello, my name is John and I'm 30 years old."

5. Módulos

Una forma de organizar y reutilizar el código dividiéndolo en varios archivos y exportando/importando valores. Ejemplo:

// In file "math.js"
export function add(a, b) {
return a + b;
}

// In file "main.js"
import { add } from "./math.js";
console.log(add(1, 2)); // Output: 3

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

let y const. let es similar a var en que declara una variable a la que se le puede reasignar un nuevo valor, mientras que const declara una variable que no se puede reasignar. Ejemplo:

// ES5
var name = "John";
name = "Jane";

// ES6
let name = "John";
name = "Jane";const age = 30;
age = 25; // will throw an error because age is a const variable

7. Mejora de objeto literal

ES6 introduce una forma abreviada de valor de propiedad cuando las claves y los nombres de variables son los mismos.

// ES5
let name = "John";
let age = 30;
let person = { name: name, age: age };

// ES6
let name = "John";
let age = 30;
let person = { name, age };

8. Símbolo

Los símbolos son un nuevo tipo primitivo en JavaScript, que son únicos e inmutables. Son útiles para crear propiedades de objetos que no deberían ser enumerables o para proporcionar una propiedad privada para un objeto.

const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2); // false

9. Iteradores

Los iteradores son una característica nueva en ES6 que le permite definir una secuencia de valores que se pueden iterar. Cada iterador es un objeto que implementa el método next(), que devuelve un objeto con dos propiedades: value y done.

let numbers = [1, 2, 3];
let iterator = numbers[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

10. Generadores

Los generadores son una característica nueva en ES6 que le permite crear iteradores con una sintaxis más simple. Se definen usando la sintaxis de function* y usan la palabra clave yield para controlar los valores que devuelve el iterador.

function* numbers() {
yield 1;
yield 2;
yield 3;
}

let iterator = numbers();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

11. Mapa y conjunto

El Map y Set son objetos nuevos introducidos en ES6, que son similares a los objetos y matrices, pero brindan algunas funciones adicionales. Los mapas son una forma de almacenar pares clave-valor, mientras que los conjuntos son una forma de almacenar valores únicos.

let map = new Map();
map.set("name", "John");
map.set("age", 30);
console.log(map.get("name")); // "John"
console.log(map.get("age")); // 30

let set = new Set();
set.add(1);
set.add(2); 
set.add(3); 
set.add(3); // Duplicate value will be ignored console.log(set.size); // 3 
console.log(set.has(2)); // true set.delete(2); console.log(set.has(2)); // false

Gracias por llegar hasta aquí, si encuentras esto útil no olvides dejar un👍🏼y suscribirse para recibir más contenido.

Si le interesa, puede echar un vistazo a algunos de los otros artículos que he escrito recientemente sobre Node.js y AWS Lambda:

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

ES6 Javascript: Características introducidas