No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: let y const, y arrow functions

4/35
Recursos

En ECMAScript 6 (ES6 o ES2015) fueron publicadas varias caracter铆sticas nuevas que dotaron de gran poder al lenguaje, dos de estas son una nueva forma de declaraci贸n de variables con let y const, y funciones flechas.

La nueva forma para declarar variables con let y const

Hasta ahora aprendiste a declarar variables con var, sin embargo, a partir de la especificaci贸n de ES6 se agregaron nuevas formas para la declaraci贸n de variables.

Las nuevas palabras reservadas let y const resuelven varios problemas con var como el scope, hoisting, variables globales, re-declaraci贸n y re-asignaci贸n de variables.

Variables re-declaradas y re-asignadas

La re-declaraci贸n es volver a declarar una variable, y la re-asignaci贸n es volver a asignar un valor. Entonces cada palabra reservada tiene una forma diferente de manejar variables:

  • Una variable declarada con var puede ser re-declarada y re-asignada.
  • Una variable declarada con let puede ser re-asignada, pero no re-declarada.
  • Una variable declarada con const no puede ser re-declarada, ni re-asignada. Su declaraci贸n y asignaci贸n debe ser en una l铆nea, caso contrario habr谩 un error.

En conclusi贸n, si intentas re-declarar una variable declarada con let y const habr谩 un error de 鈥渧ariable ya declarada鈥; por otro lado, si intentas re-asignar una variable declarada con const existir谩 un 鈥渆rror de tipo鈥.

En los dem谩s casos, JavaScript lo aceptar谩 como v谩lidos, algo problem谩tico con var, por eso deja de utilizarlo.

Ejemplo de declaraci贸n y asignaci贸n en diferentes l铆neas

// Declaraci贸n de variables
var nameVar 
let nameLet

// Asignaci贸n de variables
nameVar= "soy var"
nameLet = "soy let"

Aunque realmente lo que pasa si no asignas un valor en la declaraci贸n, JavaScript le asigna un valor undefined.

Ejemplo de declarar y asignar con const en diferentes l铆neas de c贸digo

const pi  // SyntaxError: Missing initializer in const declaration.
pi = 3.14

Ejemplo de re-declaraci贸n de variables

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

// Re-declaraci贸n de variables
var nameVar = "var soy" 
console.log(nameVar) // 'var soy'

let nameLet = "let soy" // SyntaxError: Identifier 'nameLet' has already been declared.

const nameConst = "const soy" //SyntaxError: Identifier 'nameConst' has already been declared.

Ejemplo de re-asignaci贸n de variables

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

// Re-asignaci贸n de variables
nameVar = "otro var"
console.log(nameVar) // 'otro var'

nameLet = "otro let"
console.log(nameVar) // otro let'

nameConst = "otro const" //TypeError: Assignment to constant variable.

Ten en cuenta que los errores parar谩n la ejecuci贸n de tu programa.

Scope

En el tema del scope, let y const tienen un scope de bloque y var no.

{
var nameVar = "soy var"
let nameLet = "soy let"
}

console.log(nameVar) // 'soy var'
console.log(nameLet) // ReferenceError: nameLet is not defined

Todo el tema de Scope tiene su propio curso que deber铆as haber tomado: Curso de Closures y Scope en JavaScript

Objeto global

En variables globales, let y constno guardan sus variables en el objeto global (window, global o globalThis), mientras que var s铆 los guarda.

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

globalThis.nameVar   // 'soy var'
globalThis.nameLet   // undefined
globalThis.nameConst  // undefined

Esto es importante para que no exista re-declaraci贸n de variables.

Funciones flecha

Las funciones flecha (arrow functions) consiste en una funci贸n an贸nima con la siguiente estructura:

//Funci贸n tradicional
function nombre (par谩metros) {
    return valorRetornado
}

//Funci贸n flecha
const nombre = (par谩metros) => {
    return valorRetornado
}

