Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 7D : 1H : 14M : 58S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

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/11
const-vs-let-vs-var.png

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

Mis apuntes de la clase, los publicare todos en mi tw ordenaditos una vez culmine el curso, puedes buscarlos alli si gustas @juanbocode
screencapture-notion-so-LET-y-CONST-Multil-nea-Spread-Operator-y-Desestructuraci-n-bb6819677ce141b5a7579db302fb0369-2020-07-19-00_18_54.png

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

Les recomiendo mucho el curso de Scope y Closures

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.

duplicates.png

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

NoDuplicates.png

Desestructuración:
.
Destructuring.png
.
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!

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.

/**
 * 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}`);

He usado Samuel L. Ipsum en vez de Lorem Ipsum

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

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

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]```
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.

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

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

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

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

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)

Me acordé de esto que vi hoy en tw.

cap.PNG

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

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?

Creo que esto nos puede servir.

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

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

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

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

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.

Este man si explica bacano!

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.

var-let-const.PNG

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
Destructuración.PNG

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

Hola, quisiera ayudar a complementar sobre el SPREAD y el REST que no es mencionado en el video.

Parámetros de tipo SPREAD

  • Esto nos sirve como una opción para poder ENVIAR n cantidad de parámetros aun cuando no estén todos declarados directamente.
// los parámetros tipo SPREAD no se declaran  en la estructura original de la función, sino antes de la invocación de la función.

PARÁMETROS de tipo REST

  • Al contrario de SPREAD, estos me sirven como opción para RECIBIR n cantidad de parámetros. Ejemplo:
function contar(numero1, numero2, ...otrosNumeros) {

    console.log('total: ' + numero1);
    console.log('total: ' + numero2);
    console.log('total: ' + otrosNumeros);

    // en la variable otrosNumeros, me queda guardado los números que envió de más
}

contar(1, 2, [3, 4, 5, 6, 7, 8, 9]);

// los números que recibí con el parámetro tipo REST, pasan como un arreglo

Hola, quisiera ampliar un poco sobre la Desestructuracion.

Esto lo que nos permite es separar las propiedades de un elemento, o sea, extraer cierta información del elemento.

Por ejemplo:


let person = {
    name: 'Juanito',
    age: 25,
    country: 'Colombia',
    profession: 'Ingeniero'
};

// antes de ES6 para acceder a cada parte de mi elemento, llamábamos al elemento.atributo 
console.log(person.name, person.age)


// ahora con ES6 se puede hacer así:
//Para desestructurar, colocamos let o const .

let {'aquí va lo que queremos extraer'} = person;

// De esta manera podemos tratar lo que se extrajo del objeto como parámetros
let {name, age, profession} = persona;
console.log(name, age, profession);

Otra cosa que también podemos hacer es pasar valores por defecto.
Por ejemplo:

//Si se busca extraer algo y posiblemente el objeto 'no lo tiene, podemos colocar valores por defecto

let {name, age, profession, email = '[email protected]'} = person;
console.log(name, age, profession, email);

También podemos usar la desestructuración en funciones

la idea es que lo que se extrajo pase como parámetro a una función, eso lo haríamos así:

let person = {
    name: 'Juanito',
    age: 25,
    Country: 'Colombia',
    profession: 'Ingeniero'
};	
	
const registro = ( {name, age, profession, email = '[email protected]'} ) => {
console.log(name, age, profession, email);
};
	
registro(person);

Sencillo:

  • Gracias a los Template Literals podemos escribir entre líneas solo presionando entre.
  • Desestructuración: Es una expresión de JS que permite desempacar valores de un arreglo o propiedades de objetos.
  • Spread Operator: Es un operador que simplifica la recogida de valores en una estructura de datos. Lo utilizamos para desestructurar arrays.
  • Var,Let y const: Var y Let pueden ser reasignadas. Var tiene scope global, Let y const tienen scope local o de bloque. Const no puede ser reasignadas.

El valor de una constante SI PUEDE CAMBIAR o mejor dicho mutar.

const x = {
	name: "anfer",
	age: 23
}

x.name = "Nai"

console.log(x.name)// Nai

si (name) les sale deprecated, es porque es una palabra reservada, ver el siguiente enlace Es una palabra reservada, ver la siguiente documentación: https://www.w3schools.com/js/js_reserved.asp

Notas de la clase
code.png

Les comparto mis apuntes de esta clase.

acces_elements_esc6.png
spread_ESC6.png
var_vs_let.png
const.png

Untitled.png

En este repositorio remoto voy subiendo a medida que avanzo el curso, cada concepto
Agradeceria mucho su apoyo, en mis otros repositorios
https://github.com/SebastianTuquerrezG/ECMAscript

Un pequeño aporte de mis apuntes.

Clase 3 ECMAScript 6+.png

Multilinea en los strings

//Antes de ECMAScript 6
let lorem = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero \n" + "accusamus sit voluptatibus, repellendus excepturi hic fugiat alias consequuntur neque sint pariatur quos assumenda, nulla quae natus voluptates, aliquam nesciunt maiores!"
console.log(lorem)

        
//Despues de ECMAScript 6
let lorem2 = `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim harum
voluptas aperiam accusantium odio quas fugiat expedita error ipsam, ducimus maiores
possimus eveniet iste facilis rerum cupiditate mollitia ut dolor!`
console.log(lorem2)

Desestructuración de elementos

 let person = {
	'name': 'Isaac',
	'age': 25,
	'country': 'Venezeula'
}
	//Antes de ECMAScript 6
        console.log(person.name, person.age)
        
        //Despues de ECMAScript 6
        let {name, age, country} = person
        console.log(name, age)

Spread Operator (operador de propagacion), nos permite expandir de ciertas situciones varios elementos

let team1 = ['Isaac', 'Isaias', 'Israel', 'Rafael']
let team2 = ['Katiuska', 'Valentina', 'Viviana']
	//Antes de ECMAScript 6
        let family = ['Vivian', 'Isaac', 'Isaias', 'Israel', 'Rafael', 'Katiuska', 'Valentina', 'Viviana']
        console.log(family)

        //Despues de ECMAScript 6
        let family2 = ['Vivian', ...team1, ...team2]
        console.log(family2)

LET, es una nueva forma de guardar los elementos en memoria, nuestras variables. A diferencia de var, let solo esta disponible en el scope donde se declare, es decir, su scope local

{
	var globalVar = 'Global Var'
}
{
	let globalLet = 'Global Let'
        console.log(globalLet)
}
console.log(globalVar)
console.log(globalLet)  // Te arrojara un error ya que no encontrara la variable, por lo que movemos esta linea dentro de bloque donde se declara con let

CONST, nos permite crear una constante, es decir, no cambiara su valor, asi se intente reasignar

const a = 'b'
a = 'a' //Arrojara error ya que const no le permite cambiar su valor
console.log(a)

Notas del vídeo:

-Parámetros por defecto
Al pasar parametros dentro de una función podemos
colocar valores por defecto.
function parametrosPorDefecto(nombre = ‘Oscar’) {
resto de la función…
}
-Template literals
Es la sintaxis que utiliza comillas francesas: ``
${Variable} texto en strings ${variable}

-Multilínea en los strings
Ocupa de nuevo template literals
Frase épica en strings Continua la frase épica.
Concatena frases que se encuentre dentro de los
templates literals.

-Destructuración de elementos.
Creamos un Objeto.
let person = {
‘name’: ‘Oscar’,
‘age’: 32,
‘country’: ‘MX’
}
extraemos los datos:
let {name, age, country} = person
--------------Atributos-------------Objeto-

-Operador de propagación
let arreglo1 = [‘Elemento1’, ‘Elemento2’]
let arreglo2 = [‘Elemento3’, ‘Elemento4’]
let union = […arreglo1, …arreglo2, ‘Elemento5’]

Nota: está utilizando let.
Let solo esta disponible en el scope, es decir, en el
bloque de código que se está utilizando la variable.
Mientras que var está disponible de manera global
const no permite reasignar valores.

Es tanta informacion pero al mismo tiempo la forma en la que se ensena hace que pueda comprendarla a la perfeccion y den ganas de continuar a la siguiente clase

Espero no se haya compartido algo similar, pero de algunos vídeos de youtube que he visto, me gustó esta parte de uno de Leonidas Esteban, y le hice una captura.

var, let y const

Un saludo y gracias.

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

//MULTILINEAS CON TEMPLEATE LITERALLS CON ENTER sin necesidad de concatenar

let lorem2 = `otra frase epica
y esta es otra frase epica
`; 

console.log(lorem2) //mas amigable y facil de identificar 

//creando un objeto
let person = {
    'name' : 'Alejandro',
    'age' : 23,
    'country' : 'Ecuador'
}

// version antes de ES6
console.log(person.name, person.age);

//desestructurar los elementos con ES6
// hacer una constante 
let { name, age} = person;

console.log( name, age); // asignacion igual a la de: console.log(person.name, person.age)


let team1 = ['Oscar', 'Pedro', 'Roberto'];
let team2 = ['Valeria', 'Angelica', 'Dayanna'];

// spread propagation (...) para unir los valores dentro de esas variables 
let education = ['David', ...team1, ...team2];

console.log(education)


//ECMAScript anadio nuevas palabras reservadas para las variables: let y para las constantes: const

const a = 'b';
a = 'a' //Error de reasignamiento de una constante

😮 Cuando se define una “const” su valor no se puede cambiar. Interesante.

C3.png
//Multilinea

//antes se ocupaba el \n para dar un salto de linea seguir escribiendo en codigo
let texto = "Holaaaaaa munco como sadasdsad \n" +
    "dsadsadsadasdasdasdasdasdasdsadsdasdsadsadsada" +
    "assdsadsadsadsadsadsadsadsadsadsadsadsa";
console.log(texto);

console.log(' ')

//es6
let comentario = `asdasdsadsaddddddddddddddsdsdd
sadsadsadddddddddddddddddsadsadsad
sdsadsadsadasdsadadasdsadsdsdsad
sdsadasdasdsadddddddddddd`;
console.log(comentario);

//Traer valores de un objetos
let valores = {
    nombre : "sadasd",
    edad : 18,
}
console.log(valores.nombre, valores.edad);

//es6
//Esto manda a traer el valor de l objeto y lo asigna en una variable
let {nombre, edad} = valores;
console.log(nombre);
console.log(edad)

//Spread operation
let valoresUno = ["sdsd", "sdsads", "sdsadsa"];
let valoresDos = ["sdsad", "asdasds", "sdsad"];
let valoresFinal = [...valoresUno, ...valoresDos];
console.log(valoresFinal)

//let
{
    var globalVar = "Hola Mundo";
}

{
    let localLet = "Hola Mundo";
    console.log(localLet); //Let funciona de manera local
}

console.log(globalVar); //Var funciona de manera global

//Const
//Const es una variable constante que su valor NO puede ser modificado
const noModificar = "Victor";
noModificar = "Chaval";

no sabia que lo de lorem allicaba tambien en Js

  1. LET y CONST, Multilínea, Spread Operator y Desestructuración
    es6 fue liberado en junio del 2015

*- Salto de línea
Antes los saltos de línea se tenía que incluir con la combinación de carácter es \n conseguir, pero ahora con el uso de los template literals este conserva el formato al realizar

3-1-salto-de-linea.png3-1-salto-de-linea-resultado.png

*- De-estructuración de elementos
La sintaxis de desestructuración es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
3-2-de-estructuración-de-objetos-ejemplo-1.png
3-2-de-estructuración-de-objetos-ejemplo-1-resultado.png
3-2-de-estructuración-de-objetos-ejemplo-2.png

*- Operador de propagación
La sintaxis extendida o spread syntax permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos o elementos son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave son esperados.

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax
3-3-operador-de-propagación-ejemplo-2.png
3-3-operador-de-propagación-ejemplo-1.png3-3-operador-de-propagación-ejemplo-1-resultado.png

*- let vs var vs const
let te permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.a diferencia de la palabra clave var la cual define una variable global o local en una función sin importar el ámbito del bloque. La otra diferencia entre var y let es que este último se inicializa a un valor sólo cuando un analizador lo evalúa (ver abajo).
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/let3-4-var-vs-let-ejemplo-1.png
3-4-var-vs-let-ejemplo-2.png3-4-var-vs-let-ejemplo-3.png3-5-var-vs-let-const.png

Genial

Con alt 239 se puede escribir la comilla francesa 😃

Hola amigos, echenle un ojo a esto:
https://developer.mozilla.org/es/docs/Glossary/Hoisting
https://www.itdo.com/blog/javascript-conceptos-fundamentales-hoisting/

Va sobre el uso de var, let, const y funciones y cómo afectan en el scope sus declaraciones y asignaciones.

En las entrevistas de trabajo que he tenido, me han pedido tener conocimiento de este tema 😃

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!

Alguien sabe que es el scope, o como se podria definir

Les dejo las notas que pude tomar.

/*Multilíneas*/
let lorem = 'Lorem ipsum dolor sit amet consectetur, adipiscing elit nullam.\n'
+ 'otra frase épica que necesitamos.';
//con es6
let lorem2 = `otra frase épica que necesitamos
ahora es otra frase épica
`;

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

