Desde que conozco las arrow functions no las quiero dejar de utilizar 😁 #TeamArrowFunctions
Introducción
Historia de JavaScript: ¿qué es ECMAScript?
¿Qué es el TC39?
Configuracion
Configurando nuestras herramientas
¿Qué se implementó en ES6?
ES6: let y const, y arrow functions
ES6: strings
ES6: parámetros por defecto
ES6: asignación de desestructuración
ES6: spread operator
Playground: Combina objetos JSON con el Spread Operator
ES6: object literals
ES6: promesas
ES6: clases
ES6: module
Playground: Obtén una lista de películas
ES6: generator
Playground: Generador de identificadores para michis
ES6: set-add
¿Qué se implementó en ES7?
ES7: exponentiation operator y array includes
¿Qué se implementó en ES8?
ES8: object entries y object values
ES8: string padding y trailing commas
ES8: funciones asíncronas
¿Qué se implementó en ES9?
ES9: expresiones regulares
ES9: Promise.finally
¿Qué se implementó en ES10?
ES10: flat-map y trimStart-trimEnd
ES10: try catch y fromEntries
¿Qué se implementó en ES11?
ES11: optional chaining
ES11: BigInt y Nullish
ES11: Promise.allSettled
ES11: globalThis y matchAll
ES11: dynamic Import
¿Qué se implementó en ES12?
ES12: numeric-separators y replaceAll
ES12: promise-any y métodos privados
¿Qué se implementó en ES13?
ES13: at
ES13: top level await en el consumo de una API
Recapitulación
Performance
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Oscar Barajas Tavares
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.
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.
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:
var
puede ser re-declarada y re-asignada.let
puede ser re-asignada, pero no re-declarada.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.
// 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
.
const pi // SyntaxError: Missing initializer in const declaration.
pi = 3.14
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.
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.
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
En variables globales, let
y const
no 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.
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.
Si existe un solo parámetro, puedes omitir los paréntesis.
const porDos = num => {
return num * 2
}
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
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!
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
A partir de esta versión se hace referencia a “El gran cambio”
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 {}
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
//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();
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
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.
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
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.
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)
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.
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
Recursos complementarios 😄
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;
Ctrl + Alt + t
take project-ecma
git init -y
npm init
code .
src
, luego otra carpeta llamada: es6
es6
, crear el archivo: 00-let-const.js
//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
*/
es6
, crear el archivo: 01-arrow-function.js
//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
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:
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
// 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()
//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
En caso de que los tengas instalado, amigo, no sé cuál es el problema. Lo siento 😦 💔 .
Pero, en caso de que no:
.msi
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:
//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
function getRandomId(max){
return Math.floor(Math.random() * (max - 1) + 1);
}
<code>
const getRandomId = (max) => Math.floor(Math.random() * (max - 1) + 1)
<code>
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;
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?