Tema 4: Programación Con Funciones, Arrays Y Funciones Definidas Por El Usuario

TEMA 4
PROGRAMACIÓN CON
FUNCIONES, ARRAYS Y
FUNCIONES DEFINIDAS POR
EL USUARIO
OBJETIVOS DEL CAPÍTULO
• Conocer las principales funciones predefinidas del lenguaje
JavaScript .
• Poder crear funciones personalizadas para realizar tareas

específicas que las funciones predefinidas no logran hacer .
• Comprender el objeto Array de JavaScript y familiarizarse con sus

propiedades y métodos.
• Crear objetos personalizados diferentes a los objetos predefinidos

del lenguaje .
• Definir propiedades y métodos de los objetos personalizados.

1. INTRODUCCIÓN.
• Los programas suelen usar partes de código que realizan tareas
repetidamente.
• Comprobar el tipo de los datos que se ingresan por pantalla.
• Si son numéricos, cadenas de texto o valores booleanos.
• Para esto usamos instrucciones que en algunos casos ocupan bastantes

líneas de código.
• Cuando esto se repiten una y otra vez, el código fuente de la aplicación se

complica principalmente por dos motivos:
– El número de líneas de código aumenta considerablemente, ya que muchas de éstas
estarán repetidas.
– El mantenimiento se dificulta debido a que si queremos modificar una instrucción

repetida, deberemos hacerlo tantas veces como aparezca en la aplicación.
• En JavaScript, no necesitamos escribir una y otra vez todas las
instrucciones de una determinada tarea.
• Podremos definir estas instrucciones en una parte de código delimitado e

invocarlo cuando nos sea útil.
• Estas instrucciones englobadas en un mismo proceso se denominan

funciones.
• En este capítulo veremos las principales funciones predefinidas en

JavaScript, además de cómo podemos crear y utilizar nuestras propias
funciones.
• Otro problema recurrente es la gestión eficaz de los datos.
• El número de variables usadas en la aplicación irá creciendo con el paso

del tiempo y dificulta cada vez más el mantenimiento y la eficacia de la
aplicación.
• JavaScript cuenta con objetos llamados arrays.
• Permiten una gestión más eficaz para las aplicaciones que presentan una
gran cantidad de datos a manipular.
• Los arrays proporcionan propiedades y métodos que permiten realizar

diferentes tareas sobre una gran cantidad de información.
• Finalmente veremos la creación de objetos definidos por el usuario.
• JavaScript proporciona objetos predefinidos.
• Estos tienen una serie de propiedades y métodos que realizan diferentes

tareas.
• En aplicaciones avanzadas, nos encontraremos con la necesidad de crear

objetos propios con sus propios métodos y propiedades.
2. FUNCIONES PREDEFINIDAS DEL LENGUAJE
• JavaScript cuenta con una serie de funciones predefinidas y por tanto
integradas en el lenguaje.
• Se podrán usar en cualquier momento sin tener que declararlas

previamente y sin tener que conocer todas las instrucciones que realiza.
• Bastará conocer el nombre de la función y el resultado final que

obtenemos al usarla.
• En la Tabla 4.1 vemos algunas de las funciones predefinidas más

utilizadas en JavaScript.
• Muchas pueden realizar sus tareas sin parámetros adicionales.
• Otras deben acceder a valores de variables para producir sus resultados.
• Las variables que reciben las funciones se denominan los argumentos o

parámetros de la función.
Tabla 4.1 Funciones predefinidas de JavaScript
Función Descripción
Recibe como argumento una cadena y la devuelve con su código
escape()
ASCII.
eval() Convierte una parámetro en código JavaScript ejecutable.
isFinite() Verifica si el argumento es o no un número finito.
isNaN() Comprueba si el parámetro es de tipo numérico.
Number() Convierte el argumento en un número de dicho valor.
String() Convierte el argumento en una cadena de dicho valor.
parseInt() Convierte la cadena argumento en un valor numérico entero.
parseFloat() Convierte la cadena argumento en un valor numérico flotante.
• A continuación presentamos una descripción y una serie de ejemplos de

cada una de estas funciones predefinidas de JavaScript.
escape(). Tiene como argumento una cadena de texto.
• Devuelve la cadena utilizando la codificación hexadecimal en el conjunto

de caracteres latinos ISO.
• Si por ejemplo quisiéramos saber la codificación del carácter (?),

podríamos utilizar el siguiente ejemplo: obtendríamos la codificación %3F.
<script type="text/javascript">
var input = prompt("Introduce una cadena");
var inputCodificado = escape(input) ;
alert("Cadena codificada: " + inputCodificado);
</script>
unescape() es la función opuesta a escape().
• Esta función decodifica los caracteres que estén codificados.

eval(). Esta función tiene como argumento una expresión.
• Devuelve el valor de la misma para ser ejecutada como código

JavaScript.
• El siguiente ejemplo permite ingresar al usuario una operación numérica

