You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Arrow functions are not just a "shorthand" for writing small stuff.
5
+
Las funciones de flecha no son solo una "taquigrafía" para escribir pequeñas cosas. Tienen algunas características muy específicas y útiles.
6
6
7
-
JavaScript is full of situations where we need to write a small function, that's executed somewhere else.
7
+
JavaScript está lleno de situaciones en las que necesitamos escribir una pequeña función que se ejecuta en otro lugar.
8
8
9
-
For instance:
9
+
Por ejemplo
10
10
11
-
-`arr.forEach(func)` -- `func`is executed by`forEach`for every array item.
12
-
-`setTimeout(func)` -- `func`is executed by the built-in scheduler.
13
-
- ...there are more.
11
+
-`arr.forEach(func)` -- `func`es ejecutado por`forEach`para cada elemento del array.
12
+
-`setTimeout(func)` -- `func`es ejecutado por el planificador incorporado.
13
+
- ...y muchas más.
14
14
15
-
It's in the very spirit of JavaScript to create a function and pass it somewhere.
15
+
Está en el espíritu de JavaScript crear una función y pasarla a algún otro lugar.
16
16
17
-
And in such functions we usually don't want to leave the current context.
17
+
Y en tales funciones, por lo general, no queremos abandonar el contexto actual. Ahí es donde las funciones de flecha son útiles.
18
18
19
-
## Arrow functions have no "this"
19
+
## Las funciones de flecha no tienen "this"
20
20
21
-
As we remember from the chapter <info:object-methods>, arrow functions do not have `this`. If `this` is accessed, it is taken from the outside.
21
+
Como recordamos del capítulo <info:object-methods>, las funciones de flecha no tienen `this`. Si se accede a `this`, se toma el contexto del exterior.
22
22
23
-
For instance, we can use it to iterate inside an object method:
23
+
Por ejemplo, podemos usarlo para iterar dentro de un método de objeto:
24
24
25
25
```js run
26
26
let group = {
@@ -39,9 +39,9 @@ let group = {
39
39
group.showList();
40
40
```
41
41
42
-
Here in`forEach`, the arrow function is used, so `this.title`in it is exactly the same as in the outer method `showList`. That is: `group.title`.
42
+
Aquí en`forEach`, se utiliza la función de flecha, por lo que `this.title`es exactamente igual que en el método externo `showList`. Es decir: `group.title`.
43
43
44
-
If we used a "regular" function, there would be an error:
44
+
Si usáramos una función "regular", habría un error:
45
45
46
46
```js run
47
47
let group = {
@@ -61,28 +61,28 @@ let group = {
61
61
group.showList();
62
62
```
63
63
64
-
The error occurs because `forEach`runs functions with`this=undefined`by default, so the attempt to access `undefined.title` is made.
64
+
El error se produce porque `forEach`ejecuta funciones con`this = undefined`de forma predeterminada, por lo que se intenta acceder a `undefined.title`.
65
65
66
-
That doesn't affect arrow functions, because they just don't have`this`.
66
+
Eso no afecta las funciones de flecha, porque simplemente no tienen`this`.
67
67
68
-
```warn header="Arrow functions can't run with`new`"
69
-
Not having`this`naturally means another limitation: arrow functions can't be used as constructors. They can't be called with`new`.
68
+
```warn header="Las funciones de flecha no pueden ejecutarse con`new`"
69
+
No tener`this`naturalmente significa otra limitación: las funciones de flecha no pueden usarse como constructores. No se pueden llamar con`new`.
70
70
```
71
71
72
-
```smart header="Arrow functions VS bind"
73
-
There's a subtle difference between an arrow function `=>` and a regular function called with `.bind(this)`:
72
+
```smart header="Funciones de flecha VS bind"
73
+
Hay una sutil diferencia entre una función de flecha `=>` y una función regular llamada con `.bind(this)`:
74
74
75
-
- `.bind(this)` creates a "bound version" of the function.
76
-
- The arrow `=>` doesn't create any binding. The function simply doesn't have `this`. The lookup of `this` is made exactly the same way as a regular variable search: in the outer lexical environment.
75
+
- `.bind(this)` crea una "versión enlazada" de la función.
76
+
- La flecha `=>` no crea ningún enlace. La función simplemente no tiene `this`. La búsqueda de 'this' se realiza exactamente de la misma manera que una búsqueda de variable regular: en el entorno léxico externo.
77
77
```
78
78
79
-
## Arrows have no "arguments"
79
+
## Las flechas no tienen "argumentos"
80
80
81
-
Arrow functions also have no `arguments` variable.
81
+
Las funciones de flecha tampoco tienen variable`argumentos`.
82
82
83
-
That's great for decorators, when we need to forward a call with the current`this`and `arguments`.
83
+
Eso es genial para los decoradores, cuando necesitamos reenviar una llamada con el actual`this`y `argumentos`.
84
84
85
-
For instance, `defer(f, ms)`gets a function and returns a wrapper around it that delays the call by `ms`milliseconds:
85
+
Por ejemplo, `defer(f, ms)`obtiene una función y devuelve un contenedor que retrasa la llamada en `ms`milisegundos:
86
86
87
87
```js run
88
88
functiondefer(f, ms) {
@@ -96,10 +96,10 @@ function sayHi(who) {
96
96
}
97
97
98
98
let sayHiDeferred =defer(sayHi, 2000);
99
-
sayHiDeferred("John"); // Hello, John after 2 seconds
99
+
sayHiDeferred("John"); // Hello, John después de 2 segundos
100
100
```
101
101
102
-
The same without an arrow function would look like:
102
+
Lo mismo sin una función de flecha se vería así:
103
103
104
104
```js
105
105
functiondefer(f, ms) {
@@ -112,15 +112,15 @@ function defer(f, ms) {
112
112
}
113
113
```
114
114
115
-
Here we had to create additional variables `args`and`ctx`so that the function inside `setTimeout`could take them.
115
+
Aquí tuvimos que crear variables adicionales `args`y`ctx`para que la función dentro de `setTimeout`pudiera tomarlas.
116
116
117
-
## Summary
117
+
## Resumen
118
118
119
-
Arrow functions:
119
+
Funciones de flecha:
120
120
121
-
-Do not have `this`.
122
-
-Do not have `arguments`.
123
-
-Can't be called with `new`.
124
-
-(They also don't have `super`, but we didn't study it. Will be in the chapter<info:class-inheritance>).
121
+
-No tienen `this`
122
+
-No tienen argumentos
123
+
-No se pueden llamar con `new`
124
+
-Tampoco tienen `super`, que aún no hemos estudiado. Lo veremos en el capítulo<info:class-inheritance>
125
125
126
-
That's because they are meant for short pieces of code that do not have their own "context", but rather works in the current one. And they really shine in that use case.
126
+
Esto se debe a que están diseñadas para piezas cortas de código que no tienen su propio "contexto", sino que funcionan en el actual. Y realmente brillan en ese caso de uso.
0 commit comments