ES6

Clase 31 de 99 • 30 días de JavaScript

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 5 - Checkpoint

20
Playground - encuentra el palindromo más grande

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 15 - Checkpoint

50
Playground - Sistema de reservaciones de un hotel

Día 16

Día 17

Día 18

Día 19

Día 20 - Checkpoint

65
Playground - Agenda de vuelos

Día 21

Día 22

Día 23

Día 24 - Checkpoint

77
Playground - Crea un task manager con patrones de diseño

Día 25

Día 26

Día 27

Día 28

Día 29

Día 30

93
¡Lo lograste!
01:41 min

Live Class

Tomar examen

ECMAScript 6, también conocido como ES6, fue lanzado en junio de 2015 y trae una gran cantidad de características nuevas y mejoras al lenguaje. Algunas de las características más importantes incluyen:

Sintaxis de clases: ES6 introduce una nueva sintaxis para la creación de clases en JavaScript. Esto hace que el código sea más fácil de leer y entender, especialmente para desarrolladores con experiencia en lenguajes orientados a objetos. Ejemplo:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
}
const persona = new Persona("Juan", 30);
persona.saludar(); // Output: "Hola, mi nombre es Juan y tengo 30 años."

Template literals: ES6 introduce una nueva sintaxis para crear cadenas de texto de manera más sencilla y legible. Esto permite la interpolación de variables y expresiones dentro de las cadenas de texto. Ejemplo:

