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
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/1-intro/article.md
+1Lines changed: 1 addition & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -113,6 +113,7 @@ Ejemplos de tales lenguajes:
113
113
-[TypeScript](http://www.typescriptlang.org/) se concentra en agregar "tipado estricto" ("strict data typing") para simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por Microsoft.
114
114
-[FLow](https://flow.org/) también agrega la escritura de datos, pero de una manera diferente. Desarrollado por Facebook.
115
115
-[Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que no son de navegador (como aplicaciones móviles), pero que también se puede convertir/transpilar a JavaScript. Desarrollado por Google.
116
+
-[Brython](https://brython.info/) es un transpilador de Python a JavaScript que permite escribir aplicaciones en Python puro sin JavaScript.
116
117
117
118
Hay mas. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender qué estamos haciendo.
La lógica descrita arriba es algo clásica. Ahora, mostremos las características "extra" de JavaScript.
70
70
@@ -90,75 +90,61 @@ Por ejemplo:
90
90
91
91
```js run
92
92
alert(1||0); // 1 (1 es un valor verdado)
93
-
alert(true||"cualquier valor"); // (true es un valor verdadero)
94
93
95
94
alert(null||1); // 1 (1 es el primer valor verdadero)
96
95
alert(null||0||1); // 1 (el primer valor verdadero)
96
+
97
97
alert(undefined||null||0); // 0 (todos son valores falsos, retorna el último valor)
98
98
```
99
99
100
100
Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo booleanos".
101
101
102
-
1.**Consiguiendo el primer valor verdadero de una lista de variables o expresiones.**
102
+
1.**Obtener el primer valor verdadero de una lista de variables o expresiones.**
103
103
104
-
Imagina que tenemos múltiples variables que pueden contener datos o bien ser `null/undefined`. ¿Cómo podemos encontrar el primer valor que contenga datos?
104
+
Por ejemplo, tenemos las variables `firstName`, `lastName` y `nickName`, todas opcionales.
105
105
106
-
Podemos usar OR `||`:
106
+
Usemos OR `||` para elegir el que tiene los datos y mostrarlo (o anónimo si no hay nada configurado):
107
107
108
108
```js run
109
-
let currentUser =null;
110
-
let defaultUser ="John";
109
+
let firstName ="";
110
+
let lastName ="";
111
+
let nickName ="SuperCoder";
111
112
112
113
*!*
113
-
let name = currentUser||defaultUser||"sin nombre";
alert( name ); // selecciona "John" – el primer valor verdadero
117
116
```
118
117
119
-
Si tanto `currentUser` como `defaultUser` hubieran sido valores falsos, `"sin nombre"` hubiera sido el resultado.
120
-
121
-
2.**Evaluación de cortocircuito.**
118
+
Si todas las variables fueran falsas, aparecería Anónimo.
122
119
123
-
Los operandos no solo pueden ser valores, sino que tambien expresiones arbitrarias. OR los evalua y comprueba de izquierda a derecha. La evaluación termina cuando un valor verdadero es alcanzado, y dicho valor es retornado. Este proceso es llamado "evaluación de cortocircuito" porque avanza lo menos posible de izquierda a derecha.
120
+
2.**Evaluación del camino más corto.**
124
121
125
-
Esto se ve claramente cuando la expresión dada como segundo argumento tiene un efecto secundario como una asignación de variable.
122
+
Otra característica de OR || operador es la evaluación de "el camino más corto".
126
123
127
-
En el ejemplo debajo, `x` no es asignada:
124
+
Esto significa que `||` procesa sus argumentos hasta que se alcanza el primer valor verdadero, y luego el valor se devuelve inmediatamente, sin siquiera tocar el otro argumento.
128
125
129
-
```js run no-beautify
130
-
let x;
126
+
La importancia de esta característica se vuelve obvia si un operando no es solo un valor, sino una expresión con un efecto secundario, como una asignación de variable o una llamada a función.
131
127
132
-
*!*true*/!*|| (x =1);
133
-
134
-
alert(x); // undefined, porque (x = 1) no es evaluado.
135
-
```
128
+
En el siguiente ejemplo, solo se imprime el segundo mensaje:
136
129
137
-
Si, en cambio, el primer argumento fuera `false`, `||` evaluaría el segundo, realizando la asignación.
138
-
139
-
```js run no-beautify
140
-
let x;
141
-
142
-
*!*false*/!*|| (x =1);
143
-
144
-
alert(x); // 1
145
-
```
130
+
```js run no-beautify
131
+
*!*true*/!*||alert("not printed");
132
+
*!*false*/!*||alert("printed");
133
+
```
146
134
147
-
Una asignación es un caso simple. Puede haber efectos secundarios, los cuales no se notarán si la evaluación no los alcanza.
135
+
En la primera línea, el operador OR `||` detiene la evaluación inmediatamente después de ver que es verdadera, por lo que la alerta no se ejecuta.
148
136
149
-
Como podemos ver, tal caso de uso es una "manera más corta de usar `if`". El primer operando es convertido a booleano. Si el primero es falso, el segundo sera evaluado.
150
-
151
-
La mayor parte del tiempo, es mejor usar un `if` "normal" para mantener el código fácil de entender, pero a veces esto puede ser útil.
137
+
A veces, las personas usan esta función para ejecutar comandos solo si la condición en la parte izquierda es falsa.
152
138
153
139
## && (AND)
154
140
155
-
El operador AND es representado con `&&`:
141
+
El operador AND es representado con dos ampersands `&&`:
156
142
157
143
```js
158
144
result = a && b;
159
145
```
160
146
161
-
En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y falso en cualquier otro caso.
147
+
En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y `false` en cualquier otro caso.
162
148
163
149
```js run
164
150
alert(true&&true); // true
@@ -186,7 +172,7 @@ if (1 && 0) { // evaluado como true && false
186
172
}
187
173
```
188
174
189
-
## AND encuentra el primer valor verdadero
175
+
## AND "&&" encuentra el primer valor falso
190
176
191
177
Dado múltiples valores aplicados al operador AND:
192
178
@@ -236,16 +222,18 @@ La precedencia del operador AND `&&` es mayor que la de OR `||`.
236
222
237
223
Así que el código `a && b || c && d` es básicamente el mismo que si la expresiones `&&` estuvieran entre paréntesis: `(a && b) || (c && d)`
238
224
```
225
+
```
239
226
240
-
Justo como en OR, el operador AND `&&` puede reemplazar en ocasiones al `if`.
227
+
````warn header="No remplace *if* con || or &&"
228
+
A veces, la gente usa el operador AND `&&` como una "forma más corta de escribir `if`".
241
229
242
230
Por ejemplo:
243
231
244
232
```js run
245
233
let x = 1;
246
234
247
-
(x > 0) && alert("Mayor que cero!");
248
-
````
235
+
(x > 0) && alert( 'Greater than zero!' );
236
+
```
249
237
250
238
La acción en la parte derecha de `&&` sería ejecutada sólo si la evaluación la alcanza. Eso es, solo si `(x > 0)` es verdadero.
251
239
@@ -258,10 +246,8 @@ if (x > 0) {
258
246
alert("Mayor que cero!");
259
247
}
260
248
```
261
-
262
-
La variante con `&&` parece más corta. Pero `if` es más obvio y tiende a ser un poco más legible.
263
-
264
-
Así que recomendamos usar cada construcción para su propósito: usar `if` si queremos if y usar `&&` si queremos AND.
249
+
Aunque la variante con `&&` parece más corta, `if` es más obvia y tiende a ser un poco más legible. Por lo tanto, recomendamos usar cada construcción para su propósito: use `if` si queremos si y use` && `si queremos AND.
Copy file name to clipboardExpand all lines: 1-js/05-data-types/04-array/article.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -193,7 +193,7 @@ Un array es una clase especial de objeto. Los corchetes usados para acceder a un
193
193
194
194
Ellos extienden los objetos proveyendo métodos especiales para trabajar con colecciones ordenadas de datos y también la propiedad `length`. Pero en el corazón es aún un objeto.
195
195
196
-
Recuerda, hay solo 7 tipos basicos en JavaScript. Array es un objeto yse comporta como un objeto..
196
+
Recuerde, solo hay ocho tipos de datos básicos en JavaScript (consulte el capítulo [Tipos de datos] (https://javascript.info/types) para obtener más información). Array es un objeto y, por tanto, se comporta como un objeto.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/03-closure/article.md
+7-3Lines changed: 7 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,15 @@
1
1
2
-
# Ámbito de Variable
2
+
# Ámbito de Variable y el concepto "closure"
3
3
4
-
JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Se puede crear una función dinámicamente, pasarla como argumento a otra función y llamarla desde un lugar de código totalmente diferente más adelante.
4
+
JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Una función se puede crear en cualquier momento, pasar como argumento a otra función y luego llamar desde un lugar de código totalmente diferente más tarde.
5
5
6
6
Ya sabemos que una función puede acceder a variables fuera de ella.
7
7
8
-
Ahora ampliemos nuestro conocimiento para incluir escenarios más complejos.
8
+
Pero, ¿qué sucede si estas variables "externas" cambian desde que se crea una función? ¿La función verá los valores nuevos o los antiguos?
9
+
10
+
Y si una función se pasa como parámetro y se llama desde otro lugar del código, ¿tendrá acceso a las variables externas en el nuevo lugar?
11
+
12
+
Ampliemos nuestro conocimiento para comprender estos escenarios y otros más complejos.
9
13
10
14
```smart header="Hablaremos de las variables let / const aquí"
11
15
En JavaScript, hay 3 formas de declarar una variable: `let`, `const` (las modernas) y `var` (más antigua).
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/05-global-object/article.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ El objeto global proporciona variables y funciones que están disponibles en cua
5
5
6
6
En un navegador se denomina `window`, para Node.js es` global`, para otros entornos puede tener otro nombre.
7
7
8
-
Recientemente, `globalThis`se agregó al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos. En algunos navegadores, como Chromium Edge, `globalThis` aún no es compatible, pero se puede usar mediante *polyfill*.
8
+
Recientemente, se agregó `globalThis`al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos al igual que con los principales navegadores.
9
9
10
10
Aquí usaremos `window`, suponiendo que nuestro entorno sea un navegador. Si su script puede ejecutarse en otros entornos, es mejor usar `globalThis` en su lugar.
11
11
@@ -83,7 +83,7 @@ if (!window.Promise) {
83
83
84
84
- El objeto global tiene un nombre universal: `globalThis`.
85
85
86
-
... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js). Como `globalThis` es una propuesta reciente, no es compatible con Chromium Edge (pero sí mediante *polyfill*).
86
+
... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js).
87
87
88
88
- Deberíamos almacenar valores en el objeto global solo si son verdaderamente globales para nuestro proyecto. Y manteniendo su uso al mínimo.
89
89
- En el navegador, a menos que estemos utilizando [módulos](info:modules), las funciones globales y las variables declaradas con `var` se convierten en una propiedad del objeto global.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
+2Lines changed: 2 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,8 @@ importance: 5
6
6
7
7
El resultado del decorador `debounce(f, ms)` es un contenedor que suspende las llamadas a `f` hasta que haya `ms` milisegundos de inactividad (sin llamadas, "período de enfriamiento"), luego invoca `f` una vez con los últimos argumentos.
8
8
9
+
En otras palabras, `debounce` es como una secretaria que acepta "llamadas telefónicas" y espera hasta que haya `ms` milisegundos de silencio. Y solo entonces transfiere la información de la última llamada al "jefe" (llama a la "f" real).
10
+
9
11
Por ejemplo, teníamos una función `f` y la reemplazamos con `f = debounce(f, 1000)`.
10
12
11
13
Entonces, si la función contenedora se llama a 0ms, 200ms y 500ms, y luego no hay llamadas, entonces la 'f' real solo se llamará una vez, a 1500ms. Es decir: después del período de enfriamiento de 1000 ms desde la última llamada.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
+2Lines changed: 2 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -12,6 +12,8 @@ La diferencia con *debounce* es que es un decorador completamente diferente:
12
12
-`debounce` ejecuta la función una vez después del período de `enfriamiento`. Es bueno para procesar el resultado final.
13
13
-`throttle` lo ejecuta no más de lo que se le da en el tiempo `ms`. Es bueno para actualizaciones regulares que no deberían ser muy frecuentes.
14
14
15
+
En otras palabras, "throttle" es como una secretaria que acepta llamadas telefónicas, pero molesta al jefe (llama a la "f" real) no más de una vez por milisegundos `ms`.
16
+
15
17
Revisemos una aplicación de la vida real para comprender mejor ese requisito y ver de dónde proviene.
16
18
17
19
**Por ejemplo, queremos rastrear los movimientos del mouse.**
Copy file name to clipboardExpand all lines: 1-js/08-prototypes/01-prototype-inheritance/article.md
+3Lines changed: 3 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -197,6 +197,9 @@ alert(admin.fullName); // John Smith (*)
197
197
198
198
// disparadores setter!
199
199
admin.fullName="Alice Cooper"; // (**)
200
+
201
+
alert(admin.fullName); // Alice Cooper , estado de admin modificado
202
+
alert(user.fullName); // John Smith , estado de user protegido
200
203
```
201
204
202
205
Aquí en la línea `(*)` la propiedad `admin.fullName` tiene un getter en el prototipo `user`, por lo que es llamado. Y en la línea `(**)` la propiedad tiene un setter en el prototipo, por lo que es llamado.
0 commit comments