Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

LET y CONST, Multilínea, Spread Operator y Desestructuración

3/14
Recursos

Aportes 297

Preguntas 41

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola. Procedo a dejar mis apuntes, un tanto largos pero podrían serle útiles a alguien 😃

Mis apuntes de la clase, los publicare todos en mi tw ordenaditos una vez culmine el curso, puedes buscarlos alli si gustas @juanbocode

Con respecto al spread operator, si tenemos arreglos con valores duplicados como:

let team1 = ['oscar', 'andres', 'ricardo']
let team2 = ['andres', 'yesica', 'camila']

*Notese que team1 y tem2 contienen a “andres”.

Y si creamos un nuevo arreglo de la siguiente forma:

let education = ['Carolina', ...team1, ...team2]

Obtendremos un arreglo con el valor “andres” duplicado.

Así que 👀
Una forma de quitar estos duplicados es con Set.

let education2 = [...new Set(['Carolina', ...team1, ...team2])]

Y con esto logramos tener un arreglo sin duplicados

Var: tiene un Scope de función
Let y Const: tienen un Scope de bloque

Les recomiendo mucho el curso de Scope y Closures

Desestructuración:
.

.
Spread Operator:
https://www.instagram.com/p/BqsNZounx9G/
.
Más imágenes:
https://github.com/FiliSantillan/Bits#bits

Aprendi demasiado, pero por fin alguien logro explicarme la diferencia entre var y let.
Excelente profesor!

/**
 * Multiline
 */
let lorem =
  'Mollit ea veniam ad magna. Voluptate qui commodo do commodo elit officia. \n' +
  'Sit quis mollit esse quis reprehenderit labore esse nisi.';
console.log('Before ES6 -> ', lorem);

// es6
let loremES6 = `Velit aliqua culpa nisi aute nulla sit.
Reprehenderit deserunt id officia excepteur excepteur
adipisicing ut sit enim dolor laboris nulla exercitation.`;
console.log(`After ES6 -> ${loremES6}`);

/**
 * Destructuring
 */
let person = {
  name: 'Oscar',
  age: '32',
  country: 'MX'
};
console.log('Before ES6 -> ', person.name, person.age, person.country);

// es6
let { name, age, country } = person;
console.log(`After ES6 -> ${name} ${age} ${country}`);

/**
 * Spread Operator
 */
let team1 = ['Oscar', 'Julián', 'Ricardo'];
let team2 = ['Valeria', 'Yeasica', 'Camila'];
let education = ['David', 'Oscar', 'Julián', 'Ricardo', 'Valeria', 'Yeasica', 'Camila'];
console.log('Before ES6 -> ', education);

let educationES6 = ['David', ...team1, ...team2];
console.log(`After ES6 -> ${educationES6}`);

/**
 * Var, Let and Const
 */
{
  var globalVar = 'Global Var';
  let globalLet = 'Global Let';
  const globalConst = 'Global Const';
  console.log(`globalLet -> ${globalLet}`);
  console.log(`globalConst -> ${globalConst}`);
}
console.log(`globalVar -> ${globalVar}`);

RESUMEN:
En el siguiente fragmento de código se comentará lo visto en clase, para ejecutar el plugin Code Runner, puedes usar: ctrl+alt+n

//Forma Normal
let hello= "Hello";
let world="Mundo";
let frase = hello+" "+world;
console.log(frase);

//Template literal es6
let fraseTemplateLiteral = `${hello}${world}`;
console.log(fraseTemplateLiteral);


//Forma normal separaciones de línea.

//Antes para realizar multilíneas se usaba  backslash (alt+92) + n + "" continuar una línea
let Frase ="KANSClnclnsnspan pscapo apso  \n" //Multilíneas
+ "ljsndljnvsjd"

//Con los Template literals `` se puede sencillamente realizar un enter para pasar de línea.
let Frase_es6 = `Lknlasknlncs
dksvñsnkvlksnnldkvsnd`;

console.log(Frase);
console.log(Frase_es6);

// Destructuración de elementos:

//Antes los objetos podía ser creados así:

let person ={
    'name':'Alejandro',
    'nick':'Etrx',
    'num':'12314125'
};