const nombre = "Juan";
const edad = 30;
console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años.`); // Output: "Hola, mi nombre es Juan y tengo 30 años."

Arrow functions: ES6 introduce una nueva sintaxis para crear funciones anónimas de manera más corta y sencilla. Esto hace que el código sea más legible y fácil de escribir. Ejemplo:

const numeros = [1, 2, 3, 4, 5];
const dobles = numeros.map(n => n * 2);
console.log(dobles); // Output: [2, 4, 6, 8, 10]

Spread operator: El spread operator es una característica que permite expandir un array o un objeto en una lista de valores. Se representa con los tres puntos (...) y se utiliza para copiar elementos de un array o para combinar elementos de varios arrays en uno solo. También se utiliza para pasar argumentos a una función de manera dinámica. Ejemplo:

const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

Destructuring: ES6 introduce una nueva sintaxis para asignar valores de un objeto o un array a variables de manera más sencilla y legible. Ejemplo:

const persona = {nombre: "Juan", edad: 30};
const {nombre, edad} = persona;
console.log(nombre); // Output: "Juan"
console.log(edad); // Output: 30

Manejo de módulos: ES6 permite la importación y exportación de funciones y variables entre archivos de manera más sencilla y estructurada. Por ejemplo:

import { miFuncion } from './miArchivo.js';

export const otraFuncion = () => {};

Nuevos métodos de arrays: ES6 incluye métodos como "Array.prototype.find" y "Array.prototype.findIndex" que facilitan la búsqueda de elementos en un array.

const numeros = [1, 2, 3, 4, 5];
const encontrado = numeros.find(n => n === 3);
console.log(encontrado); // Output: 3

Manejo de promesas: ES6 incluye mejoras en el manejo de promesas, permitiendo la utilización de métodos como "Promise.prototype.finally" para ejecutar código independientemente del resultado de la promesa.

const miPromesa = new Promise((resolve, reject) => {
  // código
});
miPromesa.finally(() => console.log('Promesa finalizada'));

Try catch: En cuanto al manejo de errores y excepciones, ES6 incluye la introducción de la palabra clave "try-catch" para el manejo de bloques de código que pueden generar excepciones.

try {
  // código que puede generar excepciones
} catch (error) {
  console.log(error);
}

Todo esto y más lo puedes aprender en el curso Curso de ECMAScript: Historia y Versiones de JavaScript

Comentarios

Luis Gomero

student•

Creo que hay un pequenio error. Promise.prototype.finally son parte de ES9

Duvan Alexis Palomino Ramirez

student•

concuerdo contigo

Sergio Medina

student•

¡Qué duros para saber eso! Yo ni idea de los ES+ posteriores al 6 jaja

Luis Castro

student•

ES6: mejoras más importantes

. ES6, también conocido como ECMAScript 2015, es una versión relevante de JavaScript que fue lanzada en junio de 2015. Es la primera actualización significativa del lenguaje en varios años, y trae consigo una gran cantidad de mejoras y nuevas características. . Entre las mejoras más importantes de ES6 se encuentran: .

Declaración de variables mejorada: Con ES6, se introdujeron dos nuevas formas de declarar variables: "let" y "const". Esto permite un mejor control del alcance de las variables y ayuda a prevenir errores comunes en JavaScript. .
Arrow functions: Las funciones de flecha, o arrow functions, son una forma más corta y legible de escribir funciones en JavaScript. Son especialmente útiles cuando se trabaja con arrays y objetos. .
Template literals: Los template literals son una forma más fácil y legible de crear cadenas de texto. Permiten la interpolación de variables y expresiones dentro de cadenas de texto, lo que hace que el código sea más limpio y fácil de entender. .
Promesas: Las promesas son una forma de manejar tareas asíncronas en JavaScript. Con ES6, se introdujeron las promesas nativas en el lenguaje, lo que hace que sea más fácil trabajar con operaciones asíncronas. .
Módulos: ES6 introduce un nuevo sistema de módulos que permite a los desarrolladores dividir su código en pequeñas piezas reutilizables. Esto hace que sea más fácil de mantener y de trabajar en proyectos más grandes.

Reinaldo Mendoza

student•

Dado que los objetos en JS son referencias a espacios en memoria, que se halla incluido el spread operator es muy importante para evitar side effects

Federico Guillermo Moreira Tejera

student•

Las funciones anónimas en JavaScript son aquellas que no han sido declaradas con un nombre. En este lenguaje de programación, podemos declarar este tipo de elemento usando cualquiera de los modos de escribir funciones.

Carlos Andrade

student•

31/89 ES6 ES6 trae una fran cantidad de características nuevas y mejoras al lenguaje JavaScript incluyendo:

Parametros por defecto: ES6 permite la asignación de valores por defecto a los parámetros de una función

function suma(a, b = 0) {
  return a + b;
}
suma(2); // Output: 2
suma(2, 3); // Output: 5

Object literal shortland: ES6 introduce una nueva sintaxis para crear objetos literales de manera más sencillas y legible

const nombre = "Juan";
const edad = 30;
const persona = { nombre, edad };
console.log(persona); // Output: { nombre: "Juan", edad: 30 }

Promises: ES6 incluye una nueva forma de manejar operaciones asíncronas mediante la utilización de promesas

function miFuncion() {
  return new Promise((resolve, reject) => {
    // código asíncrono
    if (error) {
      reject(error);
    } else {
      resolve(resultado);
    }
  });
}
miFuncion().then(resultado => console.log(resultado)).catch
(error => console.log(error));

Móduloes dinámicos: Es6 permite la carga dinámica de módulo mediante la utilización del método ìmport()`

import('./miArchivo.js').then(miModulo => {
  miModulo.miFuncion();
}).catch(error => console.log(error));

Rest parameters: ES6 introduce la sintaxix ‘…’ para permitir la captura de argumentos restantes en una función en un array

function suma(...numeros) {
  return numeros.reduce((acumulado, numero) => acumulado + numero, 0);
}
console.log(suma(1, 2, 3, 4, 5)); // Output: 15

Rubén Ernesto Aragón Gil

student•

Mi ejemplo

class DragonBall {
	constructor(personaje, ki) {
	this.personaje = personaje;
	this.ki = ki;
	}
	saludar() {
		console.log(`Yo soy ${this.personaje} y mi poder es ${this.ki}`);	
	}
}
const persona = new DragonBall("Goku", 300000000000000000000000000000000000);;
persona.saludar();

Ricardo Alfonso Chavez Vilcapoma

student•

Además del spread operator, se añadió otra función con los tres puntos (...) llamada rest operator.

Dejo un ejemplo:

/*-----------------------Operador de propagación (...)-----------------------*/

let person = { name: "Alexa", age: 24 };
let country = "COL";
//let data = [...person, country ]; //error por ser array. Solo se pueden copiar de array a arrays y objects a objects
let data = {...person, country }; //... permite que se copien los elementos del object person a un nuevo objeto
console.log(data); //{ name: 'Alexa', age: 24, country: 'COL' } Adiciona en su contenido el contenido del object person y el valor de country (en este caso se guarda como una propiedad-valor)

