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 “variable ya declarada”; por otro lado, si intentas re-asignar una variable declarada con const existirá un “error 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?

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 “Fira 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 “editor.fontLigatures” = true (editando el settings.JSON de vscode)

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

ES6 (2015)

A partir de esta versión se hace referencia a “El 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
}

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;

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?

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 “Apple” 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 “fruit2 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 “num” 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

**arrow functions:** Ofrece una manera diferente de declarar una función, en JS existe la función tradicional: function funcionNormal(numero) { return numero \* numero; } Arrow function: const arrowFunction = numero => numero \* numero; El resultado siempre será el mismo, sin embargo para usar este tipo de funciones, debemos de tomar en cuenta que : * No tiene sus propios enlaces a this o super y no se debe usar como [métodos](https://developer.mozilla.org/es/docs/Glossary/Method). * No tiene argumentos o palabras clave new.target. * No apta para los métodos call, apply y bind, que generalmente se basan en establecer un [ámbito o alcance](https://developer.mozilla.org/es/docs/Glossary/Scope) * No se puede utilizar como [constructor](https://developer.mozilla.org/es/docs/Glossary/Constructor). * No se puede utilizar yield dentro de su cuerpo.
**let y const:** Dos nuevas palabras reservadas incorporadas en esta versión de JS, su escope es por bloques. · **let:** puede ser reasignada en otra línea del código siempre y cuando este en su bloque de código donde ha sido declarada. · **const:** es lo equivalente a una constante en cualquier otro lenguaje de programación, una vez asignado el valor, no se podrá reasignar en ningún otro momento dentro de su respectivo bloque de 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: “node” 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: “CMD.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;