//Si queríamos llamar  lo que componía ese objeto utilizabamos:
console.log(person.name,person.nick,person.num);

//Ahora con la destrucción de elementos, sucede una especie de resumen, donde se extrae un factor común del nombre del objeto, así:
let {name,nick, num} = person;

//Si queremos llamar  lo que compone este objeto utilizamos en ES6:
console.log(name,nick);


//Operador de prolongación: Permite expandir varios elementos. Tenemos varios elementos en arreglos que queremos unir en un solo elemento para presentarlos.

let conjunto1= ['a','b','c'];
let conjunto2= ['x','y','z'];

let conjunto_union=['l','m','n',...conjunto1,...conjunto2]
console.log(conjunto_union);

//Asiganciones mediante let se pueden inicilizar variables  cuyo scope está solo en el bloque de código en el que está llamada, en otras palabras, solo puede existir las variables let dentro de las llaves en que se llaman. Var se seguirá usando para variables globales y locales.
 

{
    var VariableGlobal= "...";
}

{
    let VariableLocal= "***";
    console.log(VariableLocal); // Al estar dentro de las llaves o el bloque de código console se ejecutará con normalidad
}

console.log(VariableGlobal);
console.log(VariableLocal); // Al ejecutar esta arroja error al estar fuera del scope donde fue declarada.



//Const, nos permitirá establecer una variable como una constante, donde el valor declarado no podrá cambiar.

const a = "Soy constante";
a = "No soy constante" ; // Al ejecutar arroja error porque no puede cambiarse una constante luego de declararse.

console.log(a);

Con lorem100 + tab podemos generar un pequeño texto de LoremIpsum en VSCode.

Diferencias entre var, let y const

  • var: es una variable con alcance global
  • let: solo puede ser usada en el bloque donde se declara
  • const: no puede modificarse su valor

En este vídeo explica más sobre la diferencia entre var, let, const por el profesor Sacha de fundamentos de js. En resumen ten en cuenta este orden

Const > Let > Var
Esto quiere decir que cuando declaras una variable trata de usar const. Pero en caso vayas a cambiar su valor más adelante mejor uses let y nunca trates de usar var.

https://www.youtube.com/watch?v=bvkY9ey83yY

He usado Samuel L. Ipsum en vez de Lorem Ipsum

Es importante entender en caso de asignar a una variable const un objeto. Si se puede modificar los valores del objeto pero no reasignar la variable a otro valor.

https://imgur.com/a/a6gETG2

Falto mostrar la concatenación de arrays

const team1 = ['Oscar', 'Julian', 'Ricardo']
const team2 = ['Valeria', 'Yesica', 'Camila']

/* ES5 */
const education1 = ['David'].concat(team1).concat(team2)
/* ES6 */
const education2 = ['David', ...team1, ...team2]```

hasta ahora todo normal, esto tambien lo habia explicado sacha xd

Me acordé de esto que vi hoy en tw.

Ctrl + Alt + N, comando para correr el código seleccionado.

Solucion a tachadura name

La razon por la cual  ocurre eso es porque existen "keywords" o palabras reservadas dentro de JS, como podrian ser Numbre, True, False, etc. Hay muchas. **Que ocurre? **

Cuando usamos estas para declarar variables, el sistema nos arroja una tachadura porque queremos sobreescribir una Keyword que el lenguaje ya tiene reservada para sus funciones programadas. Ahi genera el error. 

Solucion: Coloca otro nombre a la variable y veras que te funcionara, y tratemos de evitar y no utilizar keywords de JS para variables, como "name" por ejemplo.

Espero haber ayudado.

Creo que esto nos puede servir.

function newFunction2(name = 'Oscar', age = 32, country = 'MX') {
  console.log(name, age, country);
}

newFunction2(); // imprime 'Oscar 32 MX'
newFunction2('Ricardo', 23, 'CO'); // imprime 'Ricardo 23 CO'

let hello = 'Hello';
let world = 'World';
let epicPhrase = `${ hello } ${ world }`;

console.log(epicPhrase); // imprime 'Hello World'

let lorem = `Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua.`;

console.log(lorem); // imprime en cuatro líneas

let person = {
  'name': 'oscar',
  'age': 32,
  'country': 'MX'
};
let { name, age, country } = person;

console.log(name, age, country); // imprime oscar 32 MX

let team1 = [ 'Oscar', 'Julian', 'Ricardo' ];
let team2 = [ 'Valeria', 'Yesica', 'Camila' ];
let education = [ 'David', ...team1, team2 ];

console.log(education); // imprime '['David', 'Oscar', 'Julian'... etc etc etc]

{
  let globalLet = 'Global let';
  console.log(globalLet); // imprime 'Global let'
}

console.log(globalLet) // no existe acá afuera

const a = 'b'
a = 'c' // tira error por ser constante
console.log(a) // imprime 'b'```