/*Desestructuración de elementos*/

let person = {
    'name':'oscar',
    'age':32,
    'country':'MX'
}
console.log(person.name, person.age);
//con es6
let {name,age,country} = person; //estoy señalando que voy a requerir estos elementos de mi objeto person
console.log(name,age,country);
//Ejemplo 2
let team1 = ['Oscar','Julian','Ricardo'];
let team2 = ['Valeria','Yesica','Camila'];

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

// ** Uso de let en lugar de var **
var hola = 'hola'; //Originalmente haciamos esto y esta variable estaba disponible de forma global.
{
    var globalVar = 'Global Var';
}

{   
    //let solo está disponible en el bloque de código en el cual está definido
    let globalLet = 'Global Let';
    //esto si se va a imprimir porque los estoy haciendo dentro del scope
    console.log(globalLet + ' Dentro del scope')
}

console.log(globalVar);
//este no se va a imprimir porque lo estoy haciendo fuera del scope y por lo tanto no podré acceder
console.log(globalLet);

// ** const **

const a = 'b';
//con const no podré cambiar el valor si es que quiero asignarle otro string por ejemplo

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment
todo sobre Desestructuración este tema requiere de mucho mas amor y tiempo para ser bien asimilado ✍(◔◡◔)

=) me llega

Les dejo un lorem impsum para que lo usen en la clase: Lorem ipsum dolor sit amet consectetur adipisicing elit. Id autem nam, explicabo soluta maxime veritatis est non
rerum magnam hic, perferendis ullam cupiditate amet nemo voluptas. Assumenda quidem quam sunt!