let pares = [2,4,6,8,10]; //para arrays también sirve
let copyPar = [...pares];
let paresVeinte = [...pares,12,14,16,18,20];
console.log(copyPar); //[ 2, 4, 6, 8, 10 ]
console.log(paresVeinte); //[2,  4,  6,  8, 10, 12, 14, 16, 18, 20]

/*-----------------------Parámetro rest (resto)-----------------------*/

const array = [1,2,3,4,5];

function hola (primero, segundo, ...resto) { // Parámetro Rest (... + nombre de variable que almacenará el array). A diferencia del spread operator, este siempre va al final y guarda el resto de elementos que se pasen como argumento a la función en un array
    console.log(primero, segundo)  // 1 2
    console.log(resto) // [3,4,5, "final"]
}

hola(...array, "final") //<- Operador de propagación (pasa como argumentos 1,2,3,4,5)
//Lo mismo que hacer -> hola(1,2,3,4,5, "final")

//También sirve para obtener los elementos restantes de un array u objeto usando desestructuración

const objeto = {
    nombre: "Andres",
    age: 23,
    plataforma: "Platzi"
}
const arrayNumber = [0,1,2,3,4,5]

const {plataforma, ...usuario} = objeto;
const [cero, ...positivos] = arrayNumber;

console.log(usuario); // { nombre: 'Andres', age: 23 }
console.log(positivos); // [ 1, 2, 3, 4, 5 ]

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
}
const persona = new Persona("Juan", 30);
persona.saludar(); // Output: "Hola, mi nombre es Juan y tengo 30 años."

function miFuncion() {
  return new Promise((resolve, reject) => {
    // código asíncrono
    if (error) {
      reject(error);
    } else {
      resolve(resultado);
    }
  });
}
miFuncion().then(resultado => console.log(resultado)).catch
(error => console.log(error));

class DragonBall {
	constructor(personaje, ki) {
	this.personaje = personaje;
	this.ki = ki;
	}
	saludar() {
		console.log(`Yo soy ${this.personaje} y mi poder es ${this.ki}`);	
	}
}
const persona = new DragonBall("Goku", 300000000000000000000000000000000000);;
persona.saludar();

/*-----------------------Operador de propagación (...)-----------------------*/

let person = { name: "Alexa", age: 24 };
let country = "COL";
//let data = [...person, country ]; //error por ser array. Solo se pueden copiar de array a arrays y objects a objects
let data = {...person, country }; //... permite que se copien los elementos del object person a un nuevo objeto
console.log(data); //{ name: 'Alexa', age: 24, country: 'COL' } Adiciona en su contenido el contenido del object person y el valor de country (en este caso se guarda como una propiedad-valor)

let pares = [2,4,6,8,10]; //para arrays también sirve
let copyPar = [...pares];
let paresVeinte = [...pares,12,14,16,18,20];
console.log(copyPar); //[ 2, 4, 6, 8, 10 ]
console.log(paresVeinte); //[2,  4,  6,  8, 10, 12, 14, 16, 18, 20]

/*-----------------------Parámetro rest (resto)-----------------------*/

const array = [1,2,3,4,5];

function hola (primero, segundo, ...resto) { // Parámetro Rest (... + nombre de variable que almacenará el array). A diferencia del spread operator, este siempre va al final y guarda el resto de elementos que se pasen como argumento a la función en un array
    console.log(primero, segundo)  // 1 2
    console.log(resto) // [3,4,5, "final"]
}

hola(...array, "final") //<- Operador de propagación (pasa como argumentos 1,2,3,4,5)
//Lo mismo que hacer -> hola(1,2,3,4,5, "final")

//También sirve para obtener los elementos restantes de un array u objeto usando desestructuración

const objeto = {
    nombre: "Andres",
    age: 23,
    plataforma: "Platzi"
}
const arrayNumber = [0,1,2,3,4,5]

const {plataforma, ...usuario} = objeto;
const [cero, ...positivos] = arrayNumber;

console.log(usuario); // { nombre: 'Andres', age: 23 }
console.log(positivos); // [ 1, 2, 3, 4, 5 ]

ES6

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios