1
00:00:01,215 --> 00:00:03,900
En esta conferencia, quiero hablar rápidamente sobre

2
00:00:03,900 --> 00:00:08,620
cómo funciona exactamente para pasar argumentos a funciones.

3
00:00:08,620 --> 00:00:11,410
Y esto se remonta al video que teníamos

4
00:00:11,410 --> 00:00:14,110
sobre primitivos versus objetos,

5
00:00:14,110 --> 00:00:15,980
que, recuerda, también llamamos

6
00:00:15,980 --> 00:00:19,000
tipos primitivos y tipos de referencia.

7
00:00:19,000 --> 00:00:21,950
Así que esta es una especie de revisión de esa conferencia,

8
00:00:21,950 --> 00:00:26,080
pero aplicado a funciones, porque es súper importante

9
00:00:26,080 --> 00:00:30,000
que entendemos realmente cómo las primitivas y los objetos

10
00:00:30,000 --> 00:00:32,503
trabajo en el contexto de las funciones.

11
00:00:34,240 --> 00:00:37,973
Entonces, dibujemos un ejemplo rápido y simple aquí.

12
00:00:39,100 --> 00:00:41,323
Así que establezcamos un número de vuelo aquí,

13
00:00:44,300 --> 00:00:45,950
234,

14
00:00:45,950 --> 00:00:47,683
y un objeto,

15
00:00:49,970 --> 00:00:52,440
que es básicamente un pasajero,

16
00:00:52,440 --> 00:00:54,640
que en este caso soy yo.

17
00:00:54,640 --> 00:00:56,980
Así que nombre, Jonas

18
00:00:59,050 --> 00:01:00,610
Schmedtmann,

19
00:01:00,610 --> 00:01:03,203
y luego algún número de pasaporte al azar.

20
00:01:05,430 --> 00:01:08,480
Así que digamos esto, y por cierto,

21
00:01:08,480 --> 00:01:12,650
Ya podría tener todo este código aquí como repetitivo,

22
00:01:12,650 --> 00:01:15,690
así en los archivos de inicio, pero creo firmemente

23
00:01:15,690 --> 00:01:18,430
que es mejor escribir el código aquí en un video,

24
00:01:18,430 --> 00:01:22,120
porque entonces te ves obligado a escribir el código tú mismo,

25
00:01:22,120 --> 00:01:24,220
y segundo, hace que los ejemplos

26
00:01:24,220 --> 00:01:26,590
mucho más fácil de entender.

27
00:01:26,590 --> 00:01:29,603
De todos modos, ahora quiero crear una función de registro.

28
00:01:32,560 --> 00:01:37,060
Entonces, básicamente cuando el pasajero ya ha

29
00:01:37,060 --> 00:01:40,060
compró el vuelo y luego está listo para facturar

30
00:01:40,060 --> 00:01:41,223
para tomar el vuelo,

31
00:01:42,386 --> 00:01:44,886
y luego digamos, ahí necesitamos un número de vuelo,

32
00:01:46,140 --> 00:01:49,110
y luego también un objeto pasajero,

33
00:01:49,110 --> 00:01:52,660
que contiene datos sobre el propio pasajero.

34
00:01:52,660 --> 00:01:55,793
Así que básicamente llamaríamos a esta función así.

35
00:01:59,040 --> 00:02:02,150
Entonces con el vuelo que ya tenemos aquí arriba,

36
00:02:02,150 --> 00:02:05,263
y el objeto Jonas, en este caso.

37
00:02:06,430 --> 00:02:10,570
Muy bien, este es nuestro vuelo, LH234.

38
00:02:10,570 --> 00:02:13,090
Y este es nuestro pasajero,

39
00:02:13,090 --> 00:02:17,000
pero ahora digamos que se cambió el número del vuelo.

40
00:02:17,000 --> 00:02:19,830
Y eso puede suceder en la función de registro.

41
00:02:19,830 --> 00:02:23,003
Y ahora cambiemos ese parámetro de número de vuelo aquí,

42
00:02:25,090 --> 00:02:27,600
y esto no suele ser una buena práctica para hacer,

43
00:02:27,600 --> 00:02:31,240
por lo que no debe cambiar los parámetros de una función,

44
00:02:31,240 --> 00:02:33,870
pero esto es solo para hacer un punto.

45
00:02:33,870 --> 00:02:35,490
Así que digamos que por alguna razón,

46
00:02:35,490 --> 00:02:38,923
el número ahora cambió a LH999,

47
00:02:40,090 --> 00:02:43,180
y también cambiaré el nombre del pasajero,

48
00:02:43,180 --> 00:02:45,530
y eso es porque en la aviación,

49
00:02:45,530 --> 00:02:49,100
por lo general siempre agregan un señor o una señora,

50
00:02:49,100 --> 00:02:51,253
delante del nombre, está bien.

51
00:02:52,360 --> 00:02:54,253
Así que hagámoslo, señor,

52
00:02:55,200 --> 00:02:57,223
y luego solo el nombre del pasajero.

53
00:02:59,580 --> 00:03:02,940
Así que estos son algunos cambios que hace la función de registro.

54
00:03:02,940 --> 00:03:05,150
Y luego, antes de registrarnos,

55
00:03:05,150 --> 00:03:08,193
solo verificará si el número de pasaporte es correcto.

56
00:03:09,100 --> 00:03:13,910
Así que digamos si el pasaporte del punto del pasajero

57
00:03:15,660 --> 00:03:18,640
es igual a este,

58
00:03:18,640 --> 00:03:20,780
y supongamos que esta función

59
00:03:20,780 --> 00:03:23,590
obtiene estos datos de alguna base de datos,

60
00:03:23,590 --> 00:03:26,713
que contiene los vuelos reservados, a la derecha,

61
00:03:28,510 --> 00:03:31,780
entonces en este caso, si el pasaporte es correcto,

62
00:03:31,780 --> 00:03:34,853
entonces vamos a alertar, registrarnos,

63
00:03:36,670 --> 00:03:37,563
Y además,

64
00:03:40,560 --> 00:03:41,393
alerta,

65
00:03:42,420 --> 00:03:44,993
pasaporte equivocado.

66
00:03:48,130 --> 00:03:50,090
Bien, y esta parte aquí hará

67
00:03:50,090 --> 00:03:52,590
un poco más de sentido al final de la conferencia.

68
00:03:53,430 --> 00:03:54,930
¿Bueno?

69
00:03:54,930 --> 00:03:57,720
Y ahora lo que quiero hacer es registrar tanto el vuelo

70
00:03:57,720 --> 00:04:00,220
y el objeto Jonas a la consola

71
00:04:00,220 --> 00:04:02,763
después de llamar a esta función de registro.

72
00:04:05,320 --> 00:04:07,633
Entonces, vuelo,

73
00:04:11,200 --> 00:04:13,040
y Jonás.

74
00:04:13,040 --> 00:04:14,110
Bueno.

75
00:04:14,110 --> 00:04:16,330
Y ahora, mientras guardo esto, ¿qué les parece?

76
00:04:16,330 --> 00:04:20,140
Qué va a pasar con estas dos variables aquí?

77
00:04:20,140 --> 00:04:22,250
¿Puedes tratar de anticiparlo?

78
00:04:22,250 --> 00:04:24,510
basado en el código que tenemos aquí?

79
00:04:24,510 --> 00:04:29,330
Entonces, de todos modos, veamos ahora, y aquí nos registramos,

80
00:04:29,330 --> 00:04:32,130
que por ahora no es muy importante,

81
00:04:32,130 --> 00:04:35,840
pero luego lo que obtenemos es el número de vuelo,

82
00:04:35,840 --> 00:04:38,810
que sigue siendo LH234,

83
00:04:38,810 --> 00:04:41,260
tan exactamente como lo definimos aquí,

84
00:04:41,260 --> 00:04:44,483
aunque parece que fue redefinido aquí,

85
00:04:45,470 --> 00:04:47,540
así que realmente no lo fue.

86
00:04:47,540 --> 00:04:50,750
Y luego también obtenemos el objeto Jonas,