const-vs-let-vs-var.png

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

Mis apuntes de la clase, los publicare todos en mi tw ordenaditos una vez culmine el curso, puedes buscarlos alli si gustas @juanbocode
screencapture-notion-so-LET-y-CONST-Multil-nea-Spread-Operator-y-Desestructuraci-n-bb6819677ce141b5a7579db302fb0369-2020-07-19-00_18_54.png

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

Les recomiendo mucho el curso de Scope y Closures

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.

duplicates.png

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

NoDuplicates.png

Desestructuración:
.
Destructuring.png
.
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!

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.

/**
 * 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}`);

He usado Samuel L. Ipsum en vez de Lorem Ipsum

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

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

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]```
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.

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

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

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

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

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)

Me acordé de esto que vi hoy en tw.

cap.PNG

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

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?

Creo que esto nos puede servir.

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

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

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

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

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.

Este man si explica bacano!

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.

var-let-const.PNG

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
Destructuración.PNG

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

Hola, quisiera ayudar a complementar sobre el SPREAD y el REST que no es mencionado en el video.

Parámetros de tipo SPREAD

  • Esto nos sirve como una opción para poder ENVIAR n cantidad de parámetros aun cuando no estén todos declarados directamente.
// los parámetros tipo SPREAD no se declaran  en la estructura original de la función, sino antes de la invocación de la función.

PARÁMETROS de tipo REST

  • Al contrario de SPREAD, estos me sirven como opción para RECIBIR n cantidad de parámetros. Ejemplo:
function contar(numero1, numero2, ...otrosNumeros) {

    console.log('total: ' + numero1);
    console.log('total: ' + numero2);
    console.log('total: ' + otrosNumeros);

    // en la variable otrosNumeros, me queda guardado los números que envió de más
}

contar(1, 2, [3, 4, 5, 6, 7, 8, 9]);

// los números que recibí con el parámetro tipo REST, pasan como un arreglo

Hola, quisiera ampliar un poco sobre la Desestructuracion.

Esto lo que nos permite es separar las propiedades de un elemento, o sea, extraer cierta información del elemento.

Por ejemplo:


let person = {
    name: 'Juanito',
    age: 25,
    country: 'Colombia',
    profession: 'Ingeniero'
};

// antes de ES6 para acceder a cada parte de mi elemento, llamábamos al elemento.atributo 
console.log(person.name, person.age)


// ahora con ES6 se puede hacer así:
//Para desestructurar, colocamos let o const .

let {'aquí va lo que queremos extraer'} = person;

// De esta manera podemos tratar lo que se extrajo del objeto como parámetros
let {name, age, profession} = persona;
console.log(name, age, profession);

Otra cosa que también podemos hacer es pasar valores por defecto.
Por ejemplo:

//Si se busca extraer algo y posiblemente el objeto 'no lo tiene, podemos colocar valores por defecto

let {name, age, profession, email = '[email protected]'} = person;
console.log(name, age, profession, email);

También podemos usar la desestructuración en funciones

la idea es que lo que se extrajo pase como parámetro a una función, eso lo haríamos así:

let person = {
    name: 'Juanito',
    age: 25,
    Country: 'Colombia',
    profession: 'Ingeniero'
};	
	
const registro = ( {name, age, profession, email = '[email protected]'} ) => {
console.log(name, age, profession, email);
};
	
registro(person);

Sencillo:

  • Gracias a los Template Literals podemos escribir entre líneas solo presionando entre.
  • Desestructuración: Es una expresión de JS que permite desempacar valores de un arreglo o propiedades de objetos.
  • Spread Operator: Es un operador que simplifica la recogida de valores en una estructura de datos. Lo utilizamos para desestructurar arrays.
  • Var,Let y const: Var y Let pueden ser reasignadas. Var tiene scope global, Let y const tienen scope local o de bloque. Const no puede ser reasignadas.

El valor de una constante SI PUEDE CAMBIAR o mejor dicho mutar.

const x = {
	name: "anfer",
	age: 23
}

x.name = "Nai"

console.log(x.name)// Nai

si (name) les sale deprecated, es porque es una palabra reservada, ver el siguiente enlace Es una palabra reservada, ver la siguiente documentación: https://www.w3schools.com/js/js_reserved.asp

Notas de la clase
code.png

Les comparto mis apuntes de esta clase.

acces_elements_esc6.png
spread_ESC6.png
var_vs_let.png
const.png

Untitled.png

En este repositorio remoto voy subiendo a medida que avanzo el curso, cada concepto
Agradeceria mucho su apoyo, en mis otros repositorios
https://github.com/SebastianTuquerrezG/ECMAscript

Un pequeño aporte de mis apuntes.

Clase 3 ECMAScript 6+.png

Multilinea en los strings

//Antes de ECMAScript 6
let lorem = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero \n" + "accusamus sit voluptatibus, repellendus excepturi hic fugiat alias consequuntur neque sint pariatur quos assumenda, nulla quae natus voluptates, aliquam nesciunt maiores!"
console.log(lorem)

        
//Despues de ECMAScript 6
let lorem2 = `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim harum
voluptas aperiam accusantium odio quas fugiat expedita error ipsam, ducimus maiores
possimus eveniet iste facilis rerum cupiditate mollitia ut dolor!`
console.log(lorem2)

Desestructuración de elementos

 let person = {
	'name': 'Isaac',
	'age': 25,
	'country': 'Venezeula'
}
	//Antes de ECMAScript 6
        console.log(person.name, person.age)
        
        //Despues de ECMAScript 6
        let {name, age, country} = person
        console.log(name, age)

Spread Operator (operador de propagacion), nos permite expandir de ciertas situciones varios elementos

let team1 = ['Isaac', 'Isaias', 'Israel', 'Rafael']
let team2 = ['Katiuska', 'Valentina', 'Viviana']
	//Antes de ECMAScript 6
        let family = ['Vivian', 'Isaac', 'Isaias', 'Israel', 'Rafael', 'Katiuska', 'Valentina', 'Viviana']
        console.log(family)

        //Despues de ECMAScript 6
        let family2 = ['Vivian', ...team1, ...team2]
        console.log(family2)

LET, es una nueva forma de guardar los elementos en memoria, nuestras variables. A diferencia de var, let solo esta disponible en el scope donde se declare, es decir, su scope local

{
	var globalVar = 'Global Var'
}
{
	let globalLet = 'Global Let'
        console.log(globalLet)
}
console.log(globalVar)
console.log(globalLet)  // Te arrojara un error ya que no encontrara la variable, por lo que movemos esta linea dentro de bloque donde se declara con let

CONST, nos permite crear una constante, es decir, no cambiara su valor, asi se intente reasignar

const a = 'b'
a = 'a' //Arrojara error ya que const no le permite cambiar su valor
console.log(a)

Notas del vídeo:

-Parámetros por defecto
Al pasar parametros dentro de una función podemos
colocar valores por defecto.
function parametrosPorDefecto(nombre = ‘Oscar’) {
resto de la función…
}
-Template literals
Es la sintaxis que utiliza comillas francesas: ``
${Variable} texto en strings ${variable}

-Multilínea en los strings
Ocupa de nuevo template literals
Frase épica en strings Continua la frase épica.
Concatena frases que se encuentre dentro de los
templates literals.

-Destructuración de elementos.
Creamos un Objeto.
let person = {
‘name’: ‘Oscar’,
‘age’: 32,
‘country’: ‘MX’
}
extraemos los datos:
let {name, age, country} = person
--------------Atributos-------------Objeto-

-Operador de propagación
let arreglo1 = [‘Elemento1’, ‘Elemento2’]
let arreglo2 = [‘Elemento3’, ‘Elemento4’]
let union = […arreglo1, …arreglo2, ‘Elemento5’]

Nota: está utilizando let.
Let solo esta disponible en el scope, es decir, en el
bloque de código que se está utilizando la variable.
Mientras que var está disponible de manera global
const no permite reasignar valores.

Es tanta informacion pero al mismo tiempo la forma en la que se ensena hace que pueda comprendarla a la perfeccion y den ganas de continuar a la siguiente clase

Espero no se haya compartido algo similar, pero de algunos vídeos de youtube que he visto, me gustó esta parte de uno de Leonidas Esteban, y le hice una captura.

var, let y const

Un saludo y gracias.

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

//MULTILINEAS CON TEMPLEATE LITERALLS CON ENTER sin necesidad de concatenar

let lorem2 = `otra frase epica
y esta es otra frase epica
`; 

console.log(lorem2) //mas amigable y facil de identificar 

//creando un objeto
let person = {
    'name' : 'Alejandro',
    'age' : 23,
    'country' : 'Ecuador'
}

// version antes de ES6
console.log(person.name, person.age);

//desestructurar los elementos con ES6
// hacer una constante 
let { name, age} = person;

console.log( name, age); // asignacion igual a la de: console.log(person.name, person.age)


let team1 = ['Oscar', 'Pedro', 'Roberto'];
let team2 = ['Valeria', 'Angelica', 'Dayanna'];

// spread propagation (...) para unir los valores dentro de esas variables 
let education = ['David', ...team1, ...team2];

console.log(education)


//ECMAScript anadio nuevas palabras reservadas para las variables: let y para las constantes: const

const a = 'b';
a = 'a' //Error de reasignamiento de una constante

😮 Cuando se define una “const” su valor no se puede cambiar. Interesante.

C3.png
//Multilinea

//antes se ocupaba el \n para dar un salto de linea seguir escribiendo en codigo
let texto = "Holaaaaaa munco como sadasdsad \n" +
    "dsadsadsadasdasdasdasdasdasdsadsdasdsadsadsada" +
    "assdsadsadsadsadsadsadsadsadsadsadsadsa";
console.log(texto);

console.log(' ')

//es6
let comentario = `asdasdsadsaddddddddddddddsdsdd
sadsadsadddddddddddddddddsadsadsad
sdsadsadsadasdsadadasdsadsdsdsad
sdsadasdasdsadddddddddddd`;
console.log(comentario);

//Traer valores de un objetos
let valores = {
    nombre : "sadasd",
    edad : 18,
}
console.log(valores.nombre, valores.edad);

//es6
//Esto manda a traer el valor de l objeto y lo asigna en una variable
let {nombre, edad} = valores;
console.log(nombre);
console.log(edad)

//Spread operation
let valoresUno = ["sdsd", "sdsads", "sdsadsa"];
let valoresDos = ["sdsad", "asdasds", "sdsad"];
let valoresFinal = [...valoresUno, ...valoresDos];
console.log(valoresFinal)

//let
{
    var globalVar = "Hola Mundo";
}

{
    let localLet = "Hola Mundo";
    console.log(localLet); //Let funciona de manera local
}

console.log(globalVar); //Var funciona de manera global

//Const
//Const es una variable constante que su valor NO puede ser modificado
const noModificar = "Victor";
noModificar = "Chaval";

no sabia que lo de lorem allicaba tambien en Js

  1. LET y CONST, Multilínea, Spread Operator y Desestructuración
    es6 fue liberado en junio del 2015

*- Salto de línea
Antes los saltos de línea se tenía que incluir con la combinación de carácter es \n conseguir, pero ahora con el uso de los template literals este conserva el formato al realizar

3-1-salto-de-linea.png3-1-salto-de-linea-resultado.png

*- De-estructuración de elementos
La sintaxis de desestructuración es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
3-2-de-estructuración-de-objetos-ejemplo-1.png
3-2-de-estructuración-de-objetos-ejemplo-1-resultado.png
3-2-de-estructuración-de-objetos-ejemplo-2.png

*- Operador de propagación
La sintaxis extendida o spread syntax permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos o elementos son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave son esperados.

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax
3-3-operador-de-propagación-ejemplo-2.png
3-3-operador-de-propagación-ejemplo-1.png3-3-operador-de-propagación-ejemplo-1-resultado.png

*- let vs var vs const
let te permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.a diferencia de la palabra clave var la cual define una variable global o local en una función sin importar el ámbito del bloque. La otra diferencia entre var y let es que este último se inicializa a un valor sólo cuando un analizador lo evalúa (ver abajo).
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/let3-4-var-vs-let-ejemplo-1.png
3-4-var-vs-let-ejemplo-2.png3-4-var-vs-let-ejemplo-3.png3-5-var-vs-let-const.png

Genial

Con alt 239 se puede escribir la comilla francesa 😃

Hola amigos, echenle un ojo a esto:
https://developer.mozilla.org/es/docs/Glossary/Hoisting
https://www.itdo.com/blog/javascript-conceptos-fundamentales-hoisting/

Va sobre el uso de var, let, const y funciones y cómo afectan en el scope sus declaraciones y asignaciones.

En las entrevistas de trabajo que he tenido, me han pedido tener conocimiento de este tema 😃

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!

Alguien sabe que es el scope, o como se podria definir

Les dejo las notas que pude tomar.

/*Multilíneas*/
let lorem = 'Lorem ipsum dolor sit amet consectetur, adipiscing elit nullam.\n'
+ 'otra frase épica que necesitamos.';
//con es6
let lorem2 = `otra frase épica que necesitamos
ahora es otra frase épica
`;

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