Muchas gracias.
La diferencia entre var y let, como el tiempo a Michael Jackson, lo dejaste muy claro.

¿Por qué no usar el nombre de variable name en nuestro código de Javascript? o ¿Por qué en nuestro VS Code nos sale name con una línea encima diciendo que está @deprecated?

La propiedad window.name toma y define el nombre del contexto de la ventana de navegación donde estamos. Es decir nameva a ser una variable global/primitiva que no se le podrá asignar un nuevo valor.

Más detalles aquí:

Ejemplos de let que me parecieron útiles:
En bloque if:

var a = 5; 
var b = 10; 
if (a === 5) { 
  let a = 4; // El alcance es dentro del bloque if 
  var b = 1; // El alcance es global 
  console.log(a);  // 4 
  console.log(b);  // 1 
} 
console.log(a); // 5 
console.log(b); // 1

En bucle:

for (let i = 0; i<10; i++) { 
  console.log(i); // 0, 1, 2, 3, 4 ... 9 
} 
console.log(i); // ReferenceError: i is not defined

me gusto mucho la caracteristica de poder usar:
let education = [‘Martin Vizcarra’, …team1, …team2];

Porcierto, podrian decirme como es que se llama esta caracteristica?

Let: Permite cambiar su valor posteriormente pero solo se ejecutara dentro del scope local.
const: No permite cambiar el valor asignado pero tiene un scope global.

Desestructuración

const person = {
    name: 'Walter',
    age: 41,
    country: 'AR'
}
console.log(person.name, person.age)

ES6

const { name, age, country } = person
console.log(name, age, country)

Sí!! ese efecto tan curioso en la fuente del profe de tipo glow se consigue con SynthWave '84, código supersayan en tu editor 😄

También se podría usar esto em el minuto 9:05 :

let education2 = ['Carlos', team1, team2]
console.log(education2.flat());

arr.flat() no es de es6 creo, no estoy seguro, solo se que es experimental y ayuda en muchas cosas xd.

Si quieren saber mas a fondo que hace arr.flar() busquen arr.flat() js y les aparece la documentación oficial Xd

Importante que aún que desesetructuramos el objecto (en name, age, country) no destruimos el objeto. Desestructurar != destruir.

Como puedo configurar el vscode de la forma en que la tiene el profesor? Me gusta el tema de las letras que está utilizando.

para activar el modo de luces(neon) de SynthWave '84. tiene que poner ctrl + chif + p y escribir Synth activate neon

Operación de propagación

const team1 = ['Walter', 'Julian', 'Mariana']
const team2 = ['Jazmin', 'Marcela', 'Elsa']
 
const education = ['David', ...team1, ...team2]

console.log(education)

@Oscar Cómo configuraste el linter para que te formatee onSave aunque no tengas instalado eslint?

Me encanta la idea de que nos enseñe el pasado y el presente con sus cambios!!