87
00:04:50,750 --> 00:04:55,750
pero ahora el nombre se cambia de hecho a Sr. Jonas Schmedtmann.

88
00:04:56,070 --> 00:04:58,110
Y ese es este cambio aquí,

89
00:04:58,110 --> 00:05:01,393
eso sucedió dentro de la función, ¿verdad?

90
00:05:02,340 --> 00:05:05,340
Así que tal vez en realidad viste venir este resultado,

91
00:05:05,340 --> 00:05:07,950
porque en realidad hemos visto que esto sucede

92
00:05:07,950 --> 00:05:12,200
a veces antes, pero analicémoslo de todos modos.

93
00:05:12,200 --> 00:05:16,280
Así que este vuelo aquí es un tipo primitivo, ¿verdad?

94
00:05:16,280 --> 00:05:18,010
Es solo una cuerda.

95
00:05:18,010 --> 00:05:21,900
Y cuando pasamos ese valor a la función aquí abajo,

96
00:05:21,900 --> 00:05:25,110
entonces el número de vuelo aquí es básicamente una copia

97
00:05:25,110 --> 00:05:27,830
de ese valor original, ¿verdad?

98
00:05:27,830 --> 00:05:30,230
Así que el número de vuelo contiene una copia,

99
00:05:30,230 --> 00:05:34,970
y no simplemente el valor original de la variable vuelo.

100
00:05:34,970 --> 00:05:37,900
Así que esto sería exactamente lo mismo que escribir

101
00:05:37,900 --> 00:05:40,570
número de vuelo es igual

102
00:05:41,840 --> 00:05:42,950
vuelo.

103
00:05:42,950 --> 00:05:45,240
Y esto también simplemente copiaría

104
00:05:45,240 --> 00:05:48,840
este valor a flightNum, ¿verdad?

105
00:05:48,840 --> 00:05:49,980
Y así de nuevo,

106
00:05:49,980 --> 00:05:52,960
flightNum aquí es una variable completamente diferente.

107
00:05:52,960 --> 00:05:55,170
Y por lo tanto, como lo cambiamos aquí,

108
00:05:55,170 --> 00:05:58,993
no se reflejó en la variable de vuelo exterior.

109
00:05:59,880 --> 00:06:03,560
Bien, entonces sigue siendo LH234,

110
00:06:03,560 --> 00:06:06,500
así que exactamente por la misma razón que vimos antes,

111
00:06:06,500 --> 00:06:11,090
en la clase de primitivos versus tipos de referencia.

112
00:06:11,090 --> 00:06:14,150
Pero ahora, ¿qué pasa con el objeto Jonas que pasamos,

113
00:06:14,150 --> 00:06:16,910
en la función checkIn y en esa función,

114
00:06:16,910 --> 00:06:19,147
se llama pasajero no?

115
00:06:19,147 --> 00:06:22,230
Y luego cambiamos ese objeto pasajero aquí.

116
00:06:22,230 --> 00:06:24,420
Y como vimos entonces,

117
00:06:24,420 --> 00:06:28,210
el objeto Jonas también se vio afectado por ese cambio.

118
00:06:28,210 --> 00:06:30,090
Entonces, ¿por qué sucedió eso?

119
00:06:30,090 --> 00:06:32,820
Y es posible que ya sepas la respuesta.

120
00:06:32,820 --> 00:06:36,190
Entonces, cuando pasamos un tipo de referencia a una función,

121
00:06:36,190 --> 00:06:39,240
lo que se copia es realmente solo una referencia

122
00:06:39,240 --> 00:06:42,030
al objeto en el montón de memoria.

123
00:06:42,030 --> 00:06:44,853
Así que eso sería exactamente como hacer esto.

124
00:06:46,230 --> 00:06:48,160
Así que pasajero

125
00:06:48,160 --> 00:06:48,993
es igual

126
00:06:50,040 --> 00:06:50,873
jonas

127
00:06:51,970 --> 00:06:54,673
De hecho, podemos hacer esto y aquí lo mismo,

128
00:06:55,600 --> 00:07:00,083
solo para obtener como referencia, lo mismo que hacer,