/*Desestructuración de elementos*/

let person = {
    'name':'oscar',
    'age':32,
    'country':'MX'
}
console.log(person.name, person.age);
//con es6
let {name,age,country} = person; //estoy señalando que voy a requerir estos elementos de mi objeto person
console.log(name,age,country);
//Ejemplo 2
let team1 = ['Oscar','Julian','Ricardo'];
let team2 = ['Valeria','Yesica','Camila'];

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

// ** Uso de let en lugar de var **
var hola = 'hola'; //Originalmente haciamos esto y esta variable estaba disponible de forma global.
{
    var globalVar = 'Global Var';
}

{   
    //let solo está disponible en el bloque de código en el cual está definido
    let globalLet = 'Global Let';
    //esto si se va a imprimir porque los estoy haciendo dentro del scope
    console.log(globalLet + ' Dentro del scope')
}

console.log(globalVar);
//este no se va a imprimir porque lo estoy haciendo fuera del scope y por lo tanto no podré acceder
console.log(globalLet);

// ** const **

const a = 'b';
//con const no podré cambiar el valor si es que quiero asignarle otro string por ejemplo

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment
todo sobre Desestructuración este tema requiere de mucho mas amor y tiempo para ser bien asimilado ✍(◔◡◔)

=) me llega

Les dejo un lorem impsum para que lo usen en la clase: Lorem ipsum dolor sit amet consectetur adipisicing elit. Id autem nam, explicabo soluta maxime veritatis est non
rerum magnam hic, perferendis ullam cupiditate amet nemo voluptas. Assumenda quidem quam sunt!