Se denominan funci贸n flecha por el elemento => en su sintaxis.

Omitir par茅ntesis en las funciones flecha

Si existe un solo par谩metro, puedes omitir los par茅ntesis.

const porDos = num => {
    return num * 2
}

Retorno impl铆cito

Las funciones flecha tienen un retorno impl铆cito, es decir, se puede omitir la palabra reservada return, para que el c贸digo sea escrito en una sola l铆nea.

//Funci贸n tradicional
function suma (num1, num2) {
    return num1 + num2
}

//Funci贸n flecha
const suma = (num1, num2) => num1 + num2

Si el retorno requiere de m谩s l铆neas y a煤n deseas utilizarlo de manera impl铆cita, deber谩s envolver el cuerpo de la funci贸n entre par茅ntesis.

const suma = (num1, num2) => (
    num1 + num2
)

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 54

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Res煤men de las diferencias puntuales entre let, const y var

Desde que conozco las arrow functions no las quiero dejar de utilizar 馃榿 #TeamArrowFunctions

Esta imagen siempre me ayuda a ver esas diferencias de forma b谩sica

No hab铆a entendido las arrow functions inicialmente, as铆 que fui a ver un par de videos, que tampoco entend铆, fui a dormir, repos茅 un d铆a y ahora que volv铆 a ver la explicaci贸n me pareci贸 muy sencillo.
A veces es necesario descansar para seguir aprendiendo amigos 馃槂

Para la gente curiosa que al igual que yo, les llamo la atenci贸n tener el s铆mbolo de la flecha => al igual que Oscar, en su editor de texto, les dejo este enlace en donde varios usuarios explican como hacerlo!

https://stackoverflow.com/questions/59617766/what-is-the-vscode-extension-theme-symbolset-used-to-display-formatted-actually

Se trata de una fuente especialmente creada para desarrolladores llamada 鈥淔ira Code鈥, lo 煤nico que tienen que hacer es instalar la fuente en su dispositivo, seleccionarla como font-family en la configuraci贸n de su Visual Studio Code, y a su vez activar algo llamado 鈥渆ditor.fontLigatures鈥 = true (editando el settings.JSON de vscode)

Todo esta explicado en el enlace, 茅chenle un ojo si les agrada

var, let y const resumidos:

ES6 (2015)

A partir de esta versi贸n se hace referencia a 鈥淓l gran cambio鈥

let & const

Nuevas palabras reservadas para guardar variables. Antes solo exist铆a var.

// Ac谩 estamos declarando y asignando el valor
var lastName = 'David';
// Ac谩 reasignamos el valor de la variable lastName
lastName = 'David';

// Declaramos y asignamos fruta pero con let
let fruit = 'Apple';
// Reasignamos el valor de fruta
fruit = 'Kiwi';

Let permite la reasignaci贸n de valores de una variable, con la particularidad de que solo tiene un alcance de bloque, mientras que var tiene un alcance global.
Sin embargo con const el valor no puede ser reasignado y tambi茅n tiene alcance de bloque.

Todo lo que sea un bloque es lo que est谩 entre llaves {}

Arrow Functions

Es una alternativa compacta para declarar una function.

su sintaxis es de la siguiente manera:

const nombreFunction = (parametros) => {
	bloque de funcionalidad
}

este tema me confunde acerca de los parametros y los argumentos nuevamente, si (num) no tiene valor aun, porque la llama argumento durante todo el video, y tambien porque en la pagina de mozzilla hacen lo mismo? no deberian estar llamandolo par谩metro?

Hola Chic@s dejo mi codigo espero les sirva. 馃槂
ES6

  • LET Y CONST
//Declarar la variable lastName y esta siendo asignada a David//
var lastName = "David";
//Reasignar el valor que originalmente habiamos agregado ya que var es global//
lastName = "Oscar";
console.log(lastName);