129
00:07:01,030 --> 00:07:03,370
bueno, entonces, como ya sabes,

130
00:07:03,370 --> 00:07:06,510
cuando tratamos de copiar un objeto como este,

131
00:07:06,510 --> 00:07:08,610
en realidad solo estamos copiando la referencia

132
00:07:08,610 --> 00:07:11,310
a ese objeto en el montón de memoria,

133
00:07:11,310 --> 00:07:14,440
pero ambos apuntan al mismo objeto en la memoria.

134
00:07:14,440 --> 00:07:17,220
Y eso es exactamente lo que también está sucediendo aquí,

135
00:07:17,220 --> 00:07:19,660
con el objeto Jonas, mientras lo pasamos

136
00:07:19,660 --> 00:07:22,793
en la función de checkIn donde se llama pasajero.

137
00:07:23,670 --> 00:07:27,460
Así que aquí, mientras manipulamos el objeto pasajero,

138
00:07:27,460 --> 00:07:31,890
es exactamente lo mismo que manipular el objeto Jonas.

139
00:07:31,890 --> 00:07:34,410
Una vez más, porque ambos son

140
00:07:34,410 --> 00:07:36,763
el mismo objeto en el montón de memoria.

141
00:07:38,680 --> 00:07:42,900
Muy bien, en resumen, pasar un tipo primitivo

142
00:07:42,900 --> 00:07:45,480
a una función es realmente lo mismo

143
00:07:45,480 --> 00:07:49,710
como crear una copia como esta, fuera de la función.

144
00:07:49,710 --> 00:07:51,920
Entonces el valor simplemente se copia.

145
00:07:51,920 --> 00:07:55,340
Por otro lado, cuando pasamos un objeto a una función,

146
00:07:55,340 --> 00:07:59,920
es realmente como copiar un objeto como este.

147
00:07:59,920 --> 00:08:02,170
Y entonces, lo que sea que cambiemos en una copia

148
00:08:02,170 --> 00:08:04,760
también sucederá en el original.

149
00:08:04,760 --> 00:08:06,970
Ahora, por supuesto, tenemos que tener cuidado.

150
00:08:06,970 --> 00:08:10,520
con este comportamiento y siempre tenlo en cuenta.

151
00:08:10,520 --> 00:08:12,780
Eso es porque el hecho de que los objetos

152
00:08:12,780 --> 00:08:15,970
comportarse de esta manera cuando se pasa a funciones

153
00:08:15,970 --> 00:08:20,380
puede tener consecuencias imprevisibles en grandes bases de código.

154
00:08:20,380 --> 00:08:22,910
Y eso es especialmente cierto cuando estás trabajando

155
00:08:22,910 --> 00:08:25,160
con múltiples desarrolladores.

156
00:08:25,160 --> 00:08:27,510
Así que escribamos otra función rápida aquí

157
00:08:27,510 --> 00:08:29,710
para mostrarte lo que puede pasar,

158
00:08:29,710 --> 00:08:34,370
para que puedas estar preparado para la vida real, básicamente.

159
00:08:34,370 --> 00:08:38,520
Así que vamos a crear una función llamada

160
00:08:39,777 --> 00:08:40,777
nuevo Pasaporte.

161
00:08:44,270 --> 00:08:47,530
Aceptará a cualquier persona,

162
00:08:47,530 --> 00:08:49,970
y básicamente simplemente cambiará

163
00:08:49,970 --> 00:08:52,413
el número de pasaporte de esa persona.

164
00:08:54,980 --> 00:08:58,930
Entonces, simplemente creemos un número aleatorio aquí,

165
00:08:58,930 --> 00:09:03,910
al azar, y vamos a multiplicarlo por un número enorme,

166
00:09:03,910 --> 00:09:05,150
y luego esto creará un número

167
00:09:05,150 --> 00:09:07,690
entre uno y

168
00:09:07,690 --> 00:09:10,070
esta cosa enorme

169
00:09:10,070 --> 00:09:11,720
Así que realmente no importa aquí.