Como dato adicional, podemos redefinir el nombre de la variable asociado a la propiedad del objeto si lo deseamos o lo necesitamos ( en algunos casos es posible que la propiedad de un objeto que desestructuremos ya esté declarado como otra variable local.

let person = {
  name: 'Carlos',
  age: 29,
  country: 'CO'
}

// Antes
console.log(person.name);
console.log(person.age);
console.log(person.country);

// Aqui el problema hay un conflicto con la propiedad name y esta variable name
let name = 'Lo que sea';

// Redefiniendo mis variables.
let { name: nombre, age: edad, country : pais} = person;

console.log(nombre);
console.log(edad);
console.log(pais);


// Salida...

Carlos
29
CO
Carlos
29
CO

Const = una constante que no puede cambiar su valor.

let = solo se puede acceder desde su entorno local.

var = variable global, preferiblemente no usarla, para evitar los hoisting

En la programacion siempre hemos podido crear variables que abarquen varias lineas o multilineas, usualmente se hacian de la siguiente forma:

let lorem = "Quiero escribir una frase epica que podamos separar \n"
+ "Otra Frase Epica";

Actualmente con Es6 se hace asi:

let lorem2 = `Otra frase epica 
Ahora es otra frase epica
`;

Tambien tenemos la Desestrecturacion que se aplica al momento de utilizar las variables de los objetos, como por ejemplo llamarlas, que serian de esta forma:

let person = {
    'name':'oscar',
    'age':32,
    'country':'mx'
}
console.log(person.name, person.age);

Ahora con Es6 podemos utilizar:

let { name, age } = person;
console.log(name, age);

El valor de propagacion nos permite expandir de ciertas situaciones varios elementos. Un ejemplo es si tenemos ciertos elementos en arreglos, podremos unir varios elementos en uno solo para poder presentar asi:

let team1 = ['oscar','Julian','Ricardo'];
let team2 = ['Valeria','Yesica','Camila'];

let education = ['David', ...team1, ...team2];
console.log(education);

Esto nos ayuda a no tener que buscar todos los elementos y buscar o recorrer en bucles y saber la cantidad de elementos. Asi podremos agregar todo directamente.

Let es una nueva forma en la que podemos trabajar en nuestras variables. Antes haciamos esto con Var. De esta forma la variable estaba disponible en el scope global. Con let esta dispobible solamente en el Scope o en el bloque de codigo que va a ser llamado. Si queremos mostrar var y usamos

{ var uno = 1; } console.log(uno);

Podremos ver que la variable funcionara aunque no este en el mismo bloque de codigo, cosa que LET no hace. Con let tendria que ser:

{ let uno = 1: console.log(uno);} 

De forma que solo lo podremos llamar dentro del bloque de codigo.

Otro elemento que agregaron es “Const”. Esto lo que quiere decir es que hablamos de una constante, en donde no podremos reasignarle un nuevo valor, tiene el mismo alcance de Scope que un let pero NUNCA PODREMOS CAMBIARLE EL VALOR.

Código de la clase

function newFunction(name, age, country){
    var name = name;
    var age = age;
    var country = country;
    console.log(name,age,country);
}

//es6
function newFunction2(name = "oscar", age = 32, country = "IT"){
    console.log(name, age, country);
}
newFunction2();//si no le paso ningun parametro, me tomara los valore por defecto que le dimos a la función
newFunction2("Ricardo,", 23, "CO");

//Template literals
let hello = "Hello";
let world = "World";
let epicPhrase = `${hello} ${world}`;
console.log(epicPhrase);

//Multilínea en es6
let lorem = `Quiero escribir una frases
epica que queremos separar`;

console.log(lorem);

//Desestructuración en es6
let person = {
    "name": "oscar",
    "age": 32,
    "country": "IT"
}

console.log(person.name, person.age);

let { name, age, country} = person; //Es lo mismo que el console.log de arriba
console.log(name);

//Operador de propagación en es6
let team1 = ["Oscar", "Julian", "Ricardo"];
let team2 = ["Valeria", "Yesica", "Camila"];

let education = ["David", ...team1, ...team2];//Traerme elementos de un array en uno solo

console.log(education);

//let es una nueva forma en como vamos a trabajar
var hola = "hola"//esta disponible de forma global

{
    var global = "Global Var";
}

{
    let globalLet = "Global let";//disponible dentro de su bloque de código
    console.log(globalLet);
}

console.log(global);

const a = "b";
a = "a";
console.log(a);
<code>

Como se llama el tema que esta usando el profesor?

Wooooow lo de desestructuración era algo que hasta el momento me había gusta muchísimo de python. Saber que ya lo puedo usar en JS es genial!! 🔥

Es muy parecido a Python

Me doy cuenta que he estado usando estas caracteristicas y no tenia la nocion de que pertenecen a Es6, gran clase!

Esta clase me pareció genial 😄 Gracias Maestro Oscar.

Veo este curso y pienso que debió ser uno de los primeros de la carrera de Javascript. Se entiende todito

Este man si explica bacano!

Multilínea en los Scripts

Anteriormente para poder declarar una variable multilínea se requería agregar \n al final del string, así como + al inicio del siguiente string, por ejemplo:

let lorem = "Proin sapien tortor, posuere ac dolor ut \n"
+ ", semper sollicitudin orci.";

Con ES6 lo podemos realizar de la siguiente forma:

let lorem2 = `Suspendisse consequat justo enim, 
ut sollicitudin diam posuere eget`;

Como vemos en el extracto anterior, ya no es requerido utilizar el \n al final del string, así como + al inicio del siguiente string.

⚠️ Importante: Recuerda usar la comilla francesa ```` en caso del ejemplo con ES6

Desestructuración de Elementos

Mediante la Desestructuración de Elementos, podemos extraer valores de un objeto y asignarlos a variables independientes, primero veamos un ejemplo de como se realizaba anteriormente:

let person= {
    'name': 'Kevin',
    'age': 27,
    'country': 'VE'
}
console.log(person.name,person.age);

Ahora mediante la desestructuración lo haríamos de la siguiente forma:

let {name, age, country} = person;
console.log(name,age,country);

De esta manera se hace mas amigable, extraer la información del objeto.

Spread Operator

El operador de propagación nos permite que los elementos de un array se expandan y, de esta manera, podemos añadir un array dentro de otro sin que el resultado sean arrays anidados, si no un único array al que se han añadido nuevos valores, mediante el operador ... .

let team1 = ['Oscar', 'Julian', 'Ricardo'];
let team2 = ['Valeria', 'Yesica', 'Camila'];
let education = ['David',...team1,...team2];

console.log(education);

Let y Const

A partir de ES6 hay 3 maneras de declarar una variable:

  • CONST: Es una constante la cual NO cambiara su valor en ningún momento en el futuro.
  • VAR: Es una variable que SI puede cambiar su valor y su scope es local.
  • LET: Es una variable que también podrá cambiar su valor, pero solo vivirá(Funcionara) en el bloque donde fue declarada.

⚠️ Importante: Se aconseja utilizar let en lugar de var como buena practicas.

El Curso de Javascript Basico enseña muy bien todos estos conceptos 😃 https://platzi.com/clases/basico-javascript/

Algo que me gusta mucho de la destructuración, es que te permite cambiar el nombre del atributo, si es que te resulta más conveniente otro. Solo se usa el :

let person = {
  'name': 'oscar',
  'age': 32,
  'country': 'MX'
}

console.log(person.name, person.age);

// aquí el atributo name de person se cambia por nombre. 
//y el objeto literal person no se modifica

let { name: nombre , age, country } = person;
console.log(nombre,  age, country);

Otra diferencia de let y var es que si tu llamas a una variable con un nombre ya existente, en el caso de let te arroja un error, en var no lo hace.

var recallable = 1

var recallable = 2

// Corre sin problemas

// ES6

let notRe = 2

let notRe = 4

// SyntaxError: Identifier 'notRe' has already been declared

Desestructuración

Para poner \n y hacer el salto de línea, hay que apretar alt + 92. Ese es el código ascii de .

Para hacer el \ es en windows con
alt + 92

Nunca sobra agregar esta explicación del gran Sachita VAR, LET o CONST: ¿CUÁL DEBERÍA USAR? | JS en Español

Hola Comunidad.
.
Para complementar el concepto que dio el profesor sobre desestructuración quería compartir que su uso no solo sirve para recibir valores de un objeto para luego procesarlos (en este caso imprimirlos) sino que también permite pasar valores por defecto a las claves que aún no hayan sido definidas, por ejemplo:

let automovil = {
	anio: 1995,
	marca: 'Mazda',
	modelo: 'Forza'
}

let {anio, marca, modelo, precio = 10000} = automovil
console.log(`Vendo auto de marca ${marca} y modelo ${modelo} del año ${anio}. Lo vendo en ${precio} dolares.`)

El output arrojado debería ser así:

Vendo auto de marca Mazda y modelo Forza del año 1995. Lo vendo en 10000 dolares.

Más información sobre esto en la documentación.

¡Saludos!

Hola, este es mi codigo,
Pero en el console.log de ES6 en name me sale en rojo y subrayado, el error que marca es depracated

//Desestructuración de elementos
    //Antes
let person = {
    'name': Rodrigo,
    'age': 26,
    'country': 'Mx'
}
console.log(person.name, person.age);

    //ES6
let { name, age } = person;
console.log(name, age); //mensaje de depracated en "name" y subrayado y color rojo

Alguien sabe porque o cual es el error?

VAR vs LET vs CONST
Cuando no se utiliza una palabra clave, la variable se asignará al objeto global que es el  **window** si estamos en un navegador. Hay tres palabras clave en JavaScript que puede usar para declaraciones de variables. Estos son:

var Este es el valor predeterminado: crea una variable de ámbito de función que se puede reasignar o volver a declarar más adelante.

let Esto se introdujo en ES6 y es la forma preferida sobre el uso  **var**. Crea una variable de ámbito de bloque que se puede reasignar pero no se puede volver a declarar.

const Se introdujo en ES6 junto con  **let**. También crea una variable de ámbito de bloque, pero no se puede reasignar ni volver a declarar. **const** debe usarse cuando no desee reasignar un valor más adelante.

También es bueno mencionar que todas las declaraciones se elevarán al tope de su alcance.

Un pequeño aporte de mis apuntes.

Notas de la clase

Pequeño resumen de Var, Let y Const

Los strings multilinea fueron lo mejor del mundo, sobre todo cuando tenías que crear templates HTML desde JavaScript…

Otra cosa importante el que el spread operator suele ser muy utilizado en Frameworks como Vue ^^

Y por favor, siempre usen let y const, ya no usen var xD

Es importante recalcar que para que la desestructuración funcione con los objetos, la variable debe llamarse igual al atributo del objeto. Es decir que si por ejemplo, para el caso del ejemplo de clase nosotros hubiésemos colocado:

let {nombre, edad, pais} = person;

Marcaría undefined

let trabaja muy parecido a var. La más notable diferencia es que el alcance de una variable var es la función contenedora.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const

Var y let.
Var se usa como variable para el contexto global y let se usa como variable dentro de un contexto local.

{
    var globalVar = 'Global var'
}

{
    let globalLet = 'Global let'
    console.log(globalLet)
}

console.log(globalVar)
//console.log(globalLet)

En un hilo de stack-overflow decía que se debía usar el usa de la palabra name a nivel global por lo que es una palabra reservada de js (puedes ver la lista de palabras reservadas aquí )

Yo usé esa palabra y vs code me la tachó y la descripción del error me decía:

'name' is deprecated.ts(6385)
lib.dom.d.ts(19619, 5): The declaration was marked as deprecated here.
<h3>Hola Comunidad.</h3>

aqui les dejo un post sobre las diferencias entre var, let y const

Diferencias entre las variables. *Imagen de la web de Fili Santillán.

let es para trabajar con el scope

me gusta mucho tu perilla 😃

Code Runner que buena herramienta, gracias.

Maravillosa explicación.
Se complementa con el texto: https://platzi.com/blog/la-diferencia-entre-let-y-var/

Por fin encontré la explicación de var y let, con esto estoy clarisimo.

Todo string que este dentro de las comillas francesas puede ser multilinea.

const: para definir constantes donde no podemos redefinir su valor.

const a = 'b'
a = 'a' //ERROR

let: para definir variables disponibles sólo en el bloque donde han sido definidas

{
    var globalVar = 'Global Var'
}

{
    let globalLet = 'Global Let'
    console.log(globalLet)
}

console.log(globalVar)
console.log(globalLet) //ERROR

Entendí mucho más fácil acá que en otros cursos! Excelente

//multilínea
const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n"
+ "otra frase epica que necesitamos."

//es6
const lorem2 = `otra frase epica que necesitamos
ahora es otra frase epica
`
console.log(lorem)
console.log(lorem2)

otro uso del operador de propagación es por ejemplo pasarlo como parámetros a una función.

let team1 = ['jose','pedro'];
let persons = ['invitado', ...team1]; // creamos un nuevo arreglo a partir de otros dos arreglos
/* console.log(persons); */
function propagacion(nameA, nameB, nameC){

    console.log(nameA,nameB,nameC);
}

propagacion(...persons);

Hola oscar!
Vengo a hacerte una consulta, que highlight usas para visual studio?? Porque sinceramente me encanta y también quiero poder utilizarlo!!

Operador de propagación:

 let team1 = ['oscar','julian', 'ricardo']
 let team2 = ['valeria', 'yesica', 'camila']

 let education = ['david', ...team1, ...team2]```

//Var es varibale global
//Let solo permite a la variable en el scope donde se delcaro
//const pues es una constante, no cambia su valor

Desestructuración

Otro de los usos del Spread Operator se puede observar al trabajar con los objetos:

let person = {
    name: "Jesus",
    edad: 25
}

let worker = {
    ...person,
    work: "programmer"
}

console.log(worker)//{ name: 'Jesus', edad: 32, work: 'programmer' }

Al usar el spread sobre un objeto este devuelve cada key con su valor, por eso al definirlo en el objeto worker del ejemplo, se terminan agregando las claves y valores del objeto person.

Espero que les sea de utilidad.

RUN CODE es un manejo practico de consola

Resumen de la clase:

*Inicializar parámetros en funciones;
function newFuncion(name=“Juan”)

*Uso de plantillas para imprimir variables en una cadenacon el uso de comilla francesa en México comilla invertida
Mi cadena ${variable}

*Salto de linea: con comilla francesa basta con colocar un enter en tu texto para hacer un cambio de linea.

*Desestructurar una clase

*Alcance de declaracion Let, sólo por bloque
Declaración const, no se puede cambiar el valor asignado

Wow, dos clases y hemos aprendido mucho!!! 🥳🤓 Vamos con toda 💪

Para aquellos que se les es tedioso escribir o algo, vscode cuenta con la extension de Lorem Ipsum

Porque el habla tan rapido? me gustaria que hablara mas calmado como Sacha

El código visto en la clase, con algunas anotaciones.

// ----------- Class 002
// Before ES6 -> Multiline
let lorem = 'Lorem ipsum dolor sit amet. \n' + 'Praesentium, nesciunt!';
// ES -> Multiline
let lorem2 = `Lorem ipsum dolor sit amet.
Praesentium, nesciunt!`

console.log(lorem);
console.log(lorem2);

// Elements Destructuring
let person = {
	'name': 'Alex',
	'age': 32,
	'country': 'MX'
}
// Before ES6
console.log(person.name, person.age, person.country);
// ES6
let { name, age, country } = person;
console.log(name, age, country);

// Spread Operator
let team1 = ['Alex', 'Oscar', 'Manuel'];
let team2 = ['Valeria', 'Mariana', 'Camila'];
// ES6
let education = ['David', ...team1, ...team2];
console.log(education);

// Let
// Before ES6 -> Global Scope, deprecate
var hello = 'Hello';
{
	var globalVar = "Global Var";
}
{
	// ES6 -> Local Scope
	let globalLet = 'Global Let';
	console.log(globalLet);
}
console.log(globalVar);

// Const
// ES6 -> Const, cannot be reassigned
const HELLO = 'Hello World!';

8:33, en vez de console.log, usen console.table(education) y tendrán algo así:
┌─────────┬───────────┐
│ (index) │ Values │
├─────────┼───────────┤
│ 0 │ ‘David’ │
│ 1 │ ‘Oscar’ │
│ 2 │ ‘Julian’ │
│ 3 │ ‘Ricardo’ │
│ 4 │ ‘Valeria’ │
│ 5 │ ‘Jessica’ │
│ 6 │ ‘Camila’ │
└─────────┴───────────┘
Si aquí no se ve bien, en su consola se verá mejor jaja

Mi aporte de esta clase

let lorem = "Quiero escribir una frase epica que podemos separar\n"
+ "otra frase epica"


// es6
let lorem2 = `Otra frace epica que necesitamos
Ahora es otra frase epica
`;

console.log(lorem);
console.log(lorem2);

let person = {
    'name': 'Jimer',
    'age': '23',
    'country': 'EC'
}

console.log(person.name, person.age, person.country);

let { name, age, country} = person;
console.log(name);

//agurar datos

let team1 = ['Jimer', 'Samuel', 'Espinoza']
let team2 = ['Ambar', 'Marina', 'Soledispa']

let education = ['David', ...team1, ...team2];

console.log(education);

Spread operator is very useful !

Dejo mis apuntes. Salu2!

//? ┌──────────────────────────────────────────────────────────────────┐
//? │ LET, VAR and CONST, Multiline, Spread Operator and Destructuring │
//? └──────────────────────────────────────────────────────────────────┘

//? let, var and const examples

{
	//* var is a function-scoped variable declaration.
	var a = 1;
}

{
	//* let is a block-scoped variable declaration.
	let b = 2;
	console.log('let called inside the block:', b); //$ 2
}

//* You can use the same variable name in different blocks or functions and outsi the scope.
console.log('var called outside the block:', a); //$ 1
//* If you try to access a variable declared with let outside the block, you will get an error.
//console.log('let called outside the block:', b); //! ReferenceError: a is not defined

//* const is a block-scoped variable declaration.
const c = 3;
console.log('const called without changing the value:', c); //$ 3
//* If you try to change the value of a const variable, you get an error.
//c = 4; //! TypeError: Assignment to constant variable.

//? Multiline

//* Multiline after ECMAScript 6+
let text = "This is a row\n"
+ "This is another row";
console.log(text);

//* Multiline before ECMAScript 6+
let textES6 = `This is a row
This is another row`;
console.log(textES6);

//? Spread Operator

//* Spread Operator on ECMAScript 6+
let numbers    = [4, 5, 6];
let moreNumbers = [...numbers, 7, 8, 9];
let moreNumbers2 = [1, 2, 3, ...moreNumbers];
console.log(moreNumbers2);

//? Destructuring

//* Set an object to be destructured
let users = {
	user   : 'Juan',
	age    : 32,
	country: 'MX'
};

//* Destructuring before ECMAScript 6+
console.log(users.user, users.age, users.country);

//* Destructuring after ECMAScript 6+
let { user, age, country } = users;
console.log(user, age, country);

Excelente clase! excelente profesor!

La diferencia entre Let const y var

Todos hasta este punto conocemos el var, pero existe let y const con funcions diferentes,.

LET

En el caso de let la diferencia con var es que si nosotros creamos un var en un scope podemos llamar a la variable en global es decir fuera del scope, pero si nosotros hacemos lo mismo con let no funcionará!!!.

en resumidas cuentas let no te permite usarlo fuera de un scope

// CONST

La cosa con const cambia porque la diferencia con el var que conocemos es que su valor desde que se le asigna no podrá cambiar como su nombre lo indica esto es una constante es decir que siempre se mantendrá y si es una variable que no podemos cambiar!!

como dato curioso si una const es declarada en un scope entonces pasara lo mismo que con let no podremos llamarla fuera del scope!!! 👍

Espero que te haya quedado claro y si no fue así te invito a que lo repitas o busques rapido en google por tu cuentas por es muy IMPORTANTE !!!

`` => Comillas francesas identificadas

3.Una forma más sencilla de unir strings y arrays previamente ya creados es poniendo …(Y el nombre de la variable) esto nos hacer ahorrar código, una analogía perfecta es que en ves de que saquemos todas las cosas que hay en esas canastas para meterla en nuestra nueva canasta, simplemente tenemos que meter nuestras canastas en nuestra nueva canasta, es básicamente poner las canastas sobre una canasta más grande y llevan una fruta extra, es como cuando vamos a comprar y ponemos una funda dentro de otra funda para que no se nos caiga, es más o menos lo mismo.

.
He aquí mi segundo aporte acerca de la Spread Syntax del curso que está muy bueno. Más vale tarde que nunca, y aquí va:

  • Podemos usarlos como argumentos para una función.
function division(a,b) {
  return a / b;
}

const arguments = [6,3];

console.log(division(...arguments)); // 2
  • Podemos usarlos para continuar argumentos o parte de un arreglo.
const myArray = [1, 2, 3];
const arrayClone = [...myArray, 4, 5]; // [1, 2, 3, 4, 5]
  • Solo podemos usarlo para objetos ITERABLES.
const obj = {'key': 'value'};
const array = [...obj]; //  TypeError: obj is not iterable

Espero les sea útil. Si tienes algún otro aporte no dudes en publicarlo :’)