// Declarando y asignando //
let fruit = "apple";
// Reasignamos ya que let tiene un alcanze de bloque //
fruit = "kiwi";
console.log(fruit);


const animal = "dog";
// No se puede reasignar un valor con const//
animal = "cat";
console-log(animal);


const fruits = () => {
    if(true) {
        var fruit1 = "Apple"; // function scope
        let fruit2 = "kiwi";  // block scope
        const fruit3 = "banana"; // block scope
    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}
fruits();
  • ARROW FUNCTIONS
function square(num) {
    return num * num;
}

const square = (num) => {
    return num * num;
}
// simplifica el codigo //
const square = num => num + num;

Esta info sobre Arrow Functions puede ayudar,
Cu谩ndo usarlas y cu谩ndo no:

Las funciones flecha o Arrow Functions no son solo una az煤car sint谩ctica para hacer mas f谩cil/elegante la declaraci贸n de funci贸n ordinaria. Hay considerables diferencias entre ambas que pueden hacer que un programa no funcione como se espera y no son intercambiables para muchos casos.

Por esto supongo que la pregunta completa es 驴cuando usarlas y cuando no?

驴Cuando usar Arrow Functions?
Sintaxis reducida de funciones puras.
En el siguiente bloque, son intercambiables por que son funciones puras (que su resultado no depende de una variable externa). En cuando performance, son pr谩cticamente iguales.

// declaracion de funcion
var nombres = personas.map(function搂{ return p.nombre });
// funcion flecha, este es un buen caso de uso
var nombres = personas.map(p => p.nombre);
Cuando quires que la funci贸n flecha se ejecute en el mismo lexical scope que la funci贸n contenedora:
Las funciones flecha se eval煤an como parte del lexical scope que las contiene, por esto this y arguments no son instancias propias de la funci贸n flecha sino que son las instancias de la funci贸n contenedora. Este tipo de funciones no son intercambiables, deber谩s reescribir partes del cuerpo de la funci贸n si quieres cambiar de una sintaxis a la otra.

Considera este otro bloque:

// ECMAScript 5, usando una declaraci贸n de funci贸n.
function contadorDeSegundos() {
var that = this;
this.contar = 0;
setInterval(function() {
that.contar++;
}, 1000);
}

/// ECMAScript 2015, con arrow functions
function contadorDeSegundos() {
this.contar = 0;
setInterval(() => { this.contar++ }, 1000);
}
Como ves aqu铆 otra vez el c贸digo es mas compacto, pero el comportamiento de this es muy diferente.

驴Cuando NO usar Arrow Functions?
Cuando necesites argumentos din谩micos:
Como ya se estableci贸, la funciones flecha no exponen el objeto arguments, por lo tanto si necesitas acceso al mismo no puedes utilizarlas. Ten en cuenta que si la funci贸n flecha la declaras dentro de otra funci贸n, estar铆as accediendo al arguments de la funci贸n contenedora (si hubiese una). Por eso se dice las funciones flecha utilizan lexical arguments. Es decir, que ven el objeto arguments que esta en el lexical scope.

A nivel global:

var f = () => { console.log(arguments.length) }
f();
// produce: Uncaught ReferenceError: arguments is not defined(鈥)
var f2 = function() { console.log(arguments.length) }
f2();
// produce: 0
En funciones generador:
La palabra clave yield no esta permitida en funciones flecha. Estas funciones no pueden ser funciones generador (sin embargo pueden contener funciones generador).

Recomendado; crear las funciones con const

ES6: let, const y arrow functions

  • Junio del 2015

Las variables son espacios en memoria en los cuales podemos guardar tipos de datos, funciones, objetos arrays y muchas m谩s cosas.

Originalmente se usaba la palabra reservada, pero ya no es tan recomendable usarla por temas de scope o alcance

var

Por lo tanto en ES6 se implementaron nuevas formas de declarar variables y no solo variables si no tambi茅n constantes.

Cuando us谩bamos var pod铆amos re-asignar una variable normalmente

var lastName = 'David';
lastName = 'Oscar';

Si hacemos lo mismo con let podemos tener el mismo resultado

let fruit = 'Apple';
fruit = 'Kiwi';

Pero mira lo que pasa cuando intentamos hacer esto con const

const animal = 'Dog';
animal = 'Cat'; // ERROR!

Es precisamente por que const es especialmente para valores que se mantendr谩n tanto con el mismo tipo de dato y el mismo valor.

Por lo cual no podemos alterar una constante por que es un valor que no cambia con el tiempo, como por ejemplo el nombre de una persona.

Hagamos un ejemplo en el cual vamos a entrar en varios bloques de c贸digo, recuerda que el scope de las variables se refiere en que 谩mbito se declara si es global o local

const fruits = () => {
	if (true) {
		var fruit1 = 'Apple';
		let fruit2 = 'Kiwi';
		const fruit3 = 'Banana';
	}
}

Ahora tenemos 2 variables declaradas 1 una constante vamos a mostrarlas en consola para ver los resultados

const fruits = () => {
	if (true) {
		var fruit1 = 'Apple';
		let fruit2 = 'Kiwi';
		const fruit3 = 'Banana';
	}
	console.log(fruit1);
	console.log(fruit2);
	console.log(fruit3);
}

Si ejecutas esta funci贸n tendr谩s un resultado en la consola primero diciendo 鈥淎pple鈥 porque var no est谩 en un contexto local sino global por lo cual se mostrar谩 en consola, pero con let y const no veras un resultado si no un error diciendo que 鈥渇ruit2 y fruit3鈥 no est谩n definidos porque let y const son de contexto bloque.

ReferenceError: fruit2 is not defined

Esta es una de las razones por las cuales var no se emplea mucho porque puede generar algunos errores y confusiones en tu c贸digo, para esto espec铆ficamente fueron introducidas let y const.

Arrow functions

Las arrow functions o funciones flecha tienen una sintaxis como esta

const nombre = (texto) => {
	return texto
};
nombre('Holap');

La sintaxis anterior es lo mismo que hacer esto

function nombre (texto) {
	return texto
};
nombre('Holap');

Parece un poco m谩s larga no? pero ya ver谩s como su sintaxis se ir谩 haciendo m谩s escalable y c贸moda para nosotros, pero tienes que tener en cuenta que las funciones flecha no incluyen algunas funcionalidades que tienen las funciones declaradas con function.

Veamos algunas funciones extras de las arrow functions

  • Retorno directo

Cu谩ndo quieres retornar solo 1 cosa y no tienes un bloque de c贸digo puedes retornar valores autom谩ticamente de esta forma

const nombre = (texto) => texto;
nombre('Holap'); // Holap

La flecha se usa como valor de retorno directo de la funci贸n, as铆 mismo lo hacemos en React cuando queremos retornar JSX solamente.

  • 1 solo par谩metro

Cuando tienes 1 solo par谩metro no es necesario poner los par茅ntesis por lo cual la sintaxis se reduce mas

const nombre = texto => texto;

nombre('Hoalp'); // Holap

Para los que quieren el mismo color de letras, color de fondo y fuentes (m谩s que todo en las flechas) de vscode que tiene nuestro buen profe oscar, es con la extensi贸n de SynthWave '84, y para las flechas es mirando el repositorio de GitHub "Fira Code" (lean la documentaci贸n, en la parte de como instalar y como configurar en vscode)

https://github.com/tonsky/FiraCode

Encontr茅 esta observaci贸n

Buena clase, vengo del curso de Closures y estos conceptos se explican m谩s a detalle, solo un detalle, el profe menciona en el 14:15 que 鈥渘um鈥 es un argumento, pero cuando se crea una funci贸n, esto se llama par谩metro y los argumentos son los valores que se pasan a la funci贸n cuando se la invoca posteriormente.

Escribi un post sobre la diferencia entre var, let y const, sus ventajas y desventajas. Espero que les ayude <https://darkusphantom.com/programacion/cual-es-la-diferencia-entre-var-let-y-const-en-javascript/>

Hoisting: En la compilaci贸n eleva todas las variables y funciones para guardarlas en memoria y luego ejecuta el c贸digo. Pero solo inicializa var. Por lo que su ejecuci贸n dar谩 undefined y las dem谩s error

yo no he utilizado realmente las arrow functions, si las he visto en distintos cursos pero con 茅sta informaci贸n espero usarla m谩s en mi c贸digo

![](https://static.platzi.com/media/user_upload/code-0b45f235-05ff-430f-a56b-6f546b703336.jpg)

Vengo por ac谩 a dejar este video que deja un panorama m谩s claro sobre cu谩l de las 3 opciones usar.

Arrow function fue un beso de los dioses(para nosotros los noobs 馃槮)

la function square la primera y la segunda solo cambio por la flecha

deberia de ponerle nombres a las variables y las funciones en espa帽ol . al declararlas

y esta ==> que hace que funcion tiene

he vivido un D茅j脿 vu con esta secci贸n del curso, pero igual es muy buena la clase 馃槂

// Funciones Flecha
/* 
Una expresion de funcion flecha es una alternativa compacta a una expresion de funcion tradicional, pero es limitada y no se puede urilixar en todas las situaciones 
*/

// Diferencias y limitaciones
/*
脳 No tiene sus propios en laces a this o super y no se debe usar como metodos
脳 No tiene argumetnos o palabras clave new.target
脳 No apta para metodos call, applu y bind, que generalmente se basan en stablecer un ambito o enlace
脳 No se puede utilizar como constructor
脳 No se pueden utilizar yield dedntro de su cuerpo
*/

// Funcion de toda la vida
function square(num) {
    return num * num;
}

// Con las arrow functions podemos hacer uso de las palabras 'let', 'var' y 'const' recomendable siempre usar const
const square = (num) => {
    return num * num;
}

// Se puede hacer con un return implicito, no hay necesidad de usar {} o (), si abra varias lineas o logica dentro del bloque si e necesario usar return y {}
const square = num => num * num;

馃摎 Archivos del proyecto 馃摎


Pasos: 馃搶

  • 鈥 Abrir la terminal presionando las teclas Ctrl + Alt + t
  • 鈥 Crear la carpeta del proyecto colocando en la terminal:
take project-ecma

  • 鈥 Colocar en la terminal:
git init -y
npm init
code .

  • 鈥 Al abrir VS Code, crear una carpeta llamada: src, luego otra carpeta llamada: es6
    • 鈥 Dentro de la carpeta es6, crear el archivo: 00-let-const.js
      鈼 El c贸digo de todos los ejercicios son:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
var lastName = 'David';
lastName = 'Oscar';
console.log(lastName);

//output: Oscar

//Ejercicio #2
let fruit = 'Kiwi';
console.log(fruit);

const animal = 'Dog';
animal = 'Cat';
console.log(animal);

/*output:
animal = 'Cat';
^
TypeError: Assignment to constant variable.
*/

//Ejercicio #3
const fruits = () => {
	if(true){
		var fruit1 = 'Apple'; //function scope
		let fruit2 = 'Kiwi'; //block scope
		const fruit3 = 'Banana'; //block scope
	}
	console.log(fruit1);
	console.log(fruit2);
	console.log(fruit3);
}

fruits();

/*output:
console.log(fruit2);
^

ReferenceError: fruit2 is not defined
*/

  • 鈥 Dentro de la carpeta es6, crear el archivo: 01-arrow-function.js
    • 鈼 El c贸digo de todos los ejercicios son:
//funci贸n
function square(num){
	return num * num;
}

//funci贸n de tipo arrow function
const square = (num) => {
	return num * num;
}

//funci贸n con el retur expl铆cito
const square = num => num * num;

//output: si se ejecutan todas, las salidas son iguales

Oscar es un gran profesor!

la verdad que no. No me gusta esta forma de simplificar. No me gusta perder la logica en la lectura misma

馃帀 Se aprendi贸 sobre el alcance de let, const y var y sobre las arrow function uwu

la nueva forma de escribir funci贸n, no deber铆an de darle tantas vueltas, en un lamba

Por si quieren ver un contenido extra, el profe Sasha explica tambien el tema de let y const para complementar esta clase un poco; https://www.youtube.com/watch?v=bvkY9ey83yY&ab_channel=LaCocinadelC贸digo

Es par谩metro, no argumento. Par谩metro cuando inicializamos la funci贸n. Argumento cuando llamamos a la funci贸n.

4/35 ES6: let y const, y arrow functions

Desde ECMAScript 6 de 2015 se encuentra la nueva forma de declaraci贸n de variables con let, const y las funciones flecha.

Las palabras reservadas let y const permiten declarar variables de una forma m谩s precisa y clara que con var.

La principal diferencia entre var, let y const es la forma en que manejan la redeclaraci贸n y re-asignaci贸n de variables.

Una variable declarada con:

  • var : puede ser re-declarada y re-asignada
  • let: puede ser re-asignada pero no re-declarada
  • const: no puede ser re-asignada ni redeclarada.
let age = 30;
const name = "jhon";

Las funciones flecha: son una forma m谩s corta y expresiva de escribir funciones an贸nimas en JavaScript. La sintaxis de las funciones flecha utiliza la flecha 鈬 para indicar que es una funci贸n y puede omitir las llaves y la palabra reservada return.

Adem谩s el alcance de las variables en las funciones flecha se comporta de manera diferente a las funciones tradicionales

const add = (a, b) => a + b;
const square = num => num + num;
const greet = name => 'Hello ${name}!';

Let y const tienen un scope de bloque, mientras que var no.

Las variables declaradas con let y const no se guardan en el objeto global.

Tambi茅n se pueden omitir los par茅ntesis en las funciones flechas cuando hay un solo par谩metro y se puede usar el retorno impl铆cito cuando la funci贸n solo contiene una expresi贸n.

Scopes en JavaScript

En JavaScript, un scope define la accesibilidad y visibilidad de las variables y funciones en una determinada parte del c贸digo. Hay tres tipos principales de scopes en JavaScript:
Scope Global

El scope global es el alcance m谩s amplio en JavaScript y se refiere a todas las variables y funciones que se pueden acceder desde cualquier parte del c贸digo. Las variables y funciones globales se declaran fuera de cualquier funci贸n o bloque de c贸digo y se pueden acceder desde cualquier funci贸n o bloque en el c贸digo. Las variables y funciones globales son 煤tiles para almacenar datos que deben ser accesibles en todo el c贸digo, pero tambi茅n pueden ser peligrosas porque pueden ser modificadas desde cualquier parte del c贸digo, lo que puede provocar errores dif铆ciles de depurar.
Scope Local

El scope local se refiere a las variables y funciones que solo son accesibles dentro de una funci贸n o bloque de c贸digo. Las variables y funciones locales se declaran dentro de una funci贸n o bloque y solo se pueden acceder dentro de la misma funci贸n o bloque. El scope local es 煤til porque permite encapsular variables y funciones para que no sean modificadas por otras partes del c贸digo.
Scope de Bloque

El scope de bloque es una caracter铆stica introducida en ECMAScript 6 que se refiere a las variables que solo son accesibles dentro de un bloque de c贸digo. Un bloque de c贸digo se define entre llaves { } y puede ser una funci贸n, un bucle o un condicional. Las variables declaradas con let y const en un bloque de c贸digo solo pueden ser accedidas dentro del mismo bloque, lo que evita que se modifiquen accidentalmente en otras partes del c贸digo.

// Declaraci贸n de una variable global
var globalVariable = "Soy una variable global";

// Declaraci贸n de una funci贸n global
function globalFunction() {
  console.log("Soy una funci贸n global");
}

// Acceso a la variable y funci贸n global desde cualquier parte del c贸digo
console.log(globalVariable);
globalFunction();
// Declaraci贸n de una funci贸n con una variable local
function localFunction() {
  var localVariable = "Soy una variable local";
  console.log(localVariable);
}

// Acceso a la variable local solo dentro de la funci贸n
localFunction();
// Esto generar谩 un error, ya que la variable localVariable no est谩 definida fuera de la funci贸n
console.log(localVariable);
// Declaraci贸n de una variable con let dentro de un bloque de c贸digo
if (true) {
  let blockScopedVariable = "Soy una variable con scope de bloque";
  console.log(blockScopedVariable);
}

// Esto generar谩 un error, ya que la variable blockScopedVariable no est谩 definida fuera del bloque de c贸digo
console.log(blockScopedVariable);

Usamos el mismo rat贸n 馃槂

Nuevas caracter铆sticas en ES6 descritas en W3school.

The let keyword
The const keyword
Arrow Functions
The 鈥 Operator
For/of
Map Objects
Set Objects
Classes
Promises
Symbol
Default Parameters
Function Rest Parameter
String.includes()
String.startsWith()
String.endsWith()
Array.from()
Array keys()
Array find()
Array findIndex()
New Math Methods
New Number Properties
New Number Methods
New Global Methods
Object entries
JavaScript Modules

鈿狅笍馃洃 Consejo 馃洃鈿狅笍

Si por alguna raz贸n, cuando ejecutes el c贸digo en vscode con la extensi贸n del code runner, no te despliega el output de la consola, y te tira una alerta en la esquina inferior derecha.
Prueba cerrar y volver abrir vscode, quiz谩s alguna dependencia no se instal贸 correctamente y necesita reinicio del programa.

En mi caso tambi茅n desinstal茅 la extensi贸n y luego volv铆 a reiniciar el vscode y ya funcion贸 correctamente.
隆隆Suerte!!

let y const llegaron a poner un poco de orden 馃憦

Ahora si viene lo chido

LET & CONST


// VAR
var var1 = 'var';
console.log(var1);

//LET
//added in ES6 its scope is limited to the block where it is declared
//and it cannot be redeclared in its scope
let let1 = 'let';
console.log(let1);

//CONST
//added in ES6 its content can be defined only when it's declared and 
//after that it can't changed and can't be redifined, its scope is similar to the LET
const const1 = 'const';
console.log(const1);


//An example of the scope
const func = () => {
    if(true){
        var a = 'a';
        let b = 'b';
        const c = 'c';
    }
    console.log(a);
    console.log(b);
    console.log(c);
}

func()

Arrow functions

//A traditional function
function square1(num){
    return num * num;
}

//An arrow function
const square2 = (num) => {
    return num * num;
}

//An arrow function with an intrinsic return
const square3 = num => num * num;

console.log(square1(2));
console.log(square2(2));
console.log(square3(2));

Personalmente creo que Oscar es uno de los mejores profes!!

鈿狅笍鉁 Soluci贸n por si te da error al ejecutar el JS en Visual.
Error del tipo: 鈥渘ode鈥 no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

Este problema sucede debido a que no tienes node instalado en tu sistema operativo principal. (WSL) no cuenta, si lo instalaste con el comando sudo apt install nodejs

Pasos que tienes que hacer

  • PRIMER PASO tienes que verificar si efectivamente node est谩 instalado en tu computadora. Yo fui a mis programas y comprob茅 que no hab铆a nada relacionado (debido a que yo lo desinstale, y no lo recordaba, ya que si cursaste la ruta en orden, recordar谩s que node.js lo instalamos en el Curso de Prework AQU脥).
  • Pero bien, si t煤 lo tuvieses instalado, deber铆an aparecer estos paquetes en tus programas:

En caso de que los tengas instalado, amigo, no s茅 cu谩l es el problema. Lo siento 馃槮 馃挃 .
Pero, en caso de que no:

  • SEGUNDO PASO: debes irte al website de Node.js AQUi. Y tienes que descargar la una versi贸n seg煤n tu SO. Y te recomiendo que descargues como .msi
    Una vez descargado, le das doble click y vas d谩ndole aceptar a todo (yo eso hice). Y luego se abrir谩 t煤 cmd, d谩ndote ciertos avisos, del proceso que se ejecutar谩 a continuaci贸n. Das enter a todo y te abrir谩 tu PoweShell, y empezar谩 su descarga e instalaci贸n de paquetes (Creo que eso hace xD).
  • Y 脷LTIMO PASO, por si acaso, reinicias, y compruebas el c贸digo ejecut谩ndolo.

    隆隆隆Y LISTO!!! 馃コ馃コ馃コ

A mi me di贸 resultado, solo sigo teniendo el aviso de: 鈥淐MD.EXE se inici贸 con est谩 rut鈥 bla bla bla鈥 Tengo que ver como soluciono eso, pero lo principal ya funciona.
Espero te sirva :3 鉂わ笍

Aqu铆 les dejo un excelente video sobre las arrow function que te aclararan todas las dudas que tengas:

https://www.youtube.com/watch?v=c3LMuRmMonk&t=439s



//Las nuevas palabras reservadas para generar variables en JS 
//con el ecmascript6 introdujo cons y var

//Declarar, asignar y reasignar veremos que implica en cada uno. 

var lastname = "Lovelace"; //Declaramos e inicializamos(le asignamos un valor inicial).
lastname = "Camelo"; //Aqu铆 lo que hacemos es reasignar. 
console.log(lastname);  //Output: Camelo

//Utilizamos let
let fruit = "apple"; 
fruit = "watermelon"; //Con let podemos reasignar pero dentro del mismo scope
console.log(fruit); //Output: watermelon

//Utilizamos const
const animal = "Lion"
animal = "Tiger" //Si reasignamos con la palabra reserveda const nos saldr谩 un error
console.log(animal); //Output TypeError: Assignment to constant variable.


Repositorio github del profe 鈫 Archivos manejados en la clase:

Principal ventaja de las arrow function

  1. Pueden ser m谩s cortas
 function getRandomId(max){
    return Math.floor(Math.random() * (max - 1) + 1);
}

<code> 
const getRandomId = (max) =>  Math.floor(Math.random() * (max - 1) + 1)
<code> 

Apunte en Notion

Por que a veces debemos retornar una funci贸n as铆.() => { }
Y otras veces con () => ()

De qu茅 depende esto ?

Con las llaves "{}" no regresas nada, solo puedes hacer l贸gica y tienes que poner un return expl铆cito

Mientras que con los par茅ntesis ya est谩s retornando lo que pases por ah铆

Un claro ejemplo son los componentes de react que puedes retornarlos con una estructura definida

Ejemplo

/* Tenemos un array */
let arr = [1,2,3,4]

/* Solo hacemos  logica  no tenemos un return */
let newArr  = arr.map((num) => {
  num * 2
})

// Esto no te retornar铆a nada, mientras que lo siguiente s铆 (con el return explicito)

let newArr  = arr.map((num) => {
 return num * 2
})

// Y lo anterior es lo mismo que lo siguiente 馃憞馃徎

let newArr  = arr.map((num) => num * 2) 

Aprendiendo de los mejores

function square(num){
    return num * num;
}

const square = (num) => {
    return num * num;
}

const square = num => num * num;