170
00:09:12,770 --> 00:09:16,823
También conoceremos trunc, como hemos usado antes,

171
00:09:18,380 --> 00:09:20,590
solo para que obtengamos un nuevo número grande,

172
00:09:20,590 --> 00:09:24,520
que será el nuevo pasaporte ahora, a la derecha.

173
00:09:24,520 --> 00:09:27,393
Y ahora llamemos a esa función en realidad,

174
00:09:28,360 --> 00:09:30,573
con el objeto Jonas,

175
00:09:31,520 --> 00:09:32,670
ahora a la derecha.

176
00:09:32,670 --> 00:09:34,910
Así que digamos que reservé el vuelo

177
00:09:34,910 --> 00:09:37,670
con mi número de pasaporte original aquí.

178
00:09:37,670 --> 00:09:39,280
Y ese es el número de pasaporte.

179
00:09:39,280 --> 00:09:43,800
que la función de registro comparará mi pasaporte con,

180
00:09:43,800 --> 00:09:45,883
es por eso que está codificado aquí.

181
00:09:47,030 --> 00:09:51,973
Pero ahora, nuevamente, cambio mi pasaporte antes de registrarme.

182
00:09:54,870 --> 00:09:56,620
Y entonces vamos a ver qué pasa entonces.

183
00:09:58,230 --> 00:10:00,340
Así que aquí de nuevo, tenemos que pasar

184
00:10:00,340 --> 00:10:02,933
el vuelo y el objeto pasajero.

185
00:10:04,150 --> 00:10:05,543
Entonces, veamos.

186
00:10:07,200 --> 00:10:09,980
Así que todavía dice registrado aquí,

187
00:10:09,980 --> 00:10:14,920
pero eso viene de esta llamada a la función checkIn, está bien.

188
00:10:14,920 --> 00:10:17,620
Entonces aquí abajo, se cambia el pasaporte,

189
00:10:17,620 --> 00:10:19,900
y luego hay otra llamada de verificación.

190
00:10:19,900 --> 00:10:22,290
Así que vamos a ver el resultado de eso.

191
00:10:22,290 --> 00:10:27,150
Y ahora, de hecho, dice pasaporte incorrecto, está bien.

192
00:10:27,150 --> 00:10:29,470
Entonces, lo que está sucediendo ahora es que tenemos

193
00:10:29,470 --> 00:10:33,100
dos funciones que manipulan el mismo objeto.

194
00:10:33,100 --> 00:10:35,573
Y eso está creando un problema,

195
00:10:37,100 --> 00:10:38,240
¿bien?

196
00:10:38,240 --> 00:10:40,300
Así que aquí está pasando exactamente lo mismo,

197
00:10:40,300 --> 00:10:42,010
en la nueva función de pasaporte.

198
00:10:42,010 --> 00:10:44,420
Estoy pasando en un objeto,

199
00:10:44,420 --> 00:10:47,010
y entonces ese objeto aquí se llama persona.

200
00:10:47,010 --> 00:10:50,810
Y como la función manipula ese objeto persona,

201
00:10:50,810 --> 00:10:54,310
por supuesto, también se refleja en Jonas.

202
00:10:54,310 --> 00:10:57,170
Y luego, cuando pasamos ese objeto Jonas

203
00:10:57,170 --> 00:11:00,140
en la función checkIn, entonces, por supuesto,

204
00:11:00,140 --> 00:11:04,650
ese pasaporte ya no es el mismo que el original.

205
00:11:04,650 --> 00:11:08,040
Entonces, sí, creo que este es un buen ejemplo.

206
00:11:08,040 --> 00:11:11,050
de ver cómo la interacción de diferentes funciones

207
00:11:11,050 --> 00:11:14,690
con el mismo objeto puede crear algunos problemas aquí.

208
00:11:14,690 --> 00:11:18,000
Y por supuesto, esto es solo un ejemplo súper simple,

209
00:11:18,000 --> 00:11:21,020
pero estoy seguro de que entiendes el punto, ¿verdad?

210
00:11:21,020 --> 00:11:24,130
Lo que importa es que seas consciente de este problema,