y a continuación muestra el resultado de dicha operación:
<script type="text/javascript”>
var input = prompt("Introduce una operación numérica”);
var resultado = eval(input);
alert ("El resultado de la operación es: " + resultado);
</script>
isFinite(). comprueba si el argumento corresponde a un número finito.
• En JavaScript un valor es finito si se encuentra en el rango de

±1.7976931348623157 ^10308.
• Si el argumento no se encuentra en este rango o no es un valor

numérico, devuelve false, en caso contrario devuelve true.
• Es útil para comprobar sentencias condicionales y decidir si ejecutar una

serie de instrucciones u otras.
• Así podremos comprobar los límites de las operaciones matemáticas y

evitar errores de este tipo en nuestra aplicación web.
if(isFinite(argumento))
//instrucciones si el argumento es un número finito
}else{
//instrucciones si el argumento no es un número finito}
isNaN(). es el acrónimo de is Not a Number (no es un número).
• Evalúa si el objeto pasado como argumento es de tipo numérico.
• El ejemplo evalúa si el dato introducido es de tipo numérico y utilizando

una sentencia condicional, ejecutamos una instrucción u otra.
var input = prompt("Introduce un valor numérico: ");
if (isNaN(input)) {
alert("El dato ingresado no es numérico.”);
}else{
alert("El dato ingresado es numérico.”);
}
</script>
String(). Convierte el objeto pasado a una cadena de texto.
• Por ejemplo, podemos crear un objeto de tipo Date, y convertir dicho

objeto en una cadena de texto. La Figura 4.1 muestra el resultado de este
ejemplo, además podemos ver el formato predefinido que usa JavaScript
para indicar una fecha.
var fecha = new Date()
var fechaString = String(fecha)
alert("La fecha actual es: "+fechaString);
</script>
Number(). Convierte el argumento a un número.
• Si la conversión falla, la función devuelve NaN (Not a Number).
• Si el objeto es de tipo Date, Number() devolverá el número de

milisegundos transcurridos desde la medianoche del 1 de enero de 1970
hasta la fecha actual.
parselnt(). Intenta convertir la cadena argumento en un número entero

con una base especificada.
• Si no especificamos la base, se utiliza la base decimal (10).
• La base puede ser por ejemplo binaria (2), octal(8), decimal (10) o
hexadecimal (16).
• Si la función encuentra en la cadena a convertir, algún carácter que no

sea numérico, devuelve el valor encontrado hasta ese punto.
• Si el primer valor no es numérico, ldevuelve NaN.
• En la Figura 4.2 vemos un ejemplo en el cual el usuario introduce la

cadena 28.5° y la aplicación abre una ventana emergente con el
resultado después de haber aplicado la función parselnt().
var input = prompt("Introduce un valor: ");
var inputParsed = parselnt(input);
alert("parselnt("+input+"): "+inputParsed);
</script>
Figura 4.2 Ejemplo de la función parseInt()

parseFloat(). Convierte el argumento a un número de punto flotante.
• Si la función encuentra en la cadena a convertir, caracteres que no sean

un número decimal, devuelve el valor encontrado hasta ese punto. Si el
primer valor no es numérico, la función devuelve NaN.
var input = prompt("Introduce un valor: ");
var inputParsed = parseFloat(input);
alert("parseFloat("+input+"): " + inputParsed);
</script>
ACTIVIDADES
Crea un script que utilice el método document.write() para mostrar por
pantalla la codificación de todas las vocales con tilde, tal y como vemos
en la Figura 4.3. Recuerde que para obtener dicha codificación debe usar
la función escape() .
Figura 4.3 Codificación de las vocales con tilde

3. FUNCIONES DEL USUARIO
• Las funciones que JavaScript contiene se pueden utilizar en cualquier

momento.
• Podemos crear nuevas funciones personalizadas con el fin de llevar a

cabo las tareas que queramos.
• Una función será un grupo de instrucciones relacionadas para realizar una

tarea con un nombre identificativo.
• Para ejecutar la función en la aplicación, usaremos el nombre de dicha

función.
• El navegador ejecuta el código JavaScript entre las etiquetas <script> y

</script> al cargar la página.
• Las instrucciones dentro de una función, sólo se ejecutan en el momento

en que se invoque dicha función.
3.1 DEFINICIÓN DE FUNCIONES
• El primer paso en el uso de las funciones del usuario es su definición.
• El código JavaScript se escribe dentro de las etiquetas HTML <body> y

</body>.
• El mejor lugar para definir las funciones JavaScript es dentro las etiquetas
<head> y </head>.
• Esto es así porque el navegador carga siempre todo lo que se encuentra

entre estas etiquetas, por lo que el resto de scripts que se encuentren en
el cuerpo de la página web, ya conocerán la definición de la función.
• La definición de una función consta de cinco partes principales:

– La palabra clave function.
– El nombre de la función.
– Los argumentos utilizados.
– Las instrucciones.
– la palabra clave return.
• Los argumentos y la palabra clave return son dos partes opcionales.
• La sintaxis de la definición de una función es la siguiente:
function nombre_función ([argumentos]) {

grupo_de_instrucciones;
[return valor;]
}
• Function. Palabra clave que debemos utilizar antes de definir cualquier

función.
• Nombre. El nombre de la función se sitúa al inicio de la definición y antes

del paréntesis que contiene los posibles argumentos.
• No puede ser una de las palabras reservadas del lenguaje.

• El nombre debe cumplir ciertas reglas con el fin de obtener un correcto
funcionamiento:
– Deben usarse solo letras, números o el carácter de subrayado.
– Debe ser único en el código JavaScript de la página web, ya que dos
funciones no pueden tener el mismo nombre.
– No pueden empezar por un número.
• El nombre debería ser representativo de la tarea realizada por el grupo de
instrucciones que ejecute la función.
• Argumentos. Los definimos dentro del paréntesis que se encuentra a la

derecha del nombre de la función.
• Existe un array de argumentos que se llama arguments:

funtion greet(){
return `${arguments[0]} ${arguments[1]}, how are you?`
}
• No todas las funciones requieren argumentos.
• En estos casos los paréntesis se dejan vacíos.
• Grupo de instrucciones. Bloque de código JavaScript que se ejecuta

cuando invocamos a la función desde otra parte de la aplicación.
• Las llaves ({}) delimitan el inicio y el fin de las instrucciones.
• Return. Es opcional en las funciones.
• Indica al navegador que la función devuelve un valor a la sentencia que la

invocó.
• Si tenemos una función que verifica la identificación y la contraseña de un

usuario, es de esperar que la función devuelva por ejemplo un valor
booleano que puede ser true (verdadero) o false (falso).
• Veamos un ejemplo de la definición de una función que calcula el importe

de un producto alimenticio después de haberle aplicado el impuesto sobre
el valor añadido (IVA) a los productos de primera necesidad según la
legislación española:
function aplicar_IVA(valorProducto) {
var productoConIVA = valorProducto * 1.21; // IVA del 21%
alert("El precio del producto con IVA es: "+ productoConIVA);
}
• Hemos usado todas las partes descritas anteriormente a excepción de la

palabra return, ya que la función muestra un aviso en el navegador con
el precio actualizado del producto.
• Inmediatamente después de la palabra function, hemos usado el

nombre aplicar_IVA, por lo que no se podrá utilizar dicho nombre en
ninguna otra función de la aplicación.
• Entre el paréntesis hemos escrito un argumento llamado valorProducto.
• Esto significa que la función necesita un valor para poder ejecutarse.
• La primera instrucción define la variable productoConIVA y la inicializa al

valor pasado como argumento multiplicado por 1,21, es decir, el valor del
argumento más el 21%.
• La segunda instrucción muestra el resultado del cálculo de la primera

instrucción.
• En el grupo de instrucciones de una función podemos declarar nuevas

variables.
• Estas variables se denominan variables locales.
• Los fragmentos de JavaScript fuera de la definición de la función,

desconocen dicha variable y no se podrá utilizar en ninguna otra parte
que no sea dentro de la función.
• Por contra, las variables declaradas fuera de las funciones o fuera de

cualquier otro procedimiento como, por ejemplo, las sentencias
condicionales, se denominan variables globales.
• Estas pueden ser usadas en cualquier parte de la aplicación, incluso

dentro de una función.
• Es buena norma declarar las variables internas de las funciones por

medio de let.
3.2 INVOCACIÓN DE FUNCIONES
• Una función se invoca usando su nombre seguido de paréntesis.
• Si la función tiene argumentos, estos deben estar dentro del paréntesis y

en el mismo orden en el que los hemos definido en la función.
• Si no se mantiene el orden obtendremos resultados inesperados.
• Por ejemplo, podemos tener una función que aplica el IVA a una serie de
productos y como argumentos presenta el valor del producto y el
porcentaje del IVA:
function aplicar_IVA(valorProducto, IVA) {

var productoConIVA = valorProducto * IVA;
alert("El precio del producto, aplicando el IVA del" + IVA + "
es: " + productoConIVA);
}
• Al invocar la función, es importante tener en cuenta el orden de los

argumentos.
• Si por ejemplo, queremos utilizar la función para aplicar el IVA del 18% a
un producto que cuesta 300 euros, no es lo mismo invocar aplicar_IVA
(300, 1.18) que aplicar_IVA (1.18, 300).
• En la Figura 4.4 vemos el

ejemplo anterior, en el cual
existe una función que recibe
dos argumentos proporcio-
nados por el usuario y al
final, realiza un cálculo y lo
muestra en una ventana
emergente:
Figura 4.4 Ejemplo de paso de parámetros
• Existen diferentes formar de llamar o invocar una función:
1. Invocar una función desde JavaScript. La definición debe estar

dentro de las etiquetas HTML<head> y </head>. La llamada estará
dentro de las etiquetas <script> y </script> que estarán contenidas
en las etiquetas HTML <body> y </body>. Entre estas etiquetas de la
aplicación debemos utilizar el nombre de la función seguido del paréntesis
que contiene o no los argumentos necesarios para ejecutar la función.
<html> <body>
<head> <script
type="text/javascript">
<title>Invocar función desde
mi_funcion([args]);
JavaScript</title> </script>
<script type="text/javascript"> </body>
function mi_funcion([args]) { </html>
//instrucciones }
</script>
</head>
2. Invocar una función desde HTML. Es posible invocar funciones desde
código HTML. La definición seguirá las mismas indicaciones que antes,
con la diferencia que la llamada la establecemos como un valor de un
atributo de una etiqueta HTML. Es muy común invocar funciones de
JavaScript desde algunos atributos HTML como por ejemplo onload,
onunload u onclick.
• De este modo ejecutamos las funciones JavaScript en el momento de

cargar una página, cerrarla o presionar un botón de la aplicación web.
<html>
<head>
<title>Invocar función desde HTML</title>
function mi_funcion([args]) {
//instrucciones }
</script>
</head>
<body onload="mi_funcion([args])"></body>
</html>
• La mayoría de las funciones devuelven un valor después de llevar a cabo
su grupo de instrucciones.
• Están diseñadas para realizar una tarea y devolver un valor a la sentencia

que la haya invocado.
• Muchos programadores definen funciones que devuelven valores que

contienen un valor que indica si las instrucciones se han ejecutado bien.
• Ejemplo de aplicación que pide al usuario el resultado de una operación

aritmética para verificar que este no sea una máquina que trata de
acceder a nuestra aplicación.
• Según el resultado, se muestra una página web o un mensaje emergente

con un aviso de error.
• En la figura vemos el resultado de la ventana emergente con aviso de

valor incorrecto. No se podrá ver el contenido de la página web.
• Tenemos dos funciones. La primera función captura el valor ingresado por

el usuario y llama a la otra que verifica el resultado
• La segunda utiliza la palabra clave return para devolver un booleano que

dependerá de la comprobación del resultado ingresado por el usuario.
<html>
<head>
<title>Retorno de valor en una función</title>
function ComprobarHumano() {
var resultado = prompt("Introduce el resultado de 144/12:");
var humano = Verificacion(resultado);
if(humano == true) {
document.write("Has ingresado el resultado correcto
y podrás ver el contenido.");
}else{
alert("No has introducido el valor correcto");}
}
function Verificacion(res) {
var compruebaResultado;
if (res == 12) {
compruebaResultado = true;
}else{
compruebaResultado =false;}
return compruebaResultado;
}
</script>
</head>
<body>
ComprobarHumano();
</script>
</body>
</html>
Figura 4.5 Función que emplea el retorno de un valor
ACTIVIDADES
• Escriba una función que recibe como parámetro un número entero y
devuelve como resultado una cadena que indica si el número es par o
impar. Muestre el resultado por pantalla a través del método alert() .
Recuerde que puede ser útil el uso del operador módulo %.
• Realizar las tareas del 1 al 10 de los ejercicios propuestos del tema 4.

3.3. PARÁMETROS POR DEFECTO
• JS permite la declaración de valores por defecto para los parámetros.

• Permite eliminar líneas de comprobaciones y constantes con valores
por defecto.
function suma(a=5, b=10) {
return a+b
}
console.log(suma()); //15
• La asignación de parámetros por defecto consiste en colocar un igual y

el valor que se le quiera dar.
• Si alguno de los parámetros no tiene valor, tomará el valor por defecto.
• Si quisiéramos saltar el valor de alguno de los parámetros para que
tomase su valor por defecto, usamos en la llamada el valor undefined.
console.log(suma(undefined, 5); // 10
3.4. FUNCIONES FLECHA (ARROW)
• Es una forma especial de definir funciones de forma elegante y
simplificada. Son anónimas por definición.
• Continuando con el ejemplo anterior de la suma:
function suma(a, b) {
return a+b;
}
O bien
var suma = function(a, b) {
return a+b;
}
Pasaría a ser en modo flecha lo siguiente:
var add = (a, b) => {
return a + b;
}
Que podríamos simplificar eliminando las llaves:
var add = (a, b) => return a + b;
• Incluso se puede simplificar mas si al usar un único parámetro

eliminamos los paréntesis del mismo:
var add = a => a +10;
• Si no hubiera parámetros, si que tendríamos que poner los paréntesis

vacíos:
var getName = () => “Pepe Pérez”
• Por supuesto, podemos incorporar los valores por defecto a los

parámetros si fuera necesario.
var suma = (a = 5, b = 10) => a + b;
• Si queremos retornar un objeto hay que encerrarlo entre paréntesis.

var getTempItem = id => ({id: id, nombre:”Temp”});
• Vamos a hacer una refactorización para convertir una función
tradicional en una arrow.
• Tenemos una función que calcula la media aritmética de los
parámetros pasados en un array dado.
function getPromedio(…valores) {
return valores.reduce(function (p, c) {
return p+c;
}) / valores.length;
}
getPromedio(3, 7); // 5
getPromedio(2, 10); // 6
• Sumamos todos los valores y los dividimos por el número de

elementos.
• Tenemos dos funciones, una dentro de otra.
• Comenzaremos eliminado la primera parte:
var getPromedio = (…valores) => {
return valores.reduce(function (p, c) {
return p+c;
}) / valores.length;
}
• Hemos eliminado la instrucción ‘function’ pero se ha quedado de

momento el ‘return’.
• Vamos a eliminar la segunda función:
var getPromedio = (…valores) => {
return valores.reduce((p,c)=>return p+c) /
valores.length;
}
• Hemos eliminado function, return y las llaves de la función.

• Vamos a eliminar el primer return.
var getPromedio = (…valores) => valores.reduce((p, c)=>p+c)/
valores.length;
• Esto está mejor, pero como JS nos permite introducir un salto de línea
tras la flecha, obtendremos un código más legible de esta forma:
var getPromedio = (…valores) =>
valores.reduce(
(p, c) => p + c
) / valores.length;
• El primer paréntesis se necesita para recoger los valores, usando el

operador de arrastre (…valores).
• Si fuese un parámetro normal, un array, se eliminaría quedando:
var getPromedio = arr =>
arr.reduce(
(p, c) => p + c
) / arr.length;
console.log(getPromedio([2, 8]));
3.5. FUNCIONES INVOCADAS INMEDIATAMENTE
• Las IIFEs por sus siglas en inglés, nos permiten crear funciones
anónimas y llamarlas inmediatamente sin guardar una referencia de
estas.
• Este patrón es muy útil cuando necesitamos crear un ámbito aislado
del resto del programa.
• Por ejemplo:
let person = function (name) {
return {
getName: function() {
return name;
}
}
}("Luis Miguel");
document.write(person.getName()); //<- Luis Miguel
• La IIFE se usa para crear un objeto con un método getName().

• Este método usa el argumento name como valor de retorno, haciendo
de name un valor privado dentro del objeto retornado.
3.5. FUNCIONES INVOCADAS INMEDIATAMENTE
• Para lograr el mismo resultado usando funciones flecha, debemos
encapsularlas entre paréntesis:
let person = ((name) => {

return {
getName: function() {
return name;
}
}
})("Luis Miguel");
console.log(person.getName()); // <- Luis Miguel
• Notemos que los paréntesis sólo están alrededor de la función flecha y

no llegan hasta ("Luis Miguel").
3.6. FUNCIONES ANIDADAS
• Una función puede tener declaraciones locales en su interior, tanto de
variables como de otras funciones.
let s1 = “How”;
function external(){
let s2 = “are”;
function inner(){
let s3 = “you”;
return s1+s2+s3;
}
return inner;
}
external(); // function inner(){…}

external()(); // => “How are you”
• La variable s2 y la función inner son declaraciones locales de la

función external.
• La variable s3 es local de la función inner.
3.6. FUNCIONES ANIDADAS
• Por la visibilidad sintáctica s1, s2 y s3 son visibles dentro de inner.
• Como una función en un objeto, puede devolverse como retorno de
otra función.
• La función external devuelve la función inner como retorno.
• Por tanto:
– external es una referencia a la función exterior.
– external() devuelve una referencia a la función interior inner.
– external()() ejecuta la función interior inner ( equivale a inner()).
– Como s1, s2 y s3 son visibles en inner, las puede concatenar (s1+s2+s3)
3.7. CIERRES O CLOSURES
• Un cierre crea un entorno de ejecución aislado del exterior usando funciones,
parecidos a módulos o abstracción de datos.
• El cierre es la función que aísla en su interior el entorno de ejecución.
• La función cierre devuelve el objeto interfaz que da acceso a dicho entorno de
ejecución.
• El estado de las variables locales de la función cierre se mantiene entre usos.
function uniqueInteger () {
var _counter = 0;
function count () { return _counter++; };
return count;
};
// assigns return value: function count
var unique = uniqueInteger (); () invoca el cierre, que devuelve la
unique() // => 0 invoques count() función count() que se asigna a
unique.
unique() // => 1 invoques count()
• uniqueInteger devuelve como interfaz la función count que es la que

da acceso al entorno de ejecución.
• La variable _counter solo puede ser modificada por la función
count().
3.7. CIERRES O CLOSURES
• Invocar a unique() es invocar a count(), que incrementa _counter y
devuelve su valor al exterior.
• El cierre y su variable _counter existirán mientras función interfaz
count esté guardada en alguna variable, por esto mantiene los valores
entre las llamadas
// definición equivalente a la anterior,

// sin asignar nombre a la función interfaz
var unique = function () {
var _counter = 0;
return function () { return _counter ++; };
} ();
() invoca el cierre, que devuelve la
unique() => 0 función count() que se asigna a
unique.
unique() => 1
4. ARRAYS
• La mayoría de las aplicaciones web están diseñadas para gestionar un
número elevado de datos.
• Si tenemos una aplicación que gestiona una tienda de productos

alimenticios, es normal usar decenas de variables para cada producto.
• Si quisiéramos definir los nombres de cada uno de ellos, suponiendo que

tenemos 180 productos, podríamos utilizar un código similar al siguiente:
var producto1 ="Pan";

var producto2 ="Agua" ;
var producto3 ="Lentejas";
var producto4 ="Naranjas";
var producto5="Cereales";
…………….
var producto180 = "Salsa agridulce";
• Si quisiéramos mostrar los nombres de estos productos en una página
web, podríamos utilizar el siguiente código:
document.write(producto1);
…………….
• La aplicación así escrita funcionaría correctamente.
• Obviamente sería una tarea compleja, repetitiva y propensa a errores.
• No estaríamos realizando una programación eficaz, con lo cual la

ejecución de la aplicación sería más lenta y difícil de gestionar.
• Para gestionar estas situaciones disponemos de arrays.
• Un array es un conjunto ordenado de valores relacionados.
• Cada valor se denomina elemento.
• Cada elemento tiene un índice que indica su posición en el array.
• Podemos usar índices no numéricos. Arrays asociativos.
• Un array debe tener un nombre que será su identificador.
• Los productos del ejemplo anterior podrían estar almacenados en un

array.
• Un array puede contener elementos de distinto tipo.
• Indexar elementos inexistentes devuelve undefined.
• Un array puede contener otros arrays como elementos.
• Si definimos el nombre de esta tabla como Productos_Alimenticios,

obtendríamos lo siguiente:
Tabla 4.2 Productos_Alimenticios
Índice Contenido
0 Pan
1 Agua
2 Lentejas
3 Naranjas
4 Cereales
… …
179 Salsa agridulce
• Así podríamos acceder al nombre de cada producto con el nombre de la

tabla y el índice del mismo.
• El primer índice de los arrays es siempre cero y no uno, tal y como la

mayor parte de programadores novatos suele pensar.
• A continuación mostramos cómo declarar e inicializar los arrays, además

de enseñar las principales operaciones que podemos realizar con estos.
4.1 DECLARACIÓN DE ARRAYS
• Es necesario declarar un array antes de poder usarlo.
• La declaración de un array consta de seis partes:

– La palabra clave var.
– El nombre del array.
– El operador de asignación.
– La palabra clave para la creación de objetos (new).
– El constructor Array.
– El paréntesis final.
• Su sintaxis es la siguiente:
var nombre del array = new Array();
• No obstante se recomienda usar la forma: var nombreArray = [];
• Usaremos new para crear una instancia del objeto Array.
• El constructor Array() tiene la función de construir el objeto en la

memoria del ordenador.
4.1 DECLARACIÓN DE ARRAYS
• Podemos declarar un array especificando el número de elementos que
contendrá.
• Este número será introducirlo entre el paréntesis del constructor.
• Si conocemos a priori que es necesario un array de diez elementos,

podríamos utilizar el siguiente código:
var nombre_del_array = new Array(10);
• Durante la ejecución podremos aumentar este número si es necesario.
• Generalmente, se suele omitir el número de elementos del array.
• No conocemos exactamente el número de elementos.
• Es una buena práctica especificarlo si se conoce previamente.
• De este modo se hace un uso más eficiente de la memoria.
• La aplicación será más eficiente.

4.1.1 ASIGNACIÓN MÚLTIPLE
• JS tiene una sentencia que permite asignar elementos de un array a
variables individuales.
• Se puede usar para asignar valores iniciales en definiciones de
variables o en la asignación.
• Las variables se agrupan entre corchetes y se relacionan por posición.
let [x, y, z] = [5, 3, 9]; ó [y, z] = [ 3, 6];
• La asignación múltiple permite los valores por defecto.
let [x, y, z =9] = [5, 3]
• Se denomina asignación múltiple o desestructurada.
// Inicializar con los 3

// primeros elementos
// del array
// Con valores por defecto e
let [x, y, z] = [5, 1, 3, 4];
// indefinidos
x => 5
let [x, y, z=1, t=2, v] = [5, , ,10]
y => 1 // Intercambiar
x => 5
z => 3 contenidos
y => undefined
let x = 5, y = 1;
z => 1
[x, y] = [y, x];
t => 10
x => 1
v => undefined
y => 5
4.1.2. OPERADOR SPREAD/REST: …X
• Su semántica es esparcir (spread) o resto (rest) dependiendo del
contexto.
• spread (...x) esparce los elementos del array x en otro array.
• Actúa así cuando se aplica al constructor de array o en la invocación
de una función:
[x, …y, z, …t] o bien mi_función(x, …y, z, …t)
• Operador rest (...x) agrupa un conjunto de valores en el array x
• Agrupa en un array el resto de los elementos asignados de una lista.
[x, y, ...resto] = [1, 2, 3, 4, 5] o function f( x, y,
...resto) {..} let x, y, z;
[y, z, ...x] = [2, 3, 4, 5];
const a = [2, 3];
x => [4, 5];
const b = [0, 1, ...a];
y => 2
b => [0, 1, 2, 3]
z => 3 let [x, y, ...resto] = [0, 1, 2, 3, 4];
f(0, 1, ...a) => f(0, 1, 2, 3)
x => 0
y => 1
resto => [2, 3, 4]
function f(x, y, ...z) {....}
f(0, 1, 2, 3) => f(0, 1, [2, 3])
Buen tutorial sobre destructing assigment y spread/rest: https://javascript.info/destructuring-assignment

Destructing assigment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Spread/rest syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
4.2 INICIALIZACIÓN DE ARRAYS
• Una vez declarado podemos inicializarlo con los elementos que
contendrá.
• Existen diferentes formas de inicializar un array.
• La sintaxis general para hacerlo es la siguiente:

nombre_del_array[índice] = valor_del_elemento;
• Según los datos del ejemplo de los productos alimenticios, podemos
declarar un array llamado productos_alimenticios e inicializarlo con
los siguientes elementos:
var productos_alimenticios = [];

productos_alimenticios [0]= 'Pan';
productos_alimenticios [1]= 'Agua' ;
productos_alimenticios[2]= 'Lentejas';
4.2 INICIALIZACIÓN DE ARRAYS
• Los arrays se pueden declarar e inicializar simultáneamente.
• Esto se realiza por medio de la escritura de los elementos dentro del

paréntesis del constructor.
• Los elementos deberán estar separados por comas:

var productos_alimenticios = ['Pan', 'Agua', 'Lentejas‘];
• En este caso tenemos un conjunto de cadenas, pero podemos utilizar

números, valores booleanos, objetos o incluso otros arrays.
• JavaScript permite mezclar diferentes tipos de datos en un mismo array

sin problemas.
4.3 USO DE LOS ARRAYS MEDIANTE BUCLES
• Si mezclamos las características de los bucles junto a las de los arrays,

podremos apreciar las ventajas cuando debemos trabajar con muchas
variables.
• Por ejemplo, si quisiéramos crear un array que contenga los códigos de

determinados productos, podríamos realizarlo de la siguiente manera:
var codigos_productos = [];
for (let i=0; i<10; i++) {
codigos_productos[i]= "Codigo_producto_" + i;
}
• La sentencia dentro del bucle for emplea el valor de la variable i para

acceder a un índice del array y asignarle una cadena con un código
incremental del producto.
• El problema principal con muchas variables no es la declaración.
• Es trabajar con dichas variables.
• Con los bucles podemos acceder a cada elemento de un array y hacer lo

que queramos con sus valores.
• Por ejemplo, podemos usar el siguiente código si quisiéramos imprimir en

el documento de la página web, todos los códigos que contiene el array
del ejemplo anterior, tal y como vemos en la Figura 4.6.
document.write (codigos_productos [0] + "<br>");
• Usando un bucle for, podemos evitar la escritura de todas estas líneas de
código y escribir unas instrucciones mucho más limpias y eficientes:
for (let i=0; i<10; i++) {

document.write(codigos_productos[i] + "<br>");
}
• Otra forma mas moderna y elegante sería usando el

método forEach, de la siguiente manera:
codigos_productos.forEach((element,
index,data)=>{
document.write(element + “<br/>”);
};
Se invoca una función flecha por cada elemento, donde

element es cada elemento del array, index es el índice
tratado y data es el propio array, siendo estos dos
últimos opcionales.
• Estos métodos invocan la función también con los mismos 3 parámetros.
• elem: elemento del array accesible en la invocación en curso.
• i: índice al elemento del array accesible en la invocación en curso.
• a: array completo sobre el que se invoca el método.
find(function(elem, i, a){…})
[7, 4, 1, 23].find(elem => elem < 3); //=> 1
• Devuelve el 1er elemento donde la función retorna true.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
findIndex(function(elem, i, a){…})
[7, 4, 1, 23].findIndex(elem => elem < 3); // => 2
• Devuelve el índice del 1er elemento donde la función retorna true.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
filter(function(elem, i, a){…})
[7, 4, 1, 23].filter(elem => elem > 5); // => [7, 23]
• Elimina los elementos del array donde la función retorna false

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• También podemos usar el método map para tratar los elementos de un
array de manera muy simple.
map(function(elem, i, a){…})
• Este método crea un nuevo array con los resultados de la llamada a la

función, aplicada a cada elemento del array inicial.
var numeros = [1,5,10,15];

var dobles = numeros.map(function(x) {
return x * 2;
});
// usando la notación arrow
var dobles = numeros.map(x => x*2);
• Dobles será un array cuyo contenido es [2, 10, 20, 30]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• El método reduce añade el parámetro accumulator a element, index y
array.
• accumulator: variable con valor retornado por invocación anterior de la

función.
reduce(function(accumulator, element, index, array){…}), initial_value)
• Inicializa accumulator con initial_value e itera de 0 a array.length-1
[7, 4, 1, 23].reduce((acc, elem) => acc += elem, 0); // => 35
[4, 1, 4, 1, 4].sort().reduce((ac, el, i, a) => el!==a[i-1] ?

ac.concat(el) : ac, []); // => [1, 4]
• sort y reduce se usan en serie primero una y luego la otra.

[4, 1, 4, 1, 4].sort(); // => [1, 1, 4, 4, 4]
[1, 1, 4, 4, 4].reduce((ac, el, i, a) => el!==a[i-1] ?
ac.concat(el) : ac, []); // => [1, 4]
• JavaScript incluye el bucle for...in que itera en las propiedades de un
objeto.
• El bucle for...of de ES6 itera con una función generadora en los
elementos de un objeto iterable.
• Los arrays son objetos y son iterables por lo que pueden procesarse con
ambos bucles.
• La sentencia for (prop in object) {..bloque..} (object es un array u
objeto).
• Ejecuta el bloque para cada propiedad (accesible en la variable prop) del
objeto o array.
• La sentencia for (elem of object) {..bloque..} (object debe ser un
obj. o array iterable).
• Ejecuta el bloque para cada elemento (accesible en la variable elem) del
objeto o array.
• object debe ser un iterable que define el orden del recorrido.
• Por ejemplo, en un array el recorrido empieza en el elemento de índice 0 y
termina en el de length-1
let n = [7, 4, 1, 23]; let n = [7, 4, 1, 23];

let add = 0; let add = 0;
for (let i in n){ for (let elem of n){
add += n[i]; add += elem;
} }
add // => 35 add // => 35
let n = [7, 4, 1, 23]; let n = [7, 4, 1, 23];

let add = 0; let add = 0;
for (let i=0; i < n.length; ++i){ n.forEach(elem => add += elem)
add += n[i]; add // => 35
}
add // => 35
[7, 4, 1, 23].reduce((acc, elem) => acc += elem, 0); // => 35
• Estos 2 ejemplos suman los elementos de Array con los nuevos bucles.
• Equivalen a los vistos anteriormente.
4.4 PROPIEDADES DE LOS ARRAYS
• En JavaScript, un array es en realidad un objeto.
• Tiene una serie de propiedades y métodos al igual que los otros objetos
que hemos estudiado hasta ahora en este libro.
• El objeto Array tiene dos propiedades: length y prototype.
• length, devuelve el número de elementos que contiene el array.
• Esta propiedad es muy útil cuando utilizamos los arrays en los bucles. Su
sintaxis es la siguiente: nombre_del_array.length
• Por ejemplo, anteriormente hemos utilizado un bucle for para imprimir por
pantalla los códigos de determinados productos.
• En este bucle hemos empleado una expresión condicional para imprimir

diez productos, pero es probable que el número de productos aumente con
el paso del tiempo.
• Por este motivo, es mucho más útil definir ese bucle for de la siguiente
manera:
for (let i=0; i<codigos_productos.length; i++) {
document.write(codigos_productos[i] + "<br>");
}
• Y más fácil aún usando forEach.
Codigos.productos.forEach((elemento)=>{
document.write(elemento + “<br/>”;
});
• prototype, es mucho más compleja.
• Con esta propiedad podemos agregar nuevas propiedades y métodos al

objeto Array.
• La sintaxis de prototype es la siguiente:

Array.prototype.nueva_propiedad = valor;
Array.prototype.nuevo_metodo = nombre_de_la_funcion;
• Esto permite al usuario extender la definición de los arrays.
• Si queremos agregar una nueva propiedad, debemos definir un valor

concreto de esa propiedad, aunque luego se pueda cambiar.
• Si además queremos crear un nuevo método, debemos definir

previamente una función y escribir el nombre de dicha función en la
creación del nuevo método.
• Si, por ejemplo, queremos crear una propiedad llamada dominio y

establecerle el valor .com, debemos escribir el siguiente código:
Array.prototype.dominio = ".com";
• Si ahora creamos un array, este ya tendrá definida dicha propiedad.
• Sin embargo, podremos cambiar el valor de esa propiedad en el momento

en que creemos nuevos arrays.
var paginas_comerciales = [];

Array.prototype.dominio=".com";
var paginas_gubernamentales = [];

paginas_gubernamentales.dominio = ".gov“
document.write("Extensión de las páginas comerciales: " +

paginas_comerciales.dominio);
document.write("Extensión de las páginas gubernamentales:"
+ paginas_gubernamentales. dominio) ;
• De este modo, el valor de la propiedad dominio en el primer array será

.com.
• El valor de la misma propiedad en el segundo array será .gov.

4.5 MÉTODOS DE LOS ARRAYS
• El objeto Array posee métodos muy útiles a la hora de manipular y

gestionar los elementos de los mismos.
• Estos métodos permiten unir dos arrays, ordenarlos, convertir sus valores
o eliminar fácilmente algunos de sus elementos.
• Los principales métodos del objeto Array los vemos en la Tabla 4.3.
Tabla 4.3 Métodos del objeto Array
Método Descripción Sintaxis

Añade nuevos elementos y devuelve la
push() nombre_array.push(valor1, valor2, …)
nueva longitud
Selecciona un array y lo concatena con
concat() nombre_array.concat(valor1, valor2, …)
otros elementos en un nuevo array
Concatena los elementos de un array en
join() una cadena separada por un carácter nombre_array.join([separador])
opcional.
reverse() Invierte el orden de los elementos nombre_array.reverse()
Tabla 4.3 Métodos del objeto Array

Método Descripción Sintaxis
Añade elementos al inicio y devuelve el nuevo
unshift() nombre_array.unshift(valor1, valor2, …)
tamaño.
shift() Elimina el primer elemento del array. nombre_array.shift()
pop() Elimina el último elemento del array. nombre_array.pop()
Devuelve un nuevo array con los elementos
slice() nombre_array.slice(inicio,[fin])
divididos según parámetros.
Ordena los elementos de un array. Podemos
sort() nombre_array.sort([función])
definir una función para ello.
Elimina, sustituye o añade elementos nombre_array.splice(incio,
splice()
dependiendo de los argumentos usados. [elem_a_borrar], [valor1, valor2, …])
Busca por algún criterio elementos que
find() nombre_array.find(función)
cumplan la condición y lo devuelve
Igual que la anterior pero nos devuelve el
findIndex() nombre_array.findIndex(función)
índice, en lugar del elemento
Comprueba si algún elemento del array cumple
some() nombre_array.some(function)
con el test
Inserta los elementos de un array en otro
…x let a = [ 5, 7 ,3]; let b = [9, 4, …a]
• Veamos algunos ejemplos de cada uno de los métodos del objeto Array.
push(). declaramos un nuevo array llamado pizzas y con tres elementos.
• Posteriormente, aplicamos el método push() para añadir dos nuevas

pizzas.
• Este método devuelve el nuevo número de elementos presentes en el

array:
var pizzas = ["Carbonara", "Quattro Stagioni","Diavola“] ;
var nuevo_numero_de_pizzas = pizzas.push("Margherita",
"Boscaiola“);
document.write("Número de pizzas disponibles: " +
nuevo_numero_de_pizzas + "<br />“);
document.write(pizzas);
</script>
concat(). Une los elementos de dos o más arrays en uno nuevo.

• Tenemos dos arrays que contienen equipos de primera y de segunda
división del fútbol español.
• Posteriormente, concatenamos estos equipos de fútbol en un nuevo array

llamado equipos_copa_del_rey e imprimimos los valores de los elementos.
var equipos_a = ["Real Madrid", "Barcelona", "Valencia“] ;
var equipos_b = ["Hércules", "Elche", "Valladolid“] ;
var equipos_copa_del_rey = equipos_a.concat(equipos_b);
document.write("Equipos que juegan la copa: " +
equipos_copa_del_rey);
</script>
join(). Devuelve una cadena de texto con los elementos del array.
• Los elementos los podemos separar por una cadena que le pasemos
como argumento del método.
• En el siguiente ejemplo utilizamos un guion como separador entre los

elementos del array pizzas:
var pizzas = ["Carbonara", "Quattro_Stagioni", "Diavola“];
document.write(pizzas.join(" – “));
</script>
reverse(). Invierte el orden de los elementos sin crear un nuevo array.
• En el siguiente ejemplo tenemos un array con los números ordenados del

1 al 10.
• Si se aplica el método reverse() y escribimos el resultado en el documento,

veremos que ahora van del 10 al 1.
var numeros = [1,2,3,4,5,6,7,8,9,10];
numeros.reverse();
document.write(numeros);
</script>
unshift(). Con unshift() podemos añadir nuevos elementos y obtener

la nueva longitud del array al igual que con el método push().
• La diferencia es que push() añade los elementos al final del array,

mientras que unshift() los añade al principio.
• En el siguiente ejemplo tenemos algunas de las últimas sedes de los

juegos olímpicos.
• Si quisiéramos agregar una sede más al inicio del array, el método

unshift() es ideal para esta tarea:
var sedes_JJOO = ["Atenas", "Sydney", "Atlanta“];
var numero_sedes = sedes_JJOO.unshift("Pekin“);
document.write("Últimas " + numero_sedes + " sedes olimpicas:
" + sedes_JJOO);
</script>
shift(). Elimina el primer elemento de un array y lo devuelve.
• Si, por ejemplo, tenemos el mismo array de antes con una lista de pizzas y
quisiéramos eliminar la primera de ellas, podemos utilizar el método
shift() de la siguiente manera:
var pizzas = ["Carbonara","Quattro_Stagioni",“Diavola“];
var pizza_removida = pizzas.shift();
document.write("Pizza eliminada de la lista: " +
pizza_removida + "<br />“);
document.write("Nueva lista de pizzas: " + pizzas);
</script>
pop(). Tiene la misma funcionalidad que el método shift() con la

diferencia de que en vez de eliminar y devolver el primer elemento de un
array, elimina y devuelve el último.
• En el siguiente ejemplo tenemos un array con tres premios.
• El método pop() permite eliminar y devolver el último premio del array,

en este caso el tercer premio.
var premios = ["Coche","1000 Euros","Manual de JavaScript“];
var tercer_premio = premios.pop();
document.write("El tercer premio es: " + tercer_premio + "<br
/>“);
document.write("Quedan los siguientes premios: " + premios);
</script>
slice(). Crea un nuevo array con un subconjunto de elementos
pertenecientes a otro array.
• En el paréntesis especificamos el índice inicial y el final del subconjunto

que se almacenará en un nuevo array.
• El índice final es opcional, si no lo ponemos, tomará el subconjunto desde

el índice inicial hasta el final del array.
• Además, el índice inicial puede ser un número negativo, con lo cual, la

selección comenzaría desde el final del array.
var numeros = [1,2,3,4,5,6,7,8,9,10];
var primeros_cinco = numeros.slice(0,5);
var ultimos_cuatro = numeros.slice(-4);
document.write(primeros_cinco + "<br>");
document.write(ultimos_cuatro);
</script>
sort(). Ordena alfabéticamente un array.

• Podemos crear nuevos criterios de ordenación en una función y pasarle el
nombre de la misma como parámetro.
• En el siguiente ejemplo tenemos una lista de apellidos, la cual ordenamos

alfabéticamente e imprimimos por pantalla:
var apellidos = ["Pérez", "Guijarro", "Arias", "González“] ;
apellidos.sort() ;
document.write(apellidos);
</script>
• Aquí vamos a pasarle una función para ordenar numéricamente el array.
var precios = [50, 47, 23, 78, 95, 12, 104, 49] ;
precios.sort(function(a,b){return a – b});
document.write(precios);
</script>
• En este caso el resultado devuelto será:

12, 23, 47, 49, 50, 78, 95, 104
En lugar del que devolvería de forma alfabética sin la función pasada
como parámetro, que sería:
104, 12, 23, 47, 49, 50, 78, 95
• También podemos llevar a cabo una ordenación aleatoria:
precios.sort(function(a, b){return 0.5 - Math.random()});

splice(). Es el más complejo del objeto Array.
• Podemos añadir o eliminar objetos de un array.
• Los dos primeros parámetros son obligatorios, mientras que el tercero es

opcional.
• El primer parámetro especifica la posición en la cual añadiremos o

eliminaremos los elementos.
• El segundo parámetro especifica cuántos elementos eliminaremos.
• El tercer parámetro indica los nuevos elementos que añadiremos en el

array.
• El siguiente ejemplo presenta un array con una serie de marcas de

coches.
• Con el método splice() añadimos en la posición 2 el elemento llamado

"Seat":
var coches = ["Ferrari", "BMW", "Fiat“];
coches.splice(2,0,"Seat") ;
document.write(coches);
</script>
find() devuelve el primer elemento del array que cumple la condición

especificada.
var numeros = [4, 9, 16, 25, 49];
var busqueda = numeros.find(value => value >18);
document.write(busqueda);
</script>
Este script devolverá 25 en la ejecución.

findIndex() devuelve el índice del primer elemento del array que

cumple la condición especificada
var numeros = [45, 4, 9, 16, 25];
var sobre18 = numeros.findIndex(value => value >18);
document.write(sobre18);
</script>
Este script devolverá 3 en la ejecución.

some() comprueba si algún elemento del array cumple una determinada

condición, por ejemplo si el array tienen valores mayores que 18.
var numeros = [45, 4, 9, 16, 25];
var sobre18 = numeros.some(value => value >18);
document.write(sobre18);
</script>
Este script devolverá true en la ejecución.

… el operador spread inserta los elementos de un array en otro.
var numeros = [45, 4, 9, 16, 25];
var otrosNumeros = [12, 17, …numeros}];
document.write(otrosNumeros.length); //7
</script>
4.6 ARRAYS MULTIDlMENSIONALES
• Hasta el momento hemos estudiado arrays de una sola dimensión.
• Sólo es necesario conocer un índice para acceder a cada elemento.
• Esta estructura es análoga a una lista de elementos.
• Podemos crear arrays de más dimensiones.
• Para ello debemos definir un array que contiene a su vez nuevos arrays
en cada una de sus posiciones.
• Los arrays bidimensionales son los arrays multidimensionales más

comunes.
• Podemos pensar en ellos como si fuesen una tabla con filas y columnas,
por lo que necesitamos conocer dos índices para acceder a cada uno de
sus elementos, tal y como podemos ver en la Tabla 4.4.
TABLA 4.4 Array bidimensional visto como tabla
[Filas, Columnas] 0 1 2
0 elemento[0,0] elemento[0,1] elemento[0,2]
• En JavaScript no existe un objeto llamado array multidimensional.
• Para poder utilizar este tipo de estructuras de datos debemos definir un

array, en el que en cada una de sus posiciones debemos crear a su vez
otro array.
• En el siguiente ejemplo definimos un array bidimensional en el que por

un lado tenemos el nombre de algunos países (España, Suiza y Portugal)
y, por el otro, las cinco palabras más buscadas en Internet de cada país
en el año 2011, según los datos ofrecidos por Google+,
var palabras_espana = []; var palabras_mas_buscadas = [];

palabras_espana [0] = 'facebook'; palabras_mas_buscadas[0]=palabras_espana;
palabras_espana[1] ='tuenti'; palabras_mas_buscadas[1]=palabras_suiza;
palabras_mas_buscadas[2]=palabras_portugal;
palabras_espana[2] ='youtube';
palabras_espana [3] ='hotmail';
palabras_espana[4] ='marca
var palabras_suiza = [];

palabras_suiza[0]= 'facebook';
palabras_suiza[1] ='youtube';
palabras_suiza[2] ='hotmail';
palabras_suiza[3] ='google';
palabras_suiza[4] ='blick';
var palabras_portugal = [];

palabras_portugal [0]= 'facebook';
palabras_portugal [1]= 'youtube';
palabras_portugal [2] ='hotmail';
palabras_portugal [3] ='jogos';
palabras_portugal [4] ='download';
• Inicialmente hemos definido tres arrays de una dimensión.
• Cada uno de ellos contiene las cinco palabras más buscadas en Internet
en España, Suiza y Portugal.
• Después hemos creado un array de tres elementos que se corresponden

a los arrays que contienen las palabras más buscadas en Internet en
cada uno de los tres países.
• Hemos usado una línea de código para definir e inicializar cada elemento,
pero es posible usar los métodos abreviados como describe el siguiente
código:
var palabras_espana = ['facebook', 'tuenti', 'youtube', 'hotmail',
'marca‘];
var palabras_suiza = ['facebook', 'youtube', 'hotmail', 'google',
'blick‘];
var palabras_portugal = ['facebook', 'youtube‘, 'hotmail', 'jogos',
'download‘];
var palabras_mas_buscadas = [palabras_espana, palabras_suiza,
palabras_portugal ];
• Así obtendríamos una estructura similar a una tabla en la que las filas
corresponden a los países y las columnas a las palabras más buscadas en
Internet en cada uno de ellos.
Tabla 4.5 Palabras mas buscadas en Internet en algunos estados
[País, Ranking] 0 1 2 3 4
0 (España) facebook tuenti youtube hotmail marca
1 (Suiza) facebook youtube hotmail google blick
2 (Portugal) facebook youtube hotmail jogos download
• Al igual que con los arrays de una sola dimensión, podemos utilizar bucles
para definir e inicializar arrays multidimensionales.
• Debemos utilizar un bucle anidado, es decir, un bucle dentro de otro bucle.
• En el siguiente ejemplo utilizaremos dos bucles for anidados para

recorrer y recuperar el valor de todos los elementos del array
bidimensional.
• Además, utilizaremos la técnica de generación de código HTML para
construir una tabla en la cual estarán presentes todos los elementos del
array.
document.write("<table border=1>");
for (i=0; i<palabras_mas_buscadas.length; i++) {
document.write("<tr>")
document.write("<td><b>Estado " + i + "</b></td>")
for (j=0; j<palabras_mas_buscadas[i].length; j++) {
document.write("<td>" + palabras_mas_buscadas [i] [j]
+"</td>")
}
document.write("</tr>")
}
document.write("</table>")
• En este último ejemplo, además de usar bucles anidados para acceder a

cada elemento del array bidimensional, hemos usado la generación de
las etiquetas HTML para crear tablas (<table>) con sus respectivas
líneas (<tr>) y celdas (<td>).
ACTIVIDADES
1. A partir del siguiente array:

var palabras = ['botella', 'zeta', 'androide', 'minuto‘]; ordene
alfabéticamente sus elementos utilizando el método designado para ello y muestra
el resultado por pantalla.
2. Cree un script que tome una serie de palabras ingresadas por el usuario y
almacene esas palabras en un array. Posteriormente, manipule ese array para
mostrar en una nueva ventana los siguientes datos:
a. La primera palabra ingresada por el usuario.
b. La última palabra ingresada por el usuario.
c. El número de palabras presentes en el array.
d. Todas las palabras ordenadas alfabéticamente.
Podemos ver un ejemplo del resultado de esta

actividad en la Figura 4.7.
Figura 4.7 Manipulación de arrays

3. Realizar la tarea 11 de los ejercicios propuestos
del tema 4.
5. OBJETOS DEFINIDOS POR EL USUARIO
• Serán objetos que pueden tener sus propios métodos y propiedades.
• La creación de nuevos objetos resulta útil en el desarrollo de aplicaciones

avanzadas.
• Esto será útil en aplicaciones en las que no sean suficientes las

características y funcionalidades proporcionadas por los objetos
predefinidos de JavaScript.
• Veremos cómo crear nuevos objetos, además de cómo crear propiedades

y métodos característicos de estos nuevos objetos
5.1 DECLARACIÓN E INICIALIZACIÓN DE LOS OBJETOS
• Un objeto es una entidad que posee unas propiedades que lo caracterizan

y unos métodos que actúan sobre dichas propiedades.
• Para declarar objetos propios debemos seguir la siguiente sintaxis:

function mi_objeto(valor_1, valor 2, valor_x) {
this.propiedad_1= valor 1;
this.propiedad_2=valor_2;
this.propiedad_x=valor_x;
}
• En la creación de los objetos empleamos la palabra clave function.
• Además debemos darle un nombre al nuevo tipo de objeto que estamos

creando y unos valores iniciales.
• Se corresponderán con cada una de las propiedades que definamos.

• Veremos un ejemplo de creación de un nuevo objeto que representa un
coche.
• Este objeto tendrá tres propiedades que corresponden a la marca y el

modelo del coche, además de su año de fabricación:
function Coche(marca_in, modelo_in, año_in) {
this.marca = marca_in;
this.modelo = modelo_in;
this.año = año_in;
}
</script>
• Una vez declarado el nuevo tipo de objeto podemos crear instancias del
mismo a través de la palabra clave new.
• En el siguiente ejemplo creamos cuatro instancias del objeto Coche.

• Todas las instancias las guardamos en un array y, posteriormente, con un
bucle for, accedemos e imprimimos por pantalla la marca, el modelo y el
año de fabricación de cada una de las instancias de este objeto.
var coches = [];
coches[0] = new Coche ("Ferrari", "Scaglietti", "2010");
coches [1] = new Coche ("BMW", "Z4", "2010");
coches[2] = new Coche("Seat", "Toledo", "1999");
coches[3] = new Coche("Fiat", "500", "1995");
for(i=0; i<coches.length; i++) {

document.write("Marca: " + coches[i].marca +
" - Modelo: " + coches[i].modelo + " - Año
de fabricación: " + coches[i].anyo + "<br>");
}
</script>
• En la Figura 4.8 vemos el resultado de la ejecución del ejemplo anterior.
• En este caso mostramos cada uno de los valores de la propiedad marca,

modelo y año de fabricación.
Figura 4.8 Ejemplo de creación de objetos personalizados

• A partir de JS6 o ECMAScript 2015 tenemos una forma de definir objetos
mucho mas convencional respecto a otros lenguajes pero que siguen el
paradigma de la creación de objetos vista hasta ahora.
• Hay que decir que es algo sólo semántico, ya que siguen existiendo los
prototipos.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
• Sólo puede haber un método especial con el nombre de "constructor" en

una clase. Un error de sintaxis será lanzada, si la clase contiene más de
una ocurrencia de un método constructor.
• Un constructor puede utilizar la palabra clave super para llamar al
constructor de una clase padre.
• Si no especifica un método constructor, se utiliza un constructor
predeterminado.
• Una importante diferencia entre las declaraciones de funciones y las
declaraciones de clases es que las declaraciones de funciones son
alojadas y las declaraciones de clases no lo son.
• En primer lugar necesitas declarar tu clase y luego acceder a ella, de otra
modo el ejemplo de código siguiente arrojará un ReferenceError:
const p = new Rectangle(); // ReferenceError
class Rectangle {}
• Tambien Podemos definir clases con Expresiones de clase.

• Las expresiones de clase pueden ser nombradas o anónimas.
• El nombre dado a la expresión de clase nombrada es local dentro del
cuerpo de la misma.
// Nombrada
// Anonima var Poligono = class Poligono {
var Poligono = class { constructor(alto, ancho) {
constructor(alto, ancho) { this.alto = alto;
this.alto = alto; this.ancho = ancho;
}
this.ancho = ancho;
};
}
}; Nota: Las expresiones de clase están sujetas a las mismas restricciones
de elevación que se describen en la sección Class declarations.
5.2 DEFINICIÓN DE PROPIEDADES Y MÉTODOS
• En la creación de las propiedades de los objetos utilizamos la palabra

clave this seguida del nombre de la propiedad y el valor asignado a
dicha propiedad.
• La palabra clave this hace referencia al objeto en el que utilizamos dicha

palabra.
• Podemos agregar nuevas propiedades a las instancias de los objetos

aunque estas no hayan sido declaradas en la definición del mismo.
• El objeto coche presentaba tres propiedades: marca, modelo y año de

fabricación.
• Todas las instancias de este objeto tendrán estas tres propiedades.
• Es posible añadir otras propiedades a cada instancia del objeto

• Por ejemplo, una vez creado una instancia del objeto Coche, podríamos
añadir la siguiente propiedad:
function Coche (marca_in, modelo_in, año_in) {

}
var mi_coche = new coche("Pegeout", "206cc", "2003");
mi_coche.color = "azul";
• La instancia llamada mi_coche tendrá la nueva propiedad que

proporciona el color.
• Esta nueva propiedad solo afectará a esta instancia del objeto.
• Otra característica es la posibilidad de establecer un objeto como

propiedad de otro objeto.
• Si tenemos un objeto que representa un concesionario de venta de

coches, podríamos definir una nueva propiedad del objeto Coche que
corresponde a los datos del concesionario donde se ha vendido.
• El objeto Concesionario podría tener a su vez algunas propiedades,

como el Código de oficina, la ciudad donde se encuentra y el nombre del
responsable.
function Concesionario(cod_oficina_in, ciudad_in, responsable_in) {
this.cod oficina = cod_oficina_in;
this.ciudad = ciudad_in;
this.responsable = responsable_in;
}
function Coche(marca_in, modelo_in, anyo_in, concesionario_in) {

this.concesionario = concesionario_in;
}
var concesionario_atocha = new Concesionario('281', 'Madrid', 'Pedro

Bravo');
var mi_coche = new Coche('Citroen', 'C4', '2010',
concesionario_atocha);
• Dentro de la definición de los objetos personalizados, podemos incluir

funciones que acceden a las propiedades.
• Estas funciones se denominan los métodos del objeto.
• Para ello, debemos definir una función que realice las instrucciones que
queramos ejecutar y en la misma sección donde definimos las
propiedades, añadimos el nombre de la función a través de la palabra
clave this.
• Siguiendo el mismo ejemplo anterior, podríamos crear una función que

escriba en pantalla todos los datos del coche y añadir dicha función en la
definición del objeto:
function imprimeDatos() {
document.write("<br>Marca: " + this.marca);
document.write("<br>Modelo: " + this.modelo);
document.write("<br>Año: " + this.año);
}
function Coche(nombre_in, modelo_in, anyo_in) {

this.marca = nombre_in;
this.imprimeDatos = imprimeDatos;
}
var mi_coche = new Coche("Seat", "Toledo", "1999");
mi_coche.imprimeDatos();
5.3 Ejemplos
• Usando el método constructor
class Square extends Polygon {
constructor(length) {
// Aquí, llama al constructor de la clase padre con sus longitudes
// contemplando la anchura y la altura del Polígono
super(length, length);
// Nota: En las clases derivadas, super() se debe llamar primero
// Se puede utilizar "this". Dejando esto causará un error de
//referencia.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
5.3 Ejemplos
Constructores por defecto.
• Si no especifica un método constructor, se utiliza un constructor
predeterminado.
• Para las clases base, el constructor por defecto es:
constructor() {}
• Para las clases derivadas, el constructor por defecto es:
constructor(...args) {
super(...args);
}
Constructor padre
• La palabra clave super se utiliza para acceder y llamar a las funciones del
padre de un objeto.
super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);
• Cuando se utiliza en un constructor, la palabra clave super aparece sola y

debe utilizarse antes de que se utilice esta palabra clave. La palabra clave
super también se puede utilizar para llamar funciones en un objeto padre.
5.3 Ejemplos
• Aquí super() es llamado para evitar duplicar las partes del constructor
que son comunes entre Rectángulo y Cuadrado.
class Rectangulo {
constructor(height, width) {
this.name = 'Rectangulo';
this.height = height;
this.width = width;
}
sayName() {
console.log(‘Hola, soy un ', this.name + '.');
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
5.3 Ejemplos
class Cuadrado extends Rectangulo {

constructor(length) {
this.height; // ReferenceError, super necesita llamarse primero!
// Aquí, llama al constructor de la clase de padres con longitudes

// proporcionado para la anchura y la altura del rectángulo
super(length, length);
// Nota: En las clases derivadas, super() debe ser llamado antes

// de poder usar ‘this'. Si se omite, se producirá un error de
// referencia.
this.name = ‘Cuadrado';
}
}
5.3 Ejemplos
Super- llamando a métodos estáticos
• También podemos llamar a super en los métodos estáticos.
class Rectangulo {
constructor() {}
static logNbSides() {
return ‘Tengo 4 lados';
}
}
class Cuadrado extends Rectangulo {

constructor() {}
static logDescription() {
return super.logNbSides() + ‘ que son todos iguales';
}
}
Cuadrado.logDescription(); // ‘Tengo 4 lados iguales'
ACTIVIDADES
Utilice el código empleado para la generación de las cuatro instancias del

objeto Coche y modifíquelo para que los valores de cada una de sus
propiedades se impriman en una tabla HMTL (<table>). Utilice la
generación de código HTML desde código JavaScript. Cada instancia del
objeto debe ocupar una línea (<tr>) y el valor de cada propiedad debe
ocupar una celda (<td>) de dicha línea. El resultado debe ser similar al de
la Figura 4.9.
EJERCICIOS PROPUESTOS
1. Cree un script que solicite un valor numérico al usuario en base octal
(8) y posteriormente muestre su equivalente en base decimal (10). Utilice
el método alert() parar mostrar el resultado en una ventana emergente.
2. Cree una aplicación que solicite dos números enteros al usuario. Estos
números serán los parámetros de la función que se debe definir y que
devolverá la suma de dichos números. Utilice el método alert() para
mostrar el resultado por pantalla. Es necesario que recuerde el uso del
método parselnt() para controlar los datos que ingresa el usuario.
3. Cree un array llamado meses. Este array deberá almacenar el nombre

de los doce meses del año. Muestre por pantalla el nombre de cada uno
de ellos utilizando un bucle for.
4. Cree un script que defina un objeto llamado Producto_alimenticio. Este

objeto debe presentar las propiedades código, nombre y precio, además
del método imprimeDatos, el cual escribe por pantalla los valores de sus
propiedades.
Posteriormente, cree tres instancias de este objeto y guárdelas en un
array. Con la ayuda del bucle for, utilice el método imprimeDatos para
mostrar por pantalla los valores de los tres objetos instanciados.
5. Realizar las tareas de la 12 a la 14 de los ejercicios propuestos del

tema 4.
Comportamiento del puntero this
• This se comporta de diferente manera
según el lugar donde se invoca.
• Podemos tener:
– Asignación implícita
– Asignación explícita
– Asignación con new
– Asignación global
– Asignación en las arrow functions

Tema 4: Programación Con Funciones, Arrays Y Funciones Definidas Por El Usuario

Cargado por

Copyright:

Formatos disponibles

Tema 4: Programación Con Funciones, Arrays Y Funciones Definidas Por El Usuario

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 4: Programación Con Funciones, Arrays Y Funciones Definidas Por El Usuario

Cargado por

Copyright:

Formatos disponibles

TEMA 4

• Poder crear funciones personalizadas para realizar tareas

• Comprender el objeto Array de JavaScript y familiarizarse con sus

• Crear objetos personalizados diferentes a los objetos predefinidos

• Definir propiedades y métodos de los objetos personalizados.

• Comprobar el tipo de los datos que se ingresan por pantalla.

• Si son numéricos, cadenas de texto o valores booleanos.

• Para esto usamos instrucciones que en algunos casos ocupan bastantes

• Cuando esto se repiten una y otra vez, el código fuente de la aplicación se

– El mantenimiento se dificulta debido a que si queremos modificar una instrucción

• Podremos definir estas instrucciones en una parte de código delimitado e

• Estas instrucciones englobadas en un mismo proceso se denominan

• En este capítulo veremos las principales funciones predefinidas en

• Otro problema recurrente es la gestión eficaz de los datos.

• El número de variables usadas en la aplicación irá creciendo con el paso

• Los arrays proporcionan propiedades y métodos que permiten realizar

• Finalmente veremos la creación de objetos definidos por el usuario.

• JavaScript proporciona objetos predefinidos.

• Estos tienen una serie de propiedades y métodos que realizan diferentes

• En aplicaciones avanzadas, nos encontraremos con la necesidad de crear

• Se podrán usar en cualquier momento sin tener que declararlas

• Bastará conocer el nombre de la función y el resultado final que

• En la Tabla 4.1 vemos algunas de las funciones predefinidas más

• Muchas pueden realizar sus tareas sin parámetros adicionales.

• Otras deben acceder a valores de variables para producir sus resultados.

• Las variables que reciben las funciones se denominan los argumentos o

• A continuación presentamos una descripción y una serie de ejemplos de

• Devuelve la cadena utilizando la codificación hexadecimal en el conjunto

• Si por ejemplo quisiéramos saber la codificación del carácter (?),

unescape() es la función opuesta a escape().

• Esta función decodifica los caracteres que estén codificados.

• Devuelve el valor de la misma para ser ejecutada como código

• El siguiente ejemplo permite ingresar al usuario una operación numérica

• En JavaScript un valor es finito si se encuentra en el rango de

• Si el argumento no se encuentra en este rango o no es un valor

• Es útil para comprobar sentencias condicionales y decidir si ejecutar una

• Así podremos comprobar los límites de las operaciones matemáticas y

• Evalúa si el objeto pasado como argumento es de tipo numérico.

• El ejemplo evalúa si el dato introducido es de tipo numérico y utilizando

• Por ejemplo, podemos crear un objeto de tipo Date, y convertir dicho

• Si la conversión falla, la función devuelve NaN (Not a Number).

• Si el objeto es de tipo Date, Number() devolverá el número de

parselnt(). Intenta convertir la cadena argumento en un número entero

• Si no especificamos la base, se utiliza la base decimal (10).

• Si la función encuentra en la cadena a convertir, algún carácter que no

• En la Figura 4.2 vemos un ejemplo en el cual el usuario introduce la

Figura 4.2 Ejemplo de la función parseInt()

• Si la función encuentra en la cadena a convertir, caracteres que no sean

Figura 4.3 Codificación de las vocales con tilde

• Las funciones que JavaScript contiene se pueden utilizar en cualquier

• Podemos crear nuevas funciones personalizadas con el fin de llevar a

• Una función será un grupo de instrucciones relacionadas para realizar una

• Para ejecutar la función en la aplicación, usaremos el nombre de dicha

• El navegador ejecuta el código JavaScript entre las etiquetas <script> y

• Las instrucciones dentro de una función, sólo se ejecutan en el momento

• El código JavaScript se escribe dentro de las etiquetas HTML <body> y

• Esto es así porque el navegador carga siempre todo lo que se encuentra

• La definición de una función consta de cinco partes principales:

– Los argumentos utilizados.