UD7 - JavaScript
UD7 - JavaScript
Sistemas de Gestión de la
Información
07 UD7 – JavaScript
Licencia
Toda la documentación de esta asignatura queda recogida bajo la licencia de Creative Commons
https://creativecommons.org/licenses/by-nc-nd/4.0/
En el caso de incumplimiento o infracción de una licencia Creative Commons, el autor, como con cualquier otra obra y licencia, habrá de recurrir a los
tribunales. Cuando se trate de una infracción directa (por un usuario de la licencia Creative Commons), el autor le podrá demandar tanto por infracción de la
propiedad intelectual como por incumplimiento contractual (ya que la licencia crea un vínculo directo entre autor y usuario/licenciatario). El derecho moral de
integridad recogido por la legislación española queda protegido aunque no aparezca en las licencias Creative Commons. Estas licencias no sustituyen ni
reducen los derechos que la ley confiere al autor; por tanto, el autor podría demandar a un usuario que, con cualquier licencia Creative Commons, hubiera
modificado o mutilado su obra causando un perjuicio a su reputación o sus intereses. Por descontado, la decisión de cuándo ha habido mutilación y de
cuándo la mutilación perjudica la reputación o los intereses del autor quedaría en manos de cCutacia Juez o Tribunal.
• Débilmente tipado
• JavaScript != Java
Nombre similar por
decisiones de marketing
• ECMAScript 4 → se desechó
• ECMAScript 5 → 2009 → añade al lenguaje algunos objetos, métodos y propiedades y el modo estricto
(strict mode): Es la especificación que cumplen todos los navegadores modernos
• ECMAScript 6 → 2015 → añade promesas (son acciones que se resolverán a futuro, cuando se pueda, y
que sabremos si se llevaron a cabo con éxito o no)
– JavaScript: Lenguaje de programación. Define las acciones que se realizan según determinadas
condiciones.
– DOM: Document Object Model. Los diferentes elementos de una página web
modelados/representados como objetos, lo que permite interactuar con ellos y modificarlos
desde un lenguaje orientado a objetos.
EJ1
/* Esto es un comentario
multilínea.
Las líneas son ignoradas */
• Valores: Pueden ser literales, constantes o variables, que almacenan los valores de los datos.
• Expresiones: Combinan operadores, valores literales y variables; que dan como resultado un
valor.
• Palabras clave: Identifican una acción a realizar, como puede ser crear una variable.
• Comentarios: Parte del código que no debe ser ejecutado y sirven para la comprensión del
código.
• Identificadores: Son nombres que sirven para identificar variables, funciones o palabras clave.
5 2 5
A A A A
Variable llamada A Insertamos 5 en A “vale” 5 A deja de
la variable A valer 5 y ahora vale 2
• Debemos declarar una variable una sola vez y desde entonces referirnos a ella sin let.
• En scripts más viejos, a veces se encuentra otra palabra clave: var en lugar de let:
• Cuando el nombre contiene varias palabras, comúnmente se utiliza camelCase. Es decir: palabras
van una detrás de otra, con cada palabra iniciando con letra mayúscula: miNombreMuyLargo.
• Es interesante notar que el símbolo del dólar '$' y el guion bajo '_' también se utilizan en nombres.
Son símbolos comunes, tal como las letras, sin ningún significado especial.
• Normalmente, debemos definir una variable antes de utilizarla. Pero, en los viejos tiempos, era
técnicamente posible crear una variable simplemente asignando un valor sin utilizar ‘let’. Esto
aún funciona si no ponemos ‘use strict’ en nuestros scripts para mantener la compatibilidad
con scripts antiguos.
// nota: no se utiliza "use strict" en este ejemplo
num = 5; // se crea la variable "num" si no existe
antes alert(num); // 5
• Esto es una mala práctica que causaría errores en ‘strict mode’:
"use strict";
num = 5; // error: num no está definida
• Existe una práctica utilizada ampliamente de utilizar constantes como aliases de valores
difíciles-de-recordar y que se conocen previo a la ejecución.
• Tales constantes se nombran utilizando letras mayúsculas y guiones bajos.
• Por ejemplo, creemos constantes para los colores en el formato “web” (hexadecimal):
Ventajas:
• COLOR_ORANGE es mucho más fácil de recordar que "#FF7F00".
• Es mucho más fácil escribir mal "#FF7F00" que COLOR_ORANGE.
• Al leer el código, COLOR_ORANGE tiene mucho más significado que #FF7F00.
• Ser una “constante” solo significa que el valor de la variable nunca cambia. Pero hay
constantes que son conocidas previo a la ejecución (como el valor hexadecimal del color rojo) y
hay constantes que son calculadas en el tiempo de ejecución, pero no cambian después de su
asignación inicial.
• Por ejemplo: const pageLoadTime = /* el tiempo que tardó la página web para cargar */;
• En otras palabras, las constantes con nombres en mayúscula son utilizadas solamente como
alias para valores invariables y preestablecidos (“hard-coded”).
• En un proyecto real, la mayor parte del tiempo se pasa modificando y extendiendo una base de
código en vez de empezar a escribir algo desde cero. Cuando regresamos a algún código
después de hacer algo distinto por un rato, es mucho más fácil encontrar información que está
bien etiquetada. O, en otras palabras, cuando las variables tienen nombres adecuados.
• Por favor pasa tiempo pensando en el nombre adecuado para una variable antes de declararla.
Hacer esto te da un retorno muy sustancial.
• Evite abreviaciones o nombres cortos a, b, c, al menos que en serio sepa lo que está haciendo.
• Cree nombres que describen al máximo lo que son y sean concisos. Ejemplos que no son
adecuados son data y value. Estos nombres no nos dicen nada. Estos solo está bien usarlos en
el contexto de un código que deje excepcionalmente obvio cuál valor o cuales datos está
referenciando la variable.
• ¿Suena simple? De hecho lo es, pero no es tan fácil crear nombres de variables descriptivos y
concisos a la hora de practicar.
Existen programadores haraganes que, en vez de declarar una variable nueva, tienden a reusar
las existentes.
El resultado de esto es que sus variables son como cajas en las cuales la gente introduce cosas
distintas sin cambiar sus etiquetas. ¿Que existe dentro de la caja? ¿Quién sabe? Necesitamos
acercarnos y revisar.
Las variables deben ser nombradas de tal manera que entendamos fácilmente lo que está en su
interior.
Podemos almacenar un valor de cualquier tipo dentro de una variable. Por ejemplo, una variable
puede contener en un momento un string y luego almacenar un número:
EJ4
Los lenguajes de programación que permiten estas cosas, como JavaScript, se denominan
“dinámicamente tipados”, lo que significa que allí hay tipos de datos, pero las variables no están
vinculadas rígidamente a ninguno de ellos.
• Para ser realmente precisos, el tipo de dato “number” puede almacenar enteros muy grandes
(hasta 1.7976931348623157 * 10308), pero fuera del rango de enteros seguros ±(253-1) habrá un
error de precisión, porque no todos los dígitos caben en el almacén fijo de 64-bit. Así que es
posible que se almacene un valor “aproximado”.
• Por ejemplo, estos dos números (justo por encima del rango seguro) son iguales:
EJ4
• Podemos decir que ningún entero impar mayor que (253-1) puede almacenarse en el tipo de
dato “number”.
• Para la mayoría de los propósitos, el rango ±(253-1) es suficiente, pero a veces necesitamos
números realmente grandes; por ejemplo, para criptografía o marcas de tiempo de precisión
de microsegundos.
EJ4
• Como los números BigInt rara vez se necesitan, no los cubrimos aquí sino que les dedicamos
un capítulo separado <info: bigint>. Léelo cuando necesites números tan grandes.
Problemas de compatibilidad
En este momento, BigInt está
soportado por
Firefox/Chrome/Edge/Safari, pero no
por IE. Olga M. Moreno Martín 28
String
• Un string en JavaScript es una cadena de caracteres y debe colocarse entre comillas.
EJ4
EJ4
EJ4
• Este tipo se utiliza comúnmente para almacenar valores de sí/no: true significa “sí, correcto,
verdadero”, y false significa “no, incorrecto, falso”.
EJ4
EJ4
EJ4
• Todos los demás tipos se llaman “primitivos” porque sus valores pueden contener una sola
cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para
almacenar colecciones de datos y entidades más complejas.
• Siendo así de importantes, los objetos merecen un trato especial. Nos ocuparemos de ellos
más adelante en el apartado dedicado a Objetos después de aprender más sobre los
primitivos.
• El tipo symbol (símbolo) se utiliza para crear identificadores únicos para los objetos. Tenemos
que mencionarlo aquí para una mayor integridad, pero es mejor estudiar este tipo después de
los objetos.
ALERT
• Este ya lo hemos visto. Muestra un mensaje y espera a que el usuario presione “Aceptar”.
• Por ejemplo:
EJ5
• La mini ventana con el mensaje se llama ventana modal . La palabra “modal” significa que el
visitante no puede interactuar con el resto de la página, presionar otros botones, etc., hasta
que se haya ocupado de la ventana. En este caso, hasta que presionen “OK”.
• La función confirm muestra una ventana modal con una pregunta y dos botones: OK y
CANCELAR.
• El resultado es true si se pulsa OK y false en caso contrario.
• Todos estos métodos son modales: detienen la ejecución del script y no permiten que el
usuario interactúe con el resto de la página hasta que la ventana se haya cerrado.
• Por ejemplo, alert convierte automáticamente cualquier valor a string para mostrarlo. Las
operaciones matemáticas convierten los valores a números.
• También hay casos donde necesitamos convertir de manera explícita un valor al tipo esperado.
EJ6
• La conversión a string es bastante obvia. El boolean false se convierte en "false", null en "null",
etc.
EJ6
• La conversión explícita es requerida usualmente cuando leemos un valor desde una fuente
basada en texto, como lo son los campos de texto en los formularios, pero que esperamos que
contengan un valor numérico.
• Si el string no es un número válido, el resultado de la conversión será NaN. Por ejemplo:
EJ6
• Ten en cuenta que null y undefined se comportan de distinta manera aquí: null se convierte
en 0 mientras que undefined se convierte en NaN.
Olga M. Moreno Martín 44
conversiones de tipos
Adición ‘+’ concatena strings
• Casi todas las operaciones matemáticas convierten valores a números. Una excepción notable
es la suma +. Si uno de los valores sumados es un string, el otro valor es convertido a string.
EJ6
• Esto ocurre solo si al menos uno de los argumentos es un string, en caso contrario los valores
son convertidos a número.
La mayoría de estas reglas son fáciles de entender y recordar. Las excepciones más notables donde
la gente suele cometer errores son:
• undefined es NaN como número, no 0.
• "0" y textos que solo contienen espacios como " " son true como boolean.
47
operadores aritméticos o matemáticos
Operador Descripción Ejemplo
Operador binario. Devuelve el resto entero de dividir
Resto (%) 12 % 5 devuelve 2.
los dos operandos.
Operador unario. Agrega uno a su operando. Si se
usa como operador prefijo (++x), devuelve el valor de Si x es 3, ++x establece x en 4 y
Incremento (++) su operando después de agregar uno; si se usa devuelve 4, mientras que x++ devuelve
como operador sufijo (x++), devuelve el valor de su 3 y , solo entonces, establece x en 4.
operando antes de agregar uno.
Operador unario. Resta uno de su operando. El valor Si x es 3, entonces --x establece x en 2 y
Decremento (--) de retorno es análogo al del operador de devuelve 2, mientras que x-- devuelve
incremento. 3 y, solo entonces, establece x en 2.
Operador unario. Devuelve la negación de su
Negación unaria (-) Si x es 3, entonces -x devuelve -3.
operando.
Operador unario. Intenta convertir el operando en +"3" devuelve 3.
Positivo unario (+)
un número, si aún no lo es. +true devuelve 1.
Calcula la base a la potencia de exponente, es 2 ** 3 returns 8.
Operador de exponenciación (**)
decir, baseexponente 10 ** -1 returns 0.1.
Normalmente el operador + suma números. Pero si se aplica el + binario a una cadena, los une (concatena)
EJ7
EJ7
• Compara con:
EJ7
Olga M. Moreno Martín 51
operadores aritméticos o matemáticos
Coma
• El operador coma , es uno de los operadores más raros e inusuales. A veces, es utilizado para
escribir código más corto, entonces tenemos que saberlo para poder entender qué está
pasando.
• El operador coma nos permite evaluar varias expresiones, dividiéndolas con una coma ,. Cada
una de ellas es evaluada, pero sólo el resultado de la última es devuelto.
• Por ejemplo:
EJ7
• Tales trucos se usan en muchos frameworks de JavaScript. Por eso los estamos mencionando.
Pero generalmente no mejoran la legibilidad del código, por lo que debemos pensar bien
antes de usarlos.
Olga M. Moreno Martín 52
operadores de comparación
var var1 = 3;
var var2 = 4;
3 == var1"3" == var1
Igual (==) Devuelve true si los operandos son iguales.
3 == '3'
var1 != 4
No es igual (!=) Devuelve true si los operandos no son iguales.
var2 != "3"
Estrictamente igual (===) Devuelve true si los operandos son iguales y del mismo tipo. 3 === var1
EJ8
Desde el punto de vista de JavaScript, este resultado es bastante normal. Una comparación de
igualdad convierte valores utilizando la conversión numérica (de ahí que "0" se convierta en 0),
mientras que la conversión explícita Boolean utiliza otro conjunto de reglas.
EJ8
• Los valores null y undefined son iguales == entre sí y no equivalen a ningún otro valor.
• Ten cuidado al usar comparaciones como > o < con variables que ocasionalmente pueden
ser null/undefined. Revisar por separado si hay null/undefined es una buena idea.
Iniciamos
FALSE
IF(condición)
TRUE
Salimos del IF
EJ9
Iniciamos
IF(condición)
TRUE FALSE
Salimos
EJ9
Iniciamos
TRUE Ejecutamos el
IF(condición)
interior del IF
FALSE
FALSE
Ejecutamos el
interior del ELSE
EJ9
Salimos
Olga M. Moreno Martín 60
programación estructurada
EJ9
• Operador ternario ‘?’
La precedencia de
NOT ! es la mayor de
todos los
operadores lógicos,
así que siempre se
ejecuta primero,
antes que && o ||.
EJ10
El resultado de a ?? b:
• si a está “definida”, será a,
• si a no está “definida”, será b.
Es decir, ?? devuelve el primer argumento cuando este no es null ni undefined. En caso contrario,
devuelve el segundo.
El operador “nullish coalescing” no es algo completamente nuevo. Es solamente una sintaxis
agradable para obtener el primer valor “definido” de entre dos.
EJ10
Olga M. Moreno Martín 69
resumen
• El operador “nullish coalescing” ?? brinda una manera concisa de seleccionar un valor
“definido” de una lista.
• El operador ?? tiene una precedencia muy baja, un poco más alta que ?: y =.
EJ10
Olga M. Moreno Martín 70
Programación Estructurada
• Estructura condicional basada en casos SWITCH – CASE:
Iniciamos
SWITCH
(condición)
Caso 1
Ejecutamos
caso 1
Caso 2 Ejecutamos
caso 2
default Ejecutamos
caso N Salimos
• Por ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo
código para cada número del 1 al 10.
• Los Bucles son una forma de repetir el mismo código varias veces.
a. While
b. Do…While
c. For
Iniciamos
WHILE
Salimos
(condición) FALSE
Mientras la
TRUE condición condition sea
verdadera, el código del
Ejecutamos el interior
del WHILE
cuerpo del bucle será
y actualizamos ejecutado.
EJ11
Olga M. Moreno Martín 74
programación estructurada
• Ejemplos WHILE:
• Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza
3 iteraciones.
• Si faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la
práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript
del lado del servidor, podemos eliminar el proceso.
• Cualquier expresión o variable puede usarse como condición del bucle, no solo las
comparaciones: El while evaluará y transformará la condición a un booleano.
• Por ejemplo, una manera más corta de escribir while (i != 0) es while (i):
EJ11
Olga M. Moreno Martín 75
Programación Estructurada
• Bucle postcondición DO-WHILE: Esta sintaxis solo
debe ser usada
Iniciamos cuando quieres que
el cuerpo del bucle
sea ejecutado al
menos una vez sin
DO:
Ejecutamos el interior importar que la
y actualizamos
condición sea
TRUE
verdadera.
Usualmente, se
FALSE
prefiere la otra
WHILE
Salimos forma: while(…) {…}.
(condición) EJ11
Olga M. Moreno Martín 76
Programación Estructurada
• Bucle FOR:
Iniciamos
Iniciamos el índice
FALSE
FOR
(condición) Salimos
parte
TRUE comienzo let i = 0 Se ejecuta una vez al comienzo del bucle.
Comprobada antes de cada iteración del bucle. Si es falsa, el
condición i<3
Ejecutamos el interior bucle finaliza.
del FOR cuerpo alert(i) Se ejecuta una y otra vez mientras la condición sea verdadera.
y actualizamos el
paso i++ Se ejecuta después del cuerpo en cada iteración.
índice en la cabecera
EJ11
Olga M. Moreno Martín 78
programación estructurada
Rompiendo el bucle:
• Normalmente, se sale de un bucle cuando la condición se vuelve falsa.
• Pero podemos forzar una salida en cualquier momento usando la directiva especial break.
• Por ejemplo, el bucle debajo le pide al usuario por una serie de números, “rompiéndolo”
cuando un número no es ingresado:
EJ11
• La directiva break es activada en la línea (*) si el usuario ingresa una línea vacía o cancela la
entrada. Detiene inmediatamente el bucle, pasando el control a la primera línea después de el
bucle. En este caso, alert.
• La combinación “bucle infinito + break según sea necesario” es ideal en situaciones donde la
condición del bucle debe ser comprobada no al inicio o al final de el bucle, sino a la mitad o
incluso en varias partes del cuerpo.
Olga M. Moreno Martín 79
programación estructurada
Continuar a la siguiente iteración:
• La directiva continue es una “versión más ligera” de break. No detiene el bucle completo. En su
lugar, detiene la iteración actual y fuerza al bucle a comenzar una nueva (si la condición lo
permite).
• Podemos usarlo si hemos terminado con la iteración actual y nos gustaría movernos a la
siguiente.
• El bucle debajo usa continue para mostrar solo valores impares:
• Para los valores pares de i, la directiva continue deja de ejecutar el cuerpo y pasa el control a la
siguiente iteración de for (con el siguiente número). Así que el alert solo es llamado para
valores impares.
EJ11
Olga M. Moreno Martín 80
programación estructurada
Etiquetas para break/continue:
• Una etiqueta es un identificador con un signo de dos puntos “:” antes de un bucle.
• En el código de arriba, break outer mira hacia arriba por la etiqueta llamada outer y nos saca
de dicho bucle.
• Así que el control va directamente de (*) a alert('Listo!’).
• Las etiquetas no son “goto”: Las etiquetas no nos permiten saltar a un lugar arbitrario en el
código. Por ejemplo, es imposible hacer esto:
EJ11
Olga M. Moreno Martín 81
resumen
Cubrimos 3 tipos de bucles:
• FOR (;;) – La condición es comprobada antes de cada iteración, con ajustes adicionales
disponibles.
Para crear un bucle “infinito”, usualmente se usa while(true). Un bucle como éste, tal y como
cualquier otro, puede ser detenido con la directiva break.
break/continue soportan etiquetas antes del bucle. Una etiqueta es la única forma de
usar break/continue para escapar de un bucle anidado para ir a uno exterior.
Declaración: EJ1
EJ2
Olga M. Moreno Martín 84
variables externas
• Una función también puede acceder a una variable externa.
• La función tiene acceso completo a la variable externa. Puede modificarlo también.
• La variable externa solo se usa si no hay una local. Si una variable con el mismo nombre se
declara dentro de la función, le hace sombra a la externa.
EJ3
85
parámetros
• Podemos pasar datos arbitrarios a funciones usando parámetros.
• En el siguiente ejemplo, la función tiene dos parámetros: from y text.
• Cuando la función se llama (*) y (**), los valores dados se copian en variables locales from y text.
Y la función las utiliza.
EJ4
EJ5
EJ5
• Eso no es un error. La llamada mostraría "Ann: undefined". Como no se pasa un valor de text,
este se vuelve undefined.
• Podemos especificar un valor llamado “predeterminado” o “por defecto” (es el valor que se usa
si el argumento fue omitido) en la declaración de función usando =:
• Aquí "sin texto" es un string, pero puede ser una expresión más compleja, la cual solo es
evaluada y asignada si el parámetro falta. Entonces, esto también es posible:
EJ5
Evaluación de parámetros predeterminados
En JavaScript, se evalúa un parámetro predeterminado cada vez que se llama a la función sin el parámetro respectivo.
En el ejemplo anterior, anotherFunction() no será llamado en absoluto si se provee el parámetro text.
Por otro lado, se llamará independientemente cada vez que text se omita.
EJ5
Olga M. Moreno Martín 90
devolviendo un valor
• Una función con un return vacío, o sin return, devuelve undefined.
EJ5
Olga M. Moreno Martín 91
nomenclatura de funciones
• Las funciones son acciones. Entonces su nombre suele ser un verbo. Debe ser breve, lo más
preciso posible y describir lo que hace la función, para que alguien que lea el código obtenga
una indicación de lo que hace la función.
• Es una práctica generalizada comenzar una función con un prefijo verbal que describe
vagamente la acción. Debe haber un acuerdo dentro del equipo sobre el significado de los
prefijos.
• Los valores pasados a una función como parámetros se copian a sus variables locales.
• Una función puede acceder a variables externas. Pero funciona solo de adentro hacia afuera. El
código fuera de la función no ve sus variables locales.
• Una función puede devolver un valor. Si no lo hace, entonces su resultado es undefined.
• Para que el código sea limpio y fácil, se recomienda utilizar principalmente variables y
parámetros locales en la función.
• Siempre es más fácil entender una función que obtiene parámetros, trabaja con ellos y
devuelve un resultado que una función que no obtiene parámetros, pero modifica las variables
externas como un efecto secundario.
Nomenclatura de funciones:
• Un nombre debe describir claramente lo que hace la función. Una función es una acción, por
lo que los nombres de las funciones suelen ser verbos.
• Existen muchos prefijos de funciones bien conocidos como create…, show…, get…, check… y así.
Úsalos para insinuar lo que hace una función.
• Las funciones son los principales bloques de construcción de los scripts. Ahora hemos cubierto
los conceptos básicos, por lo que en realidad podemos comenzar a crearlos y usarlos.
EJ6
Olga M. Moreno Martín 94
expresiones de función
• En JavaScript, una función no es una “estructura mágica del lenguaje”, sino un tipo de valor
especial.
• La sintaxis que usamos antes se llama Declaración de Función:
• Existe otra sintaxis para crear una función que se llama una Expresión de Función.
• Esto nos permite crear una nueva función en el medio de cualquier expresión
EJ6
Olga M. Moreno Martín 95
expresiones de función
• Reiteremos: no importa cómo es creada la función, una función es un valor.
• Tenga en cuenta que la última línea no ejecuta la función, porque no hay paréntesis después
de sayHi. Existen lenguajes de programación en los que cualquier mención del nombre de una
función causa su ejecución, pero JavaScript no funciona así.
• En JavaScript, una función es un valor, por lo tanto podemos tratarlo como un valor. El código
de arriba muestra su representación de cadena, que es el código fuente.
• Por supuesto que es un valor especial, en el sentido que podemos invocarlo de esta
forma sayHi().
• Pero sigue siendo un valor. Entonces podemos trabajar con ello como trabajamos con otro tipo
de valores.
1.La Declaración de la Función (1) crea la función y
la coloca dentro de la variable llamada sayHi.
2.Línea(2) copia la función en la variable func.
3.Ahora la función puede ser llamada de ambas
maneras, sayHi() y func().
EJ6
Olga M. Moreno Martín 96
expresiones de función
• También podríamos haber usado una expresión de función para declarar sayHi en la primera
línea:
EJ6
Olga M. Moreno Martín 97
Funciones Callback
Veamos más ejemplos del pasaje de funciones como valores y el uso de expresiones de función.
Escribimos una función ask(question, yes, no) con tres argumentos:
• question: Texto de la pregunta
• yes: Función a ejecutar si la respuesta es “Yes”
• no: Función a ejecutar si la respuesta es “No”
La función deberá preguntar la question y, dependiendo de la respuesta del usuario, llamar yes() o no():
EJ7
En la práctica, tales funciones son bastante útiles. La mayor diferencia entre la función ask en la vida real
y el ejemplo anterior es que las funciones de la vida real utilizan formas para interactuar con el usuario
más complejas que un simple confirme. En el navegador, una función como tal normalmente dibuja una
ventana de pregunta atractiva. Pero esa es otra historia. 98
Funciones Callback
Los argumentos de ask se llaman funciones callback o simplemente callbacks.
• La idea es que pasamos una función y esperamos que se “devuelva la llamada” más tarde si es
necesario. En nuestro caso, showOk se convierte en la callback para la respuesta “Yes”,
y showCancel para la respuesta “No”.
• Podemos usar Expresión de Función para redactar una función equivalente y más corta:
• Aquí, las funciones son declaradas justo dentro del llamado ask(...). No tienen nombre, y por lo
tanto se denominan anónimas. Tales funciones no se pueden acceder fuera de ask (porque no
están asignadas a variables), pero eso es justo lo que queremos aquí.
• Éste código aparece en nuestros scripts de manera muy natural, está en el archivo de
comandos de JavaScript. EJ7
• Expresión de Función: una función, creada dentro de una expresión o dentro de otra
construcción sintáctica. Aquí, la función es creada en el lado derecho de la “expresión de
asignación” =:
EJ8
Olga M. Moreno Martín 100
Expresión de Función vs Declaración de Función
Una Expresión de Función es creada cuando la ejecución la alcance y es utilizable desde ahí en adelante.
• Una vez que el flujo de ejecución pase al lado derecho de la asignación let sum = function… – aquí
vamos, la función es creada y puede ser usada (asignada, llamada, etc.) de ahora en adelante.
• Las Declaraciones de Función son diferente.
Una Declaración de Función puede ser llamada antes de ser definida.
• Por ejemplo, una Declaración de Función global es visible en todo el script, sin importar dónde se esté.
• Esto se debe a los algoritmos internos. Cuando JavaScript se prepara para ejecutar el script, primero
busca Declaraciones de Funciones globales en él y crea las funciones. Podemos pensar en esto como
una “etapa de inicialización”.
Y después de que se procesen todas las Declaraciones de Funciones, el código se ejecuta. Entonces tiene
acceso a éstas funciones.
La Declaración de Función sayHi es creada cuando JavaScript está preparándose para iniciar el script y es
visible en todas partes.
Las Expresiones de Función son creadas cuando la ejecución las alcance. Esto podría pasar solamente en
la línea (*). Demasiado tarde.
EJ8
Olga M. Moreno Martín 101
Expresión de Función vs Declaración de Función
En modo estricto, cuando una Declaración de Función se encuentra dentro de un bloque de
código, es visible en todas partes dentro de ese bloque. Pero no fuera de él.
• Por ejemplo, imaginemos que necesitamos declarar una función welcome() dependiendo de la
variable age que obtengamos durante el tiempo de ejecución. Y luego planeamos usarlo algún
tiempo después.
• Si utilizamos la Declaración de Funciones, no funcionará como se esperaba:
• Si la función se declara como una declaración separada en el flujo del código principal, eso se
llama “Declaración de función”.
• Las Declaraciones de Funciones se procesan antes de ejecutar el bloque de código. Son visibles
en todas partes del bloque.
En la mayoría de los casos, cuando necesitamos declarar una función, es preferible una
Declaración de Función, ya que es visible antes de la declaración misma. Eso nos da más
flexibilidad en la organización del código, y generalmente es más legible.
Por lo tanto, deberíamos usar una Expresión de Función solo cuando una Declaración de Función
no sea adecuada para la tarea.
• Esto crea una función func que acepta los parámetros arg1..argN, luego evalúa la expresión del
lado derecho mediante su uso y devuelve su resultado. En otras palabras, es la versión más
corta de:
EJ9
Olga M. Moreno Martín 105
funciones flecha
Como puedes ver, (a, b) => a + b significa una función que acepta dos argumentos llamados a y b.
Tras la ejecución, evalúa la expresión a + b y devuelve el resultado.
• Si no hay parámetros, los paréntesis estarán vacíos; pero deben estar presentes:
EJ9
Olga M. Moreno Martín 106
funciones flecha
• Las funciones de flecha se pueden usar de la misma manera que las expresiones de función.
• Las funciones de flecha pueden parecer desconocidas y poco legibles al principio, pero eso
cambia rápidamente a medida que los ojos se acostumbran a la estructura.
• Son muy convenientes para acciones simples de una línea, cuando somos demasiado flojos
para escribir muchas palabras.
EJ9
Olga M. Moreno Martín 107
funciones flecha
Funciones de flecha multilínea
• Las funciones de flecha que estamos viendo son muy simples. Toman los parámetros a la
izquierda de =>, los evalúan y devuelven la expresión del lado derecho.
• A veces necesitamos una función más compleja, con múltiples expresiones o sentencias. En
ese caso debemos encerrarlos entre llaves. La diferencia principal es que las llaves necesitan
usar un return para devolver un valor (tal como lo hacen las funciones comunes).
• Como esto:
EJ9
Olga M. Moreno Martín 108
resumen
Las funciones flecha son útiles para acciones simples, especialmente las de una sola línea. Vienen
en dos variantes:
• Sin llaves: (...args) => expression – el lado derecho es una expresión: la función la evalúa y
devuelve el resultado. Pueden omitirse los paréntesis si solo hay un argumento, por ejemplo n
=> n*2.
• Con llaves: (...args) => { body } – las llaves nos permiten escribir varias declaraciones dentro de la
función, pero necesitamos un return explícito para devolver algo.
Comillas
• Recordemos los tipos de comillas. Los strings pueden estar
entre comillas simples, comillas dobles o backticks (acento
grave).
Declaración
Adicional:
• Array.isArray(value) comprueba si value es un array.
Por favor tener en cuenta que sort, reverse y splice modifican el propio array.
• Los métodos son acciones que pueden ser realizadas en los objetos, son funciones propias del
mismo. Podemos acceder a ellos de forma similar a los atributos con la forma
objectName.functionName( ).
•
• Mediante la palabra clave this, podemos hacer referencia al objeto en cuestión dentro de sus
propios métodos. Podemos definir sus propiedades tanto de forma conjunta como de una en
una.
• Tiene varios métodos propios, como add( ), forEach( ), values( ), has( ), size,…