211
00:11:24,130 --> 00:11:26,563
y luego puedes tener cuidado con eso.

212
00:11:27,890 --> 00:11:30,520
Simplemente eliminemos estas líneas de código.

213
00:11:30,520 --> 00:11:33,513
También estos, estos realmente no importan.

214
00:11:34,940 --> 00:11:37,860
Solo asegurémonos, y de hecho, sí,

215
00:11:37,860 --> 00:11:39,790
tenemos el pasaporte equivocado ahora,

216
00:11:39,790 --> 00:11:42,713
debido a la nueva función de pasaporte allá abajo.

217
00:11:44,720 --> 00:11:45,920
Bueno.

218
00:11:45,920 --> 00:11:48,800
Ahora, solo para terminar, en programación,

219
00:11:48,800 --> 00:11:51,650
hay dos términos que se usan todo el tiempo

220
00:11:51,650 --> 00:11:53,260
cuando se trata de funciones,

221
00:11:53,260 --> 00:11:57,570
que pasa por valor y pasa por referencia,

222
00:11:57,570 --> 00:12:01,110
y muchos programadores experimentados que son nuevos en JavaScript

223
00:12:01,110 --> 00:12:03,930
hay alguna confusión entre estos términos

224
00:12:03,930 --> 00:12:05,870
y cómo funciona en JavaScript.

225
00:12:05,870 --> 00:12:08,700
Y entonces quiero abordar eso rápidamente aquí también.

226
00:12:08,700 --> 00:12:12,560
Entonces JavaScript no tiene paso por referencia,

227
00:12:12,560 --> 00:12:14,460
solo pasando por valor,

228
00:12:14,460 --> 00:12:17,630
aunque parece que está pasando por referencia.

229
00:12:17,630 --> 00:12:21,040
Así que hay lenguajes como C++,

230
00:12:21,040 --> 00:12:24,690
donde puede pasar una referencia a cualquier valor,

231
00:12:24,690 --> 00:12:27,030
en lugar del valor mismo.

232
00:12:27,030 --> 00:12:28,860
Esto funciona incluso con primitivas,

233
00:12:28,860 --> 00:12:32,170
por lo que podría pasar una referencia al valor de cinco,

234
00:12:32,170 --> 00:12:33,470
y luego el valor original,

235
00:12:33,470 --> 00:12:36,490
fuera de la función, se cambiaría.

236
00:12:36,490 --> 00:12:39,270
Y esto se llama pasar por referencia.

237
00:12:39,270 --> 00:12:44,270
Pero una vez más, JavaScript no tiene paso por referencia.

238
00:12:44,440 --> 00:12:47,000
Así que si ya sabes algo de programación,

239
00:12:47,000 --> 00:12:50,940
pero eres nuevo en JavaScript, asegúrate de entender esto.

240
00:12:50,940 --> 00:12:54,180
Y sé que es confuso, porque como acabamos de aprender,

241
00:12:54,180 --> 00:12:58,840
para los objetos, de hecho pasamos una referencia.

242
00:12:58,840 --> 00:13:01,950
Así que la dirección de memoria del objeto.

243
00:13:01,950 --> 00:13:05,880
Sin embargo, esa referencia en sí misma sigue siendo un valor.

244
00:13:05,880 --> 00:13:09,820
Es simplemente un valor que contiene una dirección de memoria.

245
00:13:09,820 --> 00:13:13,670
Así que básicamente pasamos una referencia a la función,

246
00:13:13,670 --> 00:13:16,530
pero no pasamos por referencia,

247
00:13:16,530 --> 00:13:19,690
y esta es una distinción importante.

248
00:13:19,690 --> 00:13:20,750
Una vez mas,

249
00:13:20,750 --> 00:13:23,820
Solo te digo esto porque parece haber

250
00:13:23,820 --> 00:13:27,140
hay mucha confusión sobre este tema

251
00:13:27,140 --> 00:13:30,300
entre algunos principiantes de JavaScript, y especialmente

252
00:13:30,300 --> 00:13:34,303
cuando provienen de otros lenguajes, como C++.