Fundamentos de programación con JavaScript

1
Fundamentos de programación con JavaScript

Tabla de contenido

Fundamentos de programación con JavaScript ...................................................... 5

Sobre el autor .......................................................................................................... 5
Sobre este libro ....................................................................................................... 6
Diagramas de flujo .................................................................................................. 8
Condicionales ............................................................................................. 10
Ciclos .......................................................................................................... 15
Mi primer hola mundo con JavaScript ................................................................... 20
¿Qué es JavaScript? .................................................................................. 20
Historia resumen ......................................................................................... 21
Node.js........................................................................................................ 22
Hola mundo ................................................................................................ 22
Antes de comenzar ............................................................................................... 24
Tipos de datos y estructura ................................................................................... 25
Tipos primitivos ........................................................................................... 25
Tipos objeto ................................................................................................ 26
Definiendo variables .............................................................................................. 28
Métodos de console .............................................................................................. 30
Console.error() ............................................................................................ 31
Console.info() ............................................................................................. 31
Console.log() .............................................................................................. 31
Console.warn() ........................................................................................... 31
Operadores ........................................................................................................... 32
Operadores de comparación ...................................................................... 32
Operadores de igualdad ............................................................................. 32
Operadores relacionales ............................................................................. 34
Operadores lógicos ..................................................................................... 36
Condicionales en JavaScript ................................................................................. 38

2
Fundamentos de programación con JavaScript

if simple....................................................................................................... 38
if/else .......................................................................................................... 38
If/else if ....................................................................................................... 39
Asignación condicional ............................................................................... 39
Arreglos o Matrices ............................................................................................... 40
Ciclos en JavaScript .............................................................................................. 46
Sentencia for............................................................................................... 46
Sentencia do while ...................................................................................... 47
Sentencia while ........................................................................................... 48
Sentencia break .......................................................................................... 49
Sentencia for in ........................................................................................... 50
Sentencia for of ........................................................................................... 51
Sentencia forEach ...................................................................................... 51
Objetos .................................................................................................................. 52
Método assign ............................................................................................ 54
Método Keys ............................................................................................... 54
Método créate y getOwnPropertyNames .................................................... 55
Método values ............................................................................................ 56
Método entries ............................................................................................ 56
Funciones .............................................................................................................. 58
Closures ................................................................................................................ 60
Clases ................................................................................................................... 62
Declaración de clases ................................................................................. 62
Expresiones de clases ................................................................................ 63
Definiendo métodos .................................................................................... 65
Método estático .......................................................................................... 65
Subclases con extends ............................................................................... 66
ES2015 o ES6 ....................................................................................................... 68
Arrow function ............................................................................................. 68
Let y Const.................................................................................................. 69

3
Fundamentos de programación con JavaScript

Template Strings ......................................................................................... 71

Valores por defectos ................................................................................... 72
Destructuring .............................................................................................. 73
This ............................................................................................................. 73
Symbol ........................................................................................................ 75
Asincronismo con JavaScript ................................................................................ 76
Callback’s ................................................................................................... 78
Promesas.................................................................................................... 80
Async / Await .............................................................................................. 82
JSON y AJAX ........................................................................................................ 83
JSON .......................................................................................................... 83
AJAX ........................................................................................................... 85
Programación funcional o declarativa ................................................................... 88
Inmutabilidad .............................................................................................. 89
Funciones puras ......................................................................................... 90
Funciones de orden superior ...................................................................... 93
Uso del currying .......................................................................................... 94
Resolviendo problemas con JavaScript ................................................................ 98
Problema tipo condicional #1 ...................................................................... 98
Problema tipo condicional #2 ...................................................................... 99
Problema tipo condicional #3 ...................................................................... 99
Problema tipo ciclos #1 ............................................................................. 100
Problema tipo ciclos #2 ............................................................................. 101
Problema tipo ciclos #3 ............................................................................. 102
Problema final ........................................................................................... 103

4
Fundamentos de programación con JavaScript

Fundamentos de programación con JavaScript

Aprende los fundamentos de programación con uno de los lenguajes de
programación más demandados de la industria. Aprende desde cero hasta
dominar JavaScript.

Copyright © 2020 John Serrano por la obra y la edición.

Este libro está a la venta en leanpub.com.

Publicado por johnserrano.co

Sobre el autor
John Serrano (Colombia, 1992) Desarrollador Web Full-Stack. Amante de
JavaScript y entusiasta de las tecnologías web: Node.js, Docker, Firebase, React,
etc. Con varios años de experiencia tanto en empresas privadas y como
FreeLancer.

Tecnólogo en análisis y desarrollo de sistemas de la información, muy pronto un

egresado de la Universidad Santo Tomás como ingeniero en informática. En
constante proceso de aprendizaje sobre todas las nuevas tecnologías, es un
amante del autoaprendizaje a través de Internet. Puedes encontrar sus artículos y
tutoriales en su blog johnserrano.co.

5
Fundamentos de programación con JavaScript

Sobre este libro

Cuando comenzamos en el mundo de la programación no tenemos claro que es la
lógica de programación simplemente porque no se comprendió bien en los
estudios de la Universidad o porque comenzamos como una afición a programar,
en este libro quiero llevarlo desde lo más básico de la programación hasta un nivel
medio avanzado, aprenderás que es un algoritmo, como resolver problemas con
algoritmos, adquirir la lógica de la programación hasta manejar un lenguaje de
programación.

Porque JavaScript, bueno bien porque es uno de los lenguajes más demandado
en la industria hoy en día, a pesar de que se creó para ser usado en los
navegadores hoy en día también puede ser usado en el servidor con Node.js.
Gracias a JavaScript se pueden crear Single Page Applications sin necesidad de
recargar la página para navegar en el sitio web o aplicación. También se pueden
crear aplicaciones basadas en componentes gracias a React, Polymer,
aplicaciones híbridas con herramientas como Ionic, React Native para crear
aplicaciones nativas para iOS y Android.

Lo primero que tenemos que aprender muy bien es aprender a resolver problemas
de una forma lógica sin necesidad de aprender un lenguaje de programación o
usar algunas herramientas para desarrollar como lo pueden ser librerías,
frameworks, etc. Por esta razón comenzaremos resolviendo problemas planteando
algoritmos y luego aprenderemos las bases de JavaScript puro o también
conocido como Vanilla JS. Creo que la mejor forma de aprender a resolver un
problema y adquirir ese pensamiento lógico son los diagramas de flujo, pero que
es un algoritmo. Un algoritmo es un conjunto de instrucciones o reglas definidas y
no-ambiguas, ordenadas y finitas que permite, típicamente, solucionar un
problema.

6
Fundamentos de programación con JavaScript

Espero que disfrutes del ebook y te sirva para tu carrera profesional. Cualquier
cosa que necesites me encuentras en mi blog:
• John Serrano Blog

Y en las redes sociales:

• Sígueme en Twitter @jandrey15
• Sígueme en Facebook
• Estoy en Instagram como @jandrey15

Sin más, te dejo con el ebook.

7
Fundamentos de programación con JavaScript

Diagramas de flujo
Para practicar con los diagramas de flujo pueden instalar un programa llamado
DFD o usar su versión portable yo voy a usar ese para mostrar los ejemplos
veamos cómo se ve el programa cuando lo abrimos por primera vez.

Como podemos ver en la parte superior

tenemos unos símbolos y en el centro
podemos ver dos círculos un que dice inicio
y fin. Porque todo proceso o algoritmo tiene
un inicio y un fin, veamos un ejemplo básico
de cómo usar esta herramienta.

Nota: Con el símbolo de play ejecutamos

nuestro diagrama de flujo.

8
Fundamentos de programación con JavaScript

Un ejercicio básico para comprender como funciona el programa y que son todo
este símbolo es una suma básica. Cada uno de estos símbolos es el flujo
algoritmo que nosotros le damos para resolver un problema veamos que significa
da uno de ellos.

Este símbolo nos indica que es de tipo salida el cual si hacemos doble click sobre
el podemos agregar texto entre comillas.

Este símbolo es de tipo lectura y podemos indicarle una variable la cual va recibir
el valor que pasemos nosotros manualmente cuando se ejecute el pequeño
programa, una variable no es más que la representación de un valor con alguna
letra o texto. Si hacemos doble click sobre el símbolo podemos crear esa variable.

Este símbolo es de tipo asignación, el cual nos permite hacer la suma de las
variables que se crearon en este caso fue A y B y lo asignamos a una nueva
variable llamada C donde se va guardar el resultado de sumar A y B.
Prácticamente toda la lógica de nuestro pequeño programa está en esta operación
porque el problema es sumar dos número y lo resolvemos con este símbolo.

Por último, tenemos otro símbolo de tipo salida donde colocamos texto con las
variables ya creadas donde nos muestra el resultado de la suma. Como vemos no
9
Fundamentos de programación con JavaScript

es tan complicado usar el programa aún faltan algunos símbolos por ver, pero
para comenzar esta bien con estos ya que son los básicos, a medida que
avancemos iremos usando los demás símbolos.

Ahora veamos un problema y cómo podemos resolverlo con nuestros diagramas

de flujo.

Condicionales

Problema #1
IGUALES O DIFERENTES: Dados dos números enteros, calcular si son iguales o
diferentes.

Leamos por un momento este problema

piensa en la forma de resolverlo con los
diagramas de flujo que ya vimos, dice
dados dos números enteros, es decir
vamos a necesitar el símbolo de lectura
para crear dos variables y debemos usar un
nuevo símbolo de tipo condición para
resolver el problema.

10
Fundamentos de programación con JavaScript

Como podemos ver pedimos los valores o números, pero tenemos algo nuevo un
símbolo de tipo condicional donde podemos usar un operador diferencial el cual lo
usamos con estos símbolos != donde si numero1 es diferente de numero2 si eso
es verdad pasa por el sí de lo contrario pasara por el no, lo único que hace un
condicional es validar si una variable cumple con una condición y solo tiene 2
posibles resultados un sí o un no.

Nota: más adelante hablaremos sobre los operados de comparación.

Vamos a ver otros problemas más y tratar de comprender como resolverlo,

empleando algoritmos en un diagrama de flujo y llegar a la solución del problema.

Problema #2
MAYOR MEDIO Y MENOR: Dados 3 números diferentes, calcular el mayor, el
medio y el menor.

Nuevamente comencemos a pensar cómo podríamos resolver este problema lo

primero es que nos dicen dados 3 números diferentes ya con esto sabemos que
necesitamos símbolos de lectura, calcular el mayor, el medio y el menor, ya con
esto sí o sí debemos usar símbolo de condicional veamos la solución.

11
Fundamentos de programación con JavaScript

Como podemos ver este problema es un poco más complejo que el anterior
porque tenemos que usar varios condicionales y usar operadores lógicos, no se
preocupe más adelante veremos con mayor entendimiento que son los
operadores lógicos. En el primer condicional preguntamos que si a > b and a > c
con esto ya sabemos que el número mayor es el valor que está en la variable a
sabiendo esto ahora preguntamos que si b < a and b < c si la respuesta es sí del
condicional ya sabemos que el número menor es el valor que está en la variable b
como resultado solo queda descartar que el medio en este caso sería el valor que
está en la variable c.

Esto mismo que se hizo por el condicional derecho hacemos por el condicional
izquierdo, pero ya sabemos que a puede ser menor o medio.

12
Fundamentos de programación con JavaScript

Problema #3
Presentar un menú de 5 platos de un restaurante, el usuario al seleccionar un
plato le debe salir el precio.

Si pensamos como plantear este problema en un algoritmo usando los diagramas

de flujo podemos ver que nos dice un menú de 5 platos, lo primero es mostrar los
platos y un indicador de cada plato asignamos ese valor en una variable
num_plato y luego con los condicionales validamos si el número del plato
seleccionado corresponde con los platos de nuestro menú hacemos esto por cada

13
Fundamentos de programación con JavaScript

plato y mostramos un mensaje con el precio correspondiente, en el caso de que

no existe ese número le indicamos simplemente que ese plato no existe.

A continuación, dejare unos problemas de tipo condicional para que practiques.

Más problemas de tipo condicionales:

1. IGUALES O DIFERENTES: Dados dos números enteros, calcular si son iguales

o diferentes.

2. MENOR DE DOS NUMEROS: Dados dos números enteros, calcular el menor

de ellos.

3. MENOR DE TRES NUMEROS: Dados 3 números diferentes, calcular el menor

de ellos.

4. MEDIO DE TRES NUMEROS: Dados 3 números diferentes, calcular el de la

mitad (no es el mayor ni el menor)

5. MAYOR MEDIO Y MENOR: Dados 3 números diferentes, calcular el mayor, el

medio y el menor.

6. PAR O IMPAR: Leer un número entero y calcular si es par o impar

7. POSITIVO O NEGATIVO: Leer un número y calcular si es positivo o negativo

8. MULTIPLO DE X: Dados 2 números calcular si el primero es múltiplo del

segundo.

14
Fundamentos de programación con JavaScript

9. ECUACION CUADRATICA: Dados los coeficientes y el termino independiente

de la ecuación cuadrática (ax^2+bx+c=0), calcular el imprimir el valor de las raíces
reales. X1 y X2.
Si el valor de a=0 debe mostrar un mensaje indicando "División por cero". Si B^2 -
4AC<0 indicar que la raíz da negativo.

MENU DE OPCIONES:

10. Presentar un menú de 5 platos de un restaurante, el usuario al seleccionar un

plato le debe salir el precio.

11. Presentar un menú de 5 destinos (ciudades) diferentes, el usuario al

seleccionar el destino conocerá la distancia en kilómetros y el precio del pasaje
por avión.

12. Dados el peso y estatura de una persona, calcular el IMC (índice de masa
corporal). De acuerdo con el resultado del IMC mostrar un mensaje que diga si
está: DELGADO, NORMAL, SOBREPESO u OBESO.

Ciclos
Siguiendo con los problemas vamos a ver un tipo de problemas que se resuelven
con ciclos o diagramación repetitivos en este caso siguiendo con los diagramas de
flujo, antes de ir a los problemas definamos que es un ciclo.

Un bucle o ciclo, en programación, es una secuencia que ejecuta repetidas veces

un trozo de código, hasta que la condición asignada a dicho bucle deja de
cumplirse. Los tres bucles más utilizados en programación son el bucle while, el
bucle for y el bucle do-while. Fuente: Wikipedia

15
Fundamentos de programación con JavaScript

Teniendo claro que es un ciclo veamos cómo resolver problemas implementando

cualquiera de estos tipos de bucles en los diagramas de flujo.

Problema #1
Imprimir números del 1 al 10.

Para resolver este problema debemos usar uno de los 2 nuevos símbolos que nos
provee este programa el bucle mientras que y el buque para o for.

Como podemos ver comenzamos con símbolo de tipo

asignación donde I es igual a 1 lo nuevo es el ciclo
mientras que donde le decimos que si I <= 10 quiero que
pases y me imprimas I y seguido de eso uso otro símbolo
de tipo asignación para aumentar a I en 1 con una suma
donde I es igual a I + 1, mientras se cumpla la condición
de I <= 10 va pasar y mostrarme cuánto vale I.

Nota: Los ciclos tiene un inicio y un fin este caso

terminan con un símbolo llamado cierre.

Podemos hacer el mismo ejemplo con el ciclo para

veamos cómo se ve.

16
Fundamentos de programación con JavaScript

Con el ciclo para es un poco más sencillo le

indicamos la variable I luego que comienza en 1 y
va hasta 10 y que aumente I en 1 cada vez que
haga un ciclo y con el símbolo de salida muestro el
valor de I y listo eso es todo ejecutamos.

Problema #2
Leer N valores y calcular e imprimir la Sumatoria de los números pares.

Si leemos muy bien el problema nos dice que leer N valores lo cual no sabemos
cuántos valores vamos a leer, entonces lo que hay que hacer es preguntar
cuántos valores quieres leer entrar en un ciclo con esa cantidad de valores y
sumas los números pares, veamos cómo queda la solución al problema en
diagrama de flujos.

17
Fundamentos de programación con JavaScript

Iniciamos con un símbolo de salida

mostrando un mensaje el cual dice que
indique la cantidad de número que quiere
sumar, tenemos un símbolo de lectura
donde recogemos esa cantidad de
número en la variable N, asignamos dos
variables iniciales la cual es suma e I que
comienza suma en 0 e I en 1, entramos al
ciclo y dentro del ciclo tenemos un
condicional con una expresión nueva la
cual es MOD y lo que hace MOD es
obtener el residuo de una división en este
caso la división de I / 2 y preguntamos
que si el residuo de esa operación es 0
entonces el número es par y usamos otro
símbolo de asignación donde
acumulamos o sumamos la variable suma
+ I y al final mostramos la suma de todos
los números pares.

Nota: En matemáticas, un número par es un número entero que es divisible entre

dos. También vamos a encontrar en diferentes lenguajes de programación que
MOD es igual a %, es decir en vez de MOD usamos %.

Un ejemplo de una división con residuo.

18
Fundamentos de programación con JavaScript

Voy a dejar una lista de problema tipo ciclo donde pueden usar el ciclo mientras-
que o el ciclo par y como vimos puede que tengan que usar condicionales.

Más problemas de tipo ciclos:

1. Imprimir números del 1 al 10

2. Sumatoria de 10 números
3. Dados base y exponente, calcular e imprimir la potencia.
4. Factorial de N
5. Imprimir la Serie de fibonacci
6. Leer N valores y calcular e imprimir la Sumatoria de los números pares
7. Leer N valores y calcular e imprimir el Promedio de estos.
8. Leer N valores y calcular e imprimir el Promedio de los números impares
9. Leer N números y calcular e imprimir el Mayor de ellos.
10. Leer un Número y determinar si es PRIMO o No.
11. Leer N números y calcular la Sumatoria de los múltiplos de 3
12. Leer N valores y calcular el Promedio de los múltiplos de 5
13. Dados calificación y créditos de las materias cursadas por un estudiante
universitario calcular el promedio ponderado del semestre.
14. Dados nombre del artículo, precio y cantidad N productos, calcular e imprimir:
Valor parcial por artículo, Subtotal, IVA y Total de la venta.
15. Dados nombre, edad y sexo de N personas, calcular e imprimir: total hombres,
promedio edad mujeres, nombre del mayor y edad.

19
Fundamentos de programación con JavaScript

Mi primer hola mundo con JavaScript

Lo primero que vamos a hacer es hacer un hola mundo, pero antes de hacer eso
definamos que es JavaScript de donde nació este lenguaje de programación,
algunas características y algo de su historia.

¿Qué es JavaScript?

JavaScript (JS) es un lenguaje de programación ligero e interpretado, orientado a

objetos con funciones de primera clase. Aunque es más conocido como el
lenguaje de scripting para páginas web, muchos entornos no relacionados con el
navegador también lo usan, tales como node.js, Apache CouchDB y Adobe
Acrobat. Es un lenguaje script multiparadigma, basado en prototipos, dinámico,
soporta estilos orientados a objetos, imperativos y declarativos.

Desarrollado por Netscape que se utiliza en millones de páginas web y

aplicaciones de servidor en todo el mundo. JavaScript de Netscape es un
superconjunto del lenguaje de scripts estándar de la edición de ECMA-262 3
(ECMAScript) que presenta sólo leves diferencias respecto a la norma publicada.

El estándar de JavaScript es ECMAScript. Desde el 2012, todos los navegadores

modernos soportan completamente ECMAScript 5.1. Los navegadores más
antiguos soportan por lo menos ECMAScript 3. El 17 de Julio de 2015, ECMA
International publicó la sexta versión de ECMAScript, la cual es oficialmente
llamada ECMAScript 2015, y fue inicialmente nombrada ECMAScript 6 o ES6.
Desde entonces, los estándares ECMAScript están en ciclos de lanzamiento
anuales. Esta documentación se refiere a la última versión del borrador, que
actualmente es ECMAScript 2019.

20
Fundamentos de programación con JavaScript

JavaScript no debe ser confundido con el lenguaje de programación Java. Ambos

"Java" y "Javascript" son marcas registradas de Oracle en Estados Unidos y otros
países. Sin embargo, los dos lenguajes de programación tienen sintaxis,
semántica y usos muy diferentes. Fuente: Mozilla

Historia resumen

En 1995 Brendan Eich desarrolla LiveScript para incluirlo en el Netscape

Navigator 2.0. Tiempo después en el mismo año por conceptos de marketing le
cambian el nombre a JavaScript.

En 1997 el organismo ECMA (European Computer Manufacturers Association) y el

comité TC39 decidieron estandarizar para que fuera independiente de cualquier
empresa. Se inauguró el término ECMAScript para el estándar. Desde entonces
los estándares de JavaScript se rigen por ECMAScript.
En 1999 se lanza la 3ª versión del estándar ECMAScript. En junio del 2011 se
estandarizo la versión 5 (ES5) y desde el 2012 todos los navegadores modernos
soportan esta versión.

En julio de 2015 se estandarizo la 6 versión la cual fue nombrada oficialmente

ECMAScript 2015, inicialmente nombrada ECMAScript 6, hoy en día se le llama
como se dijo antes ECMAScript 2015 o ES2015.

En junio de 2017 se estandarizo la 8 versión la cual fue llamada ES2017 o ES8.

Desde entonces cada año en el mes de junio sale una nueva versión. Desde
ES2015 la mejor forma de nombrar estos estándares es por su año de
lanzamiento ES2015, ES2016, ES2017, etc.

21
Fundamentos de programación con JavaScript

Node.js

Node.js es un entorno de ejecución para JavaScript del lado del servidor, creado
por Ryan Dahl en el 2009. Se basó en el motor V8 de renderizado de JavaScript
que usa el navegador google Chrome. Gracias a esto podemos tener el mismo
lenguaje de programación tanto para el cliente como para el servidor y siendo
altamente escalable. Podemos crear Apis, aplicaciones basadas en
microservicios, isomórficas, etc. También cuenta con una comunidad muy grande
y tiene un sistema de paquete llamado NPM (Node package manager) este ya
viene pode defecto con node.js y hoy en día también se usa para gestionar
librerías del lado del cliente.

Hola mundo

Teniendo un poco más claro que es JavaScript podemos entrar en materia para
nuestro hola mundo vamos usar un sitio donde podemos ejecutar JavaScript
pero vale aclarar que JavaScript corre en cualquier navegador y podríamos
ejecutarlo desde la consola del navegador que usemos pero para hacerlo un poco
más amigable voy usar este sitio https://jsbin.com/ me gusta porque podemos
tener nuestro código a un lado ver lo que pasa al otro lado y podemos guardar
nuestro código si queremos claro creando una cuenta o iniciando con GitHub.

22
Fundamentos de programación con JavaScript

Como podemos ver declaro una variable llamada saludo con un texto “Hola
mundo”, seguido de eso tenemos un console.log() donde imprime esa variable y
al lado derecho podemos ver la salida de ese mensaje. Si comparamos con los
diagramas de flujo estamos usando un símbolo de asignación y otro de salida es
solo eso.

En JavaScript existen tres formas de declarar una variable, var, let y const más
adelante entraremos en profundidad sobre cada una de ellas.

Nota: El objeto console provee acceso a la consola de depuración de los

navegadores (e.j., la Consola Web en Firefox, Chrome, etc..). Los detalles de
cómo funciona varían de navegador en navegador y cuenta con una lista de
métodos que van a ser tocadas más adelante. Por el momento console.log() me
permite mostrar texto o información. Fuente: Mozilla

En JavaScript podemos hacer este mismo hola mundo de otras formas veamos
cómo se puede hacer.

Lo único que hice fue comentar la línea del console.log() con doble slash esto
quiere decir que esa línea de código no se va ejecutar porque esta comentada y
agregar un alert() que nos muestra una ventana emergente con el resultado de
ejecutar el código “Hola mundo”.

23
Fundamentos de programación con JavaScript

Nota: se puede hacer el mismo ejercicio mostrando el mensaje de “Hola mundo”

desde el html enviando por código la variable, pero en este libro nos vamos a
enfocar en el lenguaje de programación como tal y en la lógica de programación.

Antes de seguir con algunos ejemplos vamos a definir que son los operadores
lógicos y los operadores de comparación, tipos de datos que tenemos en
JavaScript, que es una función, que es una clase, programación declarativa,
closures, etc.

También cabe aclarar que todos estos conceptos se pueden ver en diferentes
lenguajes de programación lo único que cambia es la sintaxis o forma en la que se
escribe, lo importante es lo que se aprendió con los diagramas de flujo pensar en
la forma de resolver el problema plasmando la solución en un algoritmo.

Antes de comenzar
Nunca uso punto y coma (;) al final de cada línea de código, los (+) los uso para
concatenación de texto o variables, en otras palabras, unir dos palabras o
variables en una sola línea de código. En la mayoría de los ejemplos se va a usar
una herramienta llamada jsbin desde el navegador web.

console.log('Hola mundo', 54, 'Nuevo texto')

console.log('Hello world' + ' ' + 'text new')

También podemos concatenar con las comas (,) al final de cada expresión, en la
mayoría de los ejemplos va a ver una imagen y no directamente el código creo
que una de las mejores formas de aprender a programar es haciendo las cosas
uno mismo y no copiar y pegar cuando se está aprendiendo.

24
Fundamentos de programación con JavaScript

La expresión (++) en una variable significa que va a aumentar su valor en 1,

también tenemos (--) la cual va a disminuir su valor en 1. Suponiendo que a es
una variable con el valor inicial de 2 seria valido hacer lo siguiente: a++ el
resultado seria 3 y esto mismo se puede hacer: a = a + 1 es lo mismo que a++
también tenemos a += 1.

En JavaScript usamos los operadores aritméticos suma son el símbolo (+), resta
(-), multiplicación (*) y división con (/). Estos operadores también se pueden ver en
la gran mayoría de lenguajes de programación. Omitir los paréntesis a la hora de
usarlos.

Tipos de datos y estructura

Todos los lenguajes de programación contienen estructuras de datos, pero estas
pueden diferir de un lenguaje a otro. JavaScript es un lenguaje de tipado débil o
dinámico. Esto significa que no es necesario declarar el tipo de variable antes de
usarla. El tipo será determinado automáticamente cuando el programa comience a
ser procesado.

Los tipos de datos se dividen en dos grupos: tipos primitivos y de tipos objeto.

Tipos primitivos

String – cadena de texto

Number – valores numéricos
Boolean – verdadero o falso

Existen dos tipos de datos más primitivos, pero se consideran especiales los
cuales son:

25
Fundamentos de programación con JavaScript

Null – tipo especial, contiene null

Undefined – tipo especial, contiene undefined
Symbol: Symbol es un nuevo tipo en JavaScript introducido en la versión
ECMAScript Edition 6. Un Symbol es un valor primitivo único e inmutable y puede
ser usado como la clave de una propiedad de un Object.

Tipos objeto

Tipos predefinidos de JavaScript:

Date (fechas)
RegExp (expresiones regulares)
Error (datos de error)

Tipos definidos:
Hay tres formas de crear un objeto, por medio de la expresión literal { }, por medio
de new Object() y por Object.create()
Funciones
Clases

Arrays:
Serie de elementos o formación tipo vector o matriz. Lo consideraremos un objeto
especial que carece de métodos.

Objetos especiales:
Objeto global
Objeto prototipo
Otros

26
Fundamentos de programación con JavaScript

Podemos verificar el tipo de dato con typeof funciona para conocer los tipos de
datos primitivos y con las funciones, veamos algunos ejemplos.

Nota: Usaremos console.assert() este método está disponible en la gran mayoría

de los navegadores modernos. Ejecuta una expresión y si es verdadera continúa
sin hacer nada y si es falsa lanza una excepción.

Como podemos ver solo se muestra en la consola “Hola mundo” que pertenece
al console.log() esto quiere decir que las expresiones que validamos con typeof
son correctas, si por ejemplo en el tipo de dato número colocamos otra cosa se va
disparar una excepción veamos.

Podemos ver que efectivamente se dispara una excepción y es porque en el

último console.assert() estamos definiendo que si {} es de tipo number lo cual es
falso porque es un objeto.

27
Fundamentos de programación con JavaScript

Definiendo variables
Partiendo que siempre o casi siempre vamos a necesitar definir una variable en
JavaScript anteriormente se definían las variables con la palabra reservada var,
esto cambio hasta que la versión ES2015 (ES6) donde incluyeron dos nuevas
formas de definir una variable las cuales son let y const en el capítulo de ES2015
hablaremos un poco más sobre este tipo de variables.

En una variable podemos guardar o almacenar datos dándole un nombre y en la

cual podemos guardar números, strings, booleanos, arrays, objects, etc. Como
vimos podemos definir una variable con cualquiera de las palabras reservadas
var, let o const. En esta parte nos vamos a centrar en let y const ya que var hoy
en día no se usa, unas de las principales razones por la que ya no esa usa var el
por el problema del scope o alcance donde se define una variable. Veamos un
ejemplo para comprender mejor.

Como vemos no es muy buena idea definir y asignar valores con var de pronto con
este ejemplo no tenga mucho sentido son muy pocas líneas de código, pero
cuando tengamos mucho más código tener variables definidas con var sí que
puede llegar a ser un problema.

28
Fundamentos de programación con JavaScript

Volviendo al tema, podemos definir una variable con let y const además de eso
podemos asignarle valores con el operador de asignación (=) que es el igual.
Veamos algunos ejemplos de cómo definir y asignar valores.

Como vemos se puede definir variables antes y luego asignarle el valor, se

pueden definir varias variables en la misma línea y con diferentes tipos de datos.

Cosas a tener en cuenta para la variable nombrada saludo usamos primero let y
luego const pero con otro nombre esto se debe a que let y const respectan el
scope donde se definen, en otras palabras no podemos tener dos variables con el
mismo nombre en ese mismo espacio de trabajo. En el capítulo de ES2015 voy a
hablar mucho más a fondo del comportamiento de este tipo de variables.

Nota: Si ves cosas que no entiendes como que es un array o un object o que son
los + en el console.log no te preocupes todos estos temas van a ser aclarados en
cada capítulo del libro.

A la hora de definir una variable se le puede dar casi cualquier nombre, pero hay
algunas cosas a tener en cuenta como:

29
Fundamentos de programación con JavaScript

Una variable puede tener como nombre letras, números y/o símbolos como $ y _.
Un nombre de variable nunca debe comenzar por números.
No usar palabras reservar del lenguaje class, function, break, etc.
Los guiones no están permitidos (-).

Cuando nombramos variables y son muy largas podemos usar una práctica
llamada camelCase, en otras palabras, se nombra con la primera letra mayúscula.

Ejemplo: EstaEsMiVariable.

Ya por último piensa muy bien cómo vas a nombrar a tus variables esto es muy
importante porque puedes dar un contexto de lo que hace su variable dentro del
código y cuando vengan otro programador a leer su código pueda tener más idea
de lo que se trata. Así que tomate el tiempo de pensar muy bien cómo vas a
nombrar las variables.

Consejos para nombrar una buena variable. Nombres que sean legibles por
humanos edad, suma, idioma, mensaje, etc. No tener variables con nombres
cortos como a, b, hl, etc. Tener un nombre descriptivo y conciso. Según el tema
que estés tratando puedes nombrar las variables.

Métodos de console
Cuando hicimos nuestro primer hola mundo usamos el método console.log() y se
explicó un poco que era pero no vimos sus métodos en esta sección vamos hablar
de los métodos más usados. El objeto console provee acceso a la consola de
depuración de los navegadores y cuenta con una lista de métodos.

30
Fundamentos de programación con JavaScript

Console.error()
Nos muestra un mensaje de error con un color rojo.

Console.info()
Nos muestra un mensaje de información es muy parecido al console.log().

Console.log()
Nos muestra mensajes en general es el más usado.

Console.warn()
Nos muestra un mensaje de advertencia por lo general de color amarillo.

Estos son los métodos que a mi parecen se usan más pero existen otros más
como el console.assert(), console.debug(), console.time(), console.group(), etc.

31
Fundamentos de programación con JavaScript

Operadores

Operadores de comparación

Los operadores de comparación como su misma palabra lo dice sirve para

comparar datos, tenemos operadores de igualdad los cuales son: igualdad (==),
desigualdad (!=), identidad / igualdad estricta (===), sin identidad /
desigualdad estricta (!==). También existen los operadores relacionales los
cuales son: operador mayor que (>), operador mayor o igual (>=), operador
menor que (<), operador menor o igual (<=). Es un poco más sencillo de lo que
se vamos uno por uno y veremos que no es tan complicado.

Operadores de igualdad

Igualdad (==)
En JavaScript el operador de igualdad
cuenta con dos tipos, comparaciones
estrictas y de conversión de tipos. Una
comparación estricta es cuando usamos
el === es decir solo es verdadera si los
operadores son del mismo tipo y los
contenidos coinciden. La otra
comparación y la más común es == la
cual convierte los operados al mismo tipo
antes de hacer la comparación, veamos
algunos ejemplos.

32
Fundamentos de programación con JavaScript

Desigualdad (!=)
El operador de desigualdad devuelve verdadero si los operadores no son iguales.
Si los dos operadores no son del mismo tipo, JavaScript intenta convertir los
operadores a un tipo apropiado para la comparación.

Identidad / igualdad estricta (===)

Ya se explicó más arriba como funciona este operador.

33
Fundamentos de programación con JavaScript

Sin identidad / desigualdad estricta (!==)

El operador sin identidad devuelve verdadero si los operadores no son iguales y /
o no del mismo tipo.

Operadores relacionales

En este tipo de operadores podemos encontrar los siguientes: operador mayor

que (>), operador mayor o igual (>=), operador menor que (<), operador
menor o igual (<=). Veamos algunos ejemplos.

Operador mayor que (>)

El operador mayor que, devuelve verdadero si el valor del lado izquierdo es mayor
que el valor derecho.

34
Fundamentos de programación con JavaScript

Operador mayor o igual (>=)

El operador mayor o igual que, devuelve verdadero si el valor izquierdo es mayor o
igual que el valor derecho.

Operador menor que (<)

El operador menor que devuelve verdadero si el valor de la izquierda es menor
que el valor de la derecha.

Operador menor o igual (<=)

El operador menor o igual devuelve verdadero si el valor izquierdo es menor o igual que el
valor derecho.

35
Fundamentos de programación con JavaScript

Operadores lógicos

Los operadores lógicos se utilizan para realizar comparaciones entre valores,

dando como resultado un valor Booleanos (true, false). La operación lógica
negación invierte el operando, si es true lo hace false y viceversa, los operadores
&& y || regresan en realidad el valor de uno de los operadores especificados, por
lo que, si estos operadores se usan con valores no Boolean, posiblemente
regresen un valor no Boolean.

Veamos una descripción de los operadores:

Operador: AND (&&)

Uso: true && false – si el primer valor se puede convertir a false devolverá ese
valor de lo contrario devolverá el segundo valor evaluado. Si los dos valores son
Boolean solo devolverá true si ambos valores son true.

Operador: OR (||)
Uso: false || true – si el primer valor se puede convertir a true devolverá ese valor
de lo contrario devolverá el segundo valor evaluado. Si los dos valores son
Boolean devolverá true si cualquiera de los dos valores es true y solo devolverá
false si ambos valores son false.

Operador: NOT (!)

Uso: !true – si el valor es true devolverá false y si es false lo contrario.

Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que
evalúan a null, 0, un string vacío (""), o undefined. Pasemos a ver algunos
ejemplos para comprender un poco mejor esta teoría.

36
Fundamentos de programación con JavaScript

AND (&&) lógico

Podemos ver que se pueden usar operadores de comparación junto con los
operadores lógicos sin ningún problema.

OR (||) lógico

37
Fundamentos de programación con JavaScript

NOT (!) lógico

Los dos últimos console.log() tienen dos !! esto quiere decir que respecta el valor
real y no lo convierte por si alguna vez lo llegan a ver.

Condicionales en JavaScript
Como ya vimos en los diagramas de flujo un condicional ejecuta una sentencia si
la condición evaluada es verdadera. También podemos tener múltiples
condiciones anidadas veamos un ejemplo.

if simple

if/else

38
Fundamentos de programación con JavaScript

Podemos ver que para definir un condicional lo hacemos con las palabras if para
evaluar la condición y else si la condición no se cumple.

If/else if

Podemos tener múltiples if anidados veamos un ejemplo.

Asignación condicional

Esta es una forma simplificada de tener un condicional y además podemos tener

toda la condición evaluada en una sola línea de código.

39
Fundamentos de programación con JavaScript

Arreglos o Matrices
Podemos decir que un arreglo, matrices o array pueden ser descriptos como
vectores multidimensionales. Un vector puede contener datos de un solo tipo, pero
puede tener más dimensiones. En otras palabras, un vector puede tener una sola
dimensión o varias dimensiones.

Cuando ya hablamos solo de matrices estamos hablando de un caso especial de

array, la cual se distingue por tener dos dimensiones. Conformadas por un largo y
un alto, es decir una estructura de filas y columnas.

Cuando hablamos de arrays en JavaScript estamos hablando de objetos tipo lista

de alto nivel. Contamos con métodos los cuales nos ayudan a recorrer o mutar un
array. Podemos almacenar cualquier tipo de valor en cada espacio de un array y
su longitud no es fija al igual que los tipos de valores. Si no tuviéramos arrays,
tendríamos que crear una variable por cada valor. Veamos algunos ejemplos para
comprender mejor este tema.

Nota: Estructura de datos en JavaScript se refiere a pilas o lista de datos que se

pueden representar por un Array o un Objeto.

40
Fundamentos de programación con JavaScript

Definimos un array de una dimensión con unos elementos, en este caso todos de
tipo string guardamos ese array en una variable. Podemos mostrar como quedo
definido el array, cuantos elementos tiene el array, podemos obtener el valor de
cada uno de los elementos del array especificando el índice que es la posición
donde se encuentra nuestro elemento gracias a los corchetes.

Nota: Un array siempre va a comenzar en cero, es decir su índice siempre va a

comenzar en cero. Cuando hablamos de longitud de elementos estamos contando
cuantos elementos existen en el array.

Podemos modificar, agregar o eliminar elementos de un array, lo importante de

esa parte es que entiendas que existen ya unos métodos que podemos usar para
trabajar con los arrays. Veamos algunos ejemplos.

41
Fundamentos de programación con JavaScript

Como vemos existen muchos métodos con los que podemos trabajar en los arrays
faltan algunos, dejare una lista de algunos métodos. Para terminar este tema
veamos cómo podemos crear un array usando el constructor de elementos Array
y cómo podemos definir un array de dos dimensiones.

42
Fundamentos de programación con JavaScript

Con la palabra new Array podemos crear un nuevo array con uno o varios
elementos de cualquier tipo como se observa en el ejemplo. Si le pasamos como
primer elemento un valor número este creara un array con todas esas posiciones
vacías.

Ahora bien, pensemos que necesito crear un array, pero con ciertas posiciones ya
definidas es decir quiero que mi array tenga 10 posiciones sin darle los valores.
Veamos un ejemplo con un array o de otra forma dicha una matriz
multidimensional.

Resultado - Matriz multidimensional

Fila 0:[0,0][0,1][0,2][0,3];
43
Fundamentos de programación con JavaScript

Fila 1:[1,0][1,1][1,2][1,3];
Fila 2:[2,0][2,1][2,2][2,3];
Fila 3:[3,0][3,1][3,2][3,3];

Este ejemplo es un poco más complejo, definimos un array con 4 posiciones vació
y tenemos 2 ciclos uno dentro del otro, en el primer ciclo recorremos la posición i
que por default es cero cuando entramos al siguiente ciclo recorremos j y hasta
que se cumpla la condición de que j < nb se van a hacer los recorridos e i va a ser
siempre cero y j va aumentar cuando salga de ese ciclo aumentara i y volverá a
entrar al siguiente ciclo.

De esa forma tenemos una matriz multidimensional la cual cuanta con unas
columnas y unas filas.

Lista de métodos que trabajan sobre un array y no modifican sus propiedades o

longitud.

.concat(),
.every() (JS 1.6+)
.filter() (JS 1.6+)
.forEach() (JS 1.6+)
.indexOf() (JS 1.6+)
.join()
.lastIndexOf() (JS 1.6+)
.map() (JS 1.6+)
.slice()
.some() (JS 1.6+)
.toSource()
.toString()
.valueOf()

44
Fundamentos de programación con JavaScript

Lista de métodos que trabajan sobre un array y modifican sus propiedades y

longitud.

.pop()
.push()
.reverse()
.shift()
.sort()
.splice()
.unshift()

45
Fundamentos de programación con JavaScript

Ciclos en JavaScript
En el capítulo de diagramas de flujos vimos que era un ciclo y los diferentes tipos
de ciclos que podemos usar, ahora bien, vamos a entrar en materia con los ciclos
en JavaScript la idea es la misma que en los diagramas de flujos hacer varias
iteraciones hasta que la condición no se cumpla y salir del ciclo.

En JavaScript existen muchos tipos de bucles o ciclos, pero la esencia es la

misma repetir una acción por un número de veces. Podemos definir de diferentes
formas el punto inicial y final del ciclo. Algunas de las sentencias para ciclos son:
for, do while, while, break, for in, for of, forEach, existen otros dos tipos label y
continue pero no lo vamos a ver.

Sentencia for

El ciclo for se repite hasta que la condición se deje de cumplir en otras palabras
hasta que la condición no sea verdadera, está compuesta por un valor inicial la
condición y el acumulativo. Veamos un ejemplo para dejarlo más claro.

46
Fundamentos de programación con JavaScript

Tenemos 2 ejemplos hacen lo mismo, pero son diferentes formas de hacerlo esto
para tener en cuenta que existen muchas formas de solucionar un mismo
problema. Volviendo al ejemplo definimos un array inicial con 5 elementos,
definimos otro array vació lo que quiero es un nuevo array con el doble de los
valores iniciales.

En el for definimos que i comience en cero y mientras i sea menos que la longitud
total del array vamos a iterar y la variable i va a aumentar su valor en 1. Con el
primer for tomamos el arrayDouble y usamos el método push donde le indicamos
que array[i] con su índice cero porque i en la primera vuelta vale cero y el valor
en la posición cero es 1, entonces 1 multiplicado por 2 seria 2 el primer valor del
nuevo array.

Sentencia do while

Con esta sentencia pasa lo mismo que con la for hasta que la condición deje de
ser verdadera va a seguir iterando. Cosas diferentes no contamos con una
variable i para acumular el valor. Veamos un ejemplo.

47
Fundamentos de programación con JavaScript

Tenemos el mismo resultado que con for, pero como dije la diferencia es con la
variable i en este caso la definimos por fuera con valor inicial de cero y la
acumulamos dentro del do while hasta que la condición no se cumpla. Recordar
que array.length en este caso su valor es 5.

Nota: Si tienes alguna duda con los ejercicios puedes colocar un console.log()
dentro del ciclo y ver el comportamiento de i y del mismo array[i] para que veas
como aumenta su valor en cada iteración.

Sentencia while

La sentencia while es muy parecida al do while lo único diferente es que primero

tenemos la condición para entrar al ciclo si la condición no es verdadera nunca
entrara al ciclo caso contrario con do while si entramos al ciclo y después si esta la
condición. Veamos un ejemplo.

En este caso definimos el arrayDouble de otra forma, pero el resultado sigue

siendo el mismo.

48
Fundamentos de programación con JavaScript

Sentencia break

Esta sentencia no es precisamente un bucle, pero se usa para salir de un bucle o

un switch, un switch es un conjunto de casos donde evaluamos una expresión y
que cumplan con un case. Veamos un ejemplo para dejarlo más claro.

Si el valor del elemento es 3 ejecutamos el break y salimos del bucle o ciclo.

49
Fundamentos de programación con JavaScript

En un switch siempre tenemos un case por default esto es por si ninguna

expresión coincide tenga un valor por defecto, otra cosa a tener en cuenta es que
si no colocamos los break al final de cada case se van a ejecutar todos los case.

Sentencia for in

La sentencia for in lo que hace es iterar todas las propiedades de un objeto no te

preocupes si no comprender mucho esta parte ya que existe un capítulo donde
hablo sobre los objetos, pero veamos un ejemplo de cómo funciona esta
sentencia.

La variable moto es un objeto que tiene clave y valor definimos una variable result
para concatenar el resultado del for in, en el for in, defino una variable en este
caso fue i y le digo de dónde voy a iterar o de que objeto voy a iterar en este caso
el objeto es moto. Ahora solo queda guardar en la variable result la clave del
objeto que estoy recorriendo y valor de esa clave.

En otras palabras, i es igual marca y moto[i] es igual pulsar para la primera

vuelta del for in.

50
Fundamentos de programación con JavaScript

Sentencia for of

La sentencia for of toma un array e iterada cada uno de los elementos del array.
Veamos un ejemplo.

Podemos ver que num son cada uno de los elementos del array numbers y
hacemos un push con la operación del valor de (num * 2) para agregar ese nuevo
valor al array numbersDouble.

Sentencia forEach

La sentencia forEach recibe un array y ejecuta una función por cada elemento del
array. Veamos un ejemplo.

51
Fundamentos de programación con JavaScript

Objetos
Cuando hablamos de objetos estamos hablando de un conjunto de clave valor o
de otra forma dicha una propiedad y un valor. El valor de una propiedad puede ser
un texto, vector, función o incluso otro objeto. Los objetos en JavaScript pueden
entenderse con objetos tangibles de la vida real.

En JavaScript podemos entender un objeto como una entidad independiente con

sus propiedades. Un ejemplo en la vida real sería un vehículo es un objeto con sus
propiedades. Un vehículo tiene un color, un diseño, un tamaño, etc. Un objeto en
JavaScript puede tener propiedades las cuales definen sus características.

Las propiedades de un objeto se pueden acceder a ellas con un punto (.),

podemos definir un objeto de JavaScript con la palabra reservada Object o
simplemente con las llaves { }, también podemos usar el método créate de
Object, veamos cómo podemos definir un objeto y agregar algunas propiedades.

52
Fundamentos de programación con JavaScript

Podemos ver que defino un objeto car de dos formas una con el new Object() y
otro con las llaves {}, con car.color definimos la propiedad y le asignamos un
valor, si intentamos acceder a una propiedad que no existe por defecto me
devuelve undefined. Con las llaves podemos definir una propiedad con los dos
puntos.

Podemos acceder a una propiedad también con los corchetes [ ] y definir nuevos
valores, veamos un ejemplo.

Un ejemplo más donde

podemos definir el nombre de
una propiedad con una variable
y en car2 podemos pasar el
valor de una propiedad con una
variable.

53
Fundamentos de programación con JavaScript

Algo más que podemos ver son algunos de los métodos que podemos usar
cuando trabajamos con objetos gracias a Object. Veamos algunos de los
métodos.

Método assign

Con el método assign podemos copiar las propiedades de un objeto, le pasamos

las primeras llaves para que no me copie todo el resultado en mi objeto o1 seguido
de eso le pasamos cada uno de los objetos o1, o2, o3 y lo que hace es copiar la
propiedad y valor de cada objeto.

Método Keys

54
Fundamentos de programación con JavaScript

Con el método keys obtenemos todas las propiedades del objeto en un array.

Método créate y getOwnPropertyNames

Se puede crear un objeto con el método créate y agregarle propiedades y

funcionalidades en este caso indicamos un método getFoot dentro del objeto una
vez cread podemos asignarle nuevas propiedades y valores como un objeto
cualquiera y podemos ejecutar nuestra propiedad método del objeto getFoot.

Por último, revisamos los key o nombres de propiedades y vemos que con el
método keys solo obtenemos los métodos que se pueden enumerar para ver
todas las propiedades podemos usar el método getOwnPropertyNames.

55
Fundamentos de programación con JavaScript

Otra forma de crear un objeto, pero esta vez pasando directamente el objeto al
método créate como primer argumento y lo mismo de antes le podemos pasar
nuevas propiedades o modificar los valores de esas propiedades.

Método values

Con este método obtenemos los valores de cada propiedad.

Método entries

El método entries crea una matriz anidada con los pares clave valor de un objeto.

Algunos otros métodos que existen son, Object.freeze(),Object.seal(),

Object.getPrototypeOf(), etc. Creo que estos son algunos de los métodos más
importantes a la hora de trabajar con objetos.

56
Fundamentos de programación con JavaScript

Por último, no olvides que puedes tener como propiedades string, numbers e
incluso un mismo objeto como propiedad y para los valores podemos tener
prácticamente cualquier tipo de dato desde un array hasta un objeto.

57
Fundamentos de programación con JavaScript

Funciones
Las funciones es una de las cosas más importantes en JavaScript. Una función es
un “subprograma” que se puede llamar o ejecutar por código externo o interno
cuando hablamos de recursión. Una función cuenta con una secuencia de
declaraciones que conforman el llamado cuerpo de la función. Se le pueden pasar
valores y puede devolver un valor.

Toda función en JavaScript es un objeto y se puede manipular y transmitir al igual

que cualquier objeto. Concretamente son objetos. Veamos algunos ejemplos de
funciones.

Podemos ver algunos ejemplos de cómo funcionan las funciones una función
myFunction la cual retorna una variable saludo y por fuera de la función la

58
Fundamentos de programación con JavaScript

ejecutamos dentro de un console.log(). Lo mismo pasa con la segunda pero en

este caso guardamos el valor en una nueva variable saludo e imprimimos esa
variable con el console.log().

Cosas a tener en cuenta las variables que declaremos dentro de una función son
de ese ámbito o scope como popularmente se le dice, siempre y cuando
declaremos variables de tipo const o let que es otra forma de declarar variables en
JavaScript.

La otra función llama suma la declaramos con dos parámetros llamados a y b

retornando la suma, declaramos una variable llamada result y ejecutamos o
llamamos la función suma pasándole como argumento 5 y 10, por último usamos
un console.log() y mostramos el resultado de la suma.

Nota: Tener en cuenta que cuanto creamos la función definimos unos parámetros
y cuanto la ejecutamos le pasamos unos argumentos. No confundir estas dos
palabras.

59
Fundamentos de programación con JavaScript

En el primer ejemplos definimos una función puntaje y dentro de esa función

definimos otra función result donde retornamos un string concatenado unas
variables con el símbolo +, concatenar es juntar o unir textos con variables o
variables con variables, por último retornamos la función result y por fuera
ejecutamos la función puntaje dentro de un console.info().

La otra función llamada saludo lo que hacemos es pasar por argumento una
función llamada hola y dentro de saludo recibimos como parámetro esa función la
ejecutamos e imprimimos un console.info().

Como vimos las funciones nos ayudan a tener nuestro código separado y
ordenado en cierta manera dándonos opciones de ejecutar o definir funciones casi
en cualquier parte de nuestro código.

Closures
En el apartado anterior vimos funciones y en uno de los ejemplos vimos que
definimos una función y adentro otra función precisamente de eso se trata los
closures pero lo veremos un poco mejor en este punto. Una clausura o closure
permite acceder al ámbito de una función exterior desde una función interior.
Veamos algunos ejemplos.

60
Fundamentos de programación con JavaScript

Este ejemplo es muy parecido a algunos de los que vimos en funciones pero en
este caso devolvemos una función muestraNombre() la cual retornamos y en la
parte exterior ejecutamos creaFunc() y guardamos en miFunc el resultado de la
función interna muestrNombre() en este caso nuestro closure seria miFunc() la
cual ejecutamos en la última línea de código.

Una cosa especial para dejarlo más claro es que cuando definimos nuestro
closure miFunc() lo que sucede con esta función es que guarda el entorno donde
fue creada por esta razón la variable nombre todavía existe al final cuando
ejecutamos miFunc(). Un ejemplo más.

Lo que tenemos acá son dos closures suma5 y suma10 lo cual comparten el
mismo cuerpo de la función creaSumador(), pero almacenas diferentes entornos.
En el entorno de suma5 (x = 5) y suma10 (x = 10).

61
Fundamentos de programación con JavaScript

Clases
Las clases de JavaScript, introducidas en ECMAScript 2015, son una mejora
sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las
clases no introduce un nuevo modelo de herencia orientada a objetos en
JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y
simple para crear objetos y lidiar con la herencia. Fuente: Mozilla

Nota: Recuerda siempre, en JavaScript no existe la programación orientada a

objetos como tal se simula este paradigma de programación y lo que hace
JavaScript es basarse en prototype o prototipo, al final JavaScript no es un
lenguaje tipado y sigue siendo azúcar sintáctico (Sugar Syntax).

Se puede decir que las clases son funciones especiales, en las clases podemos
tener 2 tipos de sintaxis a la hora de trabajar con ellas las cuales son: expresiones
de clases y declaración de clases. Veamos de qué se trata todo esto.

Declaración de clases

En este tipo de clases se utiliza la palabra reservada class y se la da un nombre a

la clase.

62
Fundamentos de programación con JavaScript

Cosas a tener en cuenta cuando se trabaja con declaraciones de clases, respectar

el orden como se ve primero se define la clase luego se hace una instancia con la
palabra new Suma(). Definimos la clase Suma y dentro debe ir un constructor
reciben dos parámetros en este caso y guardamos esos parámetros en this.a y
this.b.

Cosas nuevas class, el constructor, this y new.

Por lo general siempre que trabajemos con clases va de esta manera class para
definir la clase, el constructor para definir valores por defecto, this para acceder
a esos valores por fuera del constructor y new para hacer una instancia de esa
clase y poder ejecutar la clase y acceder a los métodos en este caso no tenemos
métodos ya lo veremos.

Nota: This como valor, el objeto contexto de JavaScript en el cual se está

ejecutando el código actual. Fuente: Mozilla

Expresiones de clases

Esta es otra manera de definir una clase la verdad yo casi nunca uso esta manera,
pero veamos de qué se trata. Este tipo de clases pueden ser nombradas o
anónimas. Veamos un ejemplo.

63
Fundamentos de programación con JavaScript

Podemos definir una clase sin nombre, pero la guardamos en una variable y algo
parecido una clase nombrada, pero la guardamos también en una clase y siguen
funcionando como una clase normal. Veamos ahora si unos ejemplos completos
de cómo funciona una clase con métodos y extendiendo dicha clase.

64
Fundamentos de programación con JavaScript

Definiendo métodos

Definimos una clase Rectangulo definimos unos valores con this y dos métodos
uno para hacer el cálculo y otro para devolver el resultado la diferencia del método
area y calcArea es que el método area tiene get lo cual nos permite obtener el
resultado de la multiplicación, por ultimo hacemos una instancia de la clase
pasamos los valores creamos el objeto cuadrado con el cual podemos ejecutar el
método area dentro del console.log().

Método estático

Los métodos estáticos son llamados sin instanciar su clase y no pueden ser
llamados mediante una instancia de clase. Este tipo de método se usan sobre todo
para crear utilidades de aplicaciones. Veamos un ejemplo.

65
Fundamentos de programación con JavaScript

Como podemos usamos la palabra reservada static creando el método distancia

la cual nos devuelve un resultado. Hacemos dos instancias, pero esto es para
pasar un objeto con los valores de X y Y, finalmente ejecutamos el método
distancia directamente pasando estos dos objetos que obtuvimos de la instancia
a la clase Punto.

Subclases con extends

Extends es una palabra clave que podemos usar con las clases para crear una
clase hija, veamos un ejemplo.

66
Fundamentos de programación con JavaScript

En el ejemplo podemos ver que tenemos una clase llamada Carro con un
constructor y un método llamado on(), también tenemos otra clase llamada Moto
la cual se extiende de Carro con esto heredamos sus atributos o variables que se
definieron en el constructor.

En la clase Moto declaramos un método on() y podemos usar this.color en el

mensaje, al final hacemos instancias de cada una de las clases creando los
objetos camaro y pulsar y ejecutamos sus métodos.

67
Fundamentos de programación con JavaScript

ES2015 o ES6
ECMAScript 2015 o ES6 como ya lo mencioné en otro capítulo es la sexta edición
de las especificaciones del lenguaje y desde el 2015 cada año más o menos a
mitad de año se lanzan nuevas especificaciones para JavaScript.

En este capítulo vamos a ver algunas de esas especificaciones ya que fue una de
las más importantes para el lenguaje ya que trajo muchos cambios significativos
veamos algunos de los cambios, algunos de estos cambios se pudieron a ver
tocado en alguno de los capítulos anteriores.

Arrow function

La primera parte es una definición de una función común y corriente y ahora

usando arrow function lo que hacemos es definir una constante y usamos el =>
para indicarle que es una función de tipo flecha. Algo que podemos notar es que la
función está en una sola línea de código, pero también podemos abrir las llaves {}
y trabajar como una función normal.

68
Fundamentos de programación con JavaScript

Let y Const

En el capítulo de variables ya vimos un poco de cómo funcionan esta forma de

declarar variables veamos algunos ejemplos.

Const

Como vemos tenemos una función que se ejecuta así misma y dentro tenemos
definida don variables con const el problema es que las variables declaradas con

69
Fundamentos de programación con JavaScript

const deben ser únicas por scope o ambiente donde la definimos, no se puede
modificar su valor inicial.

Let

Ahora que pasa con let, bueno bien con let si podemos modificar su valor inicial,
pero debemos tener en cuenta el scope donde se definen en este caso la variable
b que está dentro el if solo va a funcionar dentro de ese if por esa razón nos da un
error de que b no está definida.

Hoy en día se usa este tipo de variables ya var no se usa por el problema del
scope o ámbito donde se define.

70
Fundamentos de programación con JavaScript

Template Strings

Los template strings es una de las mejores características que se pudieron

agregar al lenguaje, bueno en todo caso para mi es una de las mejores veamos
algunos ejemplos de que se trata.

Podemos concatenar variables sin necesidad de usar el símbolo (+) y también

podemos tener multilínea de texto veamos cómo se ve.

71
Fundamentos de programación con JavaScript

Anteriormente tocaba hacer algo como el siguiente ejemplo para obtener el mismo
resultado.

Valores por defectos

Con esta nueva funcionalidad podemos declaras valores por defecto a los
parámetros de nuestras funciones veamos un ejemplo.

72
Fundamentos de programación con JavaScript

Destructuring

Esta también creo que es una de las mejores funcionalidades que se pudieron
agregar al lenguaje ya que podeos asignar valores a los arrays y objetos de una
forma diferente, veamos algunos ejemplos.

Creo que la idea está clara si quiero extraer ciertas propiedades de un objeto lo
hago de una forma más sencilla y lo mismo pasa con los arrays si quiero ciertos
elementos.

This

La variable this tiene su propia historia por decirlo así, pero la realidad es que a la
hora de usar this dentro de una función se tenían muchos problemas por el
alcance o contexto donde nos encontramos por ejemplo anteriormente se tenía
que declarar var that = this para poder usar this dentro de otra función. Veamos
un ejemplo de cómo es esto.

73
Fundamentos de programación con JavaScript

La cosa cambio un poco con el método bind pero ahora en mucho más fácil
veamos el último ejemplo.

74
Fundamentos de programación con JavaScript

Ahora como vemos con las funciones de flecha o arrow function podemos usar la
variable this sin necesidad de hacer cosas extras.

Symbol

Los symbols son un nuevo tipo de dato cuyos valores son únicos e inmutables.
Los valores pueden utilizarse como claves de las propiedades de los objetos.
Symbol no puede ser usar con el operador new ni tampoco ser extendido de una
clase. Vemos un ejemplo de cómo se puede usar.

Que otras especificaciones podemos destacar de esta versión bien tenemos por
los arrays: array.from(), array.of(), array.fill(), array.find (), array.keys(),
array.values (), nuevos adiciones al objeto Number: Number.parseInt(),
Number.isInteger(), Number.parseFloat(), nuevo objeto Promise, funciones con
generator function. Entre otras muchas más especificaciones que se vieron esta
versión de JavaScript.

75
Fundamentos de programación con JavaScript

Asincronismo con JavaScript

Lo primero que debemos aclarar es en que consiste el asincronismo en
JavaScript, pensemos que debemos ejecutar una tarea en nuestra aplicación la
cual se puede ejecutar en el mismo momento o en el futuro y su comportamiento
no bloquea el hilo principal de nuestra aplicación.

Supongamos que tenemos una API la cual nos devuelve una lista de productos
cuando solicitamos esa lista nuestra aplicación no sabe en qué momento va a
devolver esos datos solo cuando el servidor procese dicha solicitud devolverá la
lista y mientras eso sucede nuestra aplicación puede seguir ejecutando funciones
o más eventos.

Hay que entender que JavaScript no es un lenguaje multi-tarea ni tampoco con

paralelismo, JavaScript es un lenguaje altamente concurrente. Un ejemplo una
técnica llamada entrelazado en el que dos tareas grandes se dividen en varias
pequeñas.

Entonces tenemos que JavaScript es un lenguaje asíncrono y concurrente, el

Event Loop es la pieza fundamental que coordina la ejecución, eventos y
callbacks. Hay que tener en cuenta tas dos piezas del Event Loop, call stack y
callback queue.

En el call stack es donde ejecutamos las funciones según el orden en que llegan,
también podemos delegar tareas o eventos para no bloquear el hilo principal de la
aplicación la cuales pueden ser llamadas con los callbacks y ser resueltos
pasando al callback queue cuando el call stack este libre pasaran las funciones
que están en el callback queue al call stack.

76
Fundamentos de programación con JavaScript

Nota: La concurrencia es cuando una sola tarea se ejecuta en un momento

determinado.

En el siguiente Link pueden probar mejor como es el funcionamiento del Event

Loop.

77
Fundamentos de programación con JavaScript

Con JavaScript tenemos 3 maneras con las cuales podemos implementar

asincronismo, estas son: callback’s, promesas y async/await.

Callback’s

Los callback’s manera más antigua de implementar asincronismo en JavaScript.

Consiste en pasar una función como parámetro a otra función donde la función
principal será la encargada de llamar nuestro callback. Veamos un ejemplo.

78
Fundamentos de programación con JavaScript

Tenemos dos arrays uno de usuarios y profesiones nuestra función principal en

este caso es getUsuarios la cual le pasamos un callback o función y esperamos
como primera parámetro un error y segundo la lista de los usuarios.

Ahora bien, en la función getUsuarios tenemos un setTimeout que es una forma

de simular el asincronismo ejecutamos el callback pasados 300 milisegundos y
como primer valor null y el segundo argumento los usuarios. Lo mismo tenemos
para las otras funciones y vamos ejecutando una dentro de otra hasta llegar a
obtener el nombre de usuario y profesión.

79
Fundamentos de programación con JavaScript

Nota: Como se puede dar cuenta con esta forma de resolver el asincronismo es
algo más complejo ya que tenemos funciones dentro de las mismas funciones y
esto se puede hacer mucho más largo a lo cual se le llama callback hell. Con las
promesas vamos a ver que es mucho más fácil y resolvemos el callback hell.

Promesas

Las promesas o promises son una de las especificaciones que se agregó al

lenguaje en la versión ES2015 o ES6, con esta característica podemos
implementar el asincronismo y evitar el famoso callback hell, también podemos
tener un código más limpio y entendible.

Una promise es una función asíncrona la cual retorna un valor disponible en el

momento, en el futuro o nunca. Veamos un ejemplo tomando el ejemplo anterior y
pasándolo a promise.

80
Fundamentos de programación con JavaScript

Bueno en este caso estamos usando el método Promise al cual le pasamos una
función que a su vez recibe 2 parámetros, estos son resolved y reject. Ambos
parámetros son funciones callbacks. Resolved se llama cuando la respuesta es

81
Fundamentos de programación con JavaScript

exitosa y reject cuando la respuesta sea errónea. En este caso retornamos la

promesa con los datos que necesitamos.

Lo otro nuevo es la forma de ejecutar nuestra función principal la cual la

ejecutamos de una forma normal, pero resolvemos la promise con then de esta
forma podemos resolver todas las promesas una detrás de otra. Para revolver un
error o el reject podemos usar catch().

Async / Await

Esta es la forma más reciente de trabajar con asincronismo en JavaScript se

agregó esta especificación en la versión 8 de ECMAScript. Como vemos son dos
palabras reservadas para el lenguaje async y await, con async podemos definir
una función que sea asíncrona y con await esperamos que se resuelva los datos
de otra función asíncrona.

Las funciones definidas con async al final también retornar un objeto Promise.
Algo que también debemos hacer es agregar un try/catch para manejar los
errores cuando estamos usando await. Veamos un ejemplo.

Tenemos una función con async sin nombre que se ejecuta así misma adentro e
try y catch y obtenemos los usuarios con la función getUsuarios() claro usando la

82
Fundamentos de programación con JavaScript

palabra await esperando que se resuelva esa promise y guardamos los datos en
users y los mismo hacemos para las siguiente funciones que devuelven una
promise resolviendo esas promise con await.

Como podemos ver es mucho más limpio resolver promise con async/await sin
necesidad tener muchos .then().

El mismo ejemplo solo que definimos una función con nombre y la ejecutamos.

JSON y AJAX

JSON

JSON es un formato basado en texto para representar datos estructurados

tomando como sintaxis los objetos de JavaScript. JavaScript Object Notation la
abreviatura es JSON, este tipo de formato se usa comúnmente para transmitir
datos en aplicaciones web. Enviar datos de un servidor al cliente en este caso web
o viceversa del cliente web al servidor.

83
Fundamentos de programación con JavaScript

Debemos tener en cuenta de no confundir un JSON con un objeto de JavaScript

como ya mencioné la estructura de un JSON sigue la sintaxis de un objeto
JavaScript. Cuando trabajamos con un JSON debemos convertirlo a un objeto
nativo de JavaScript para poder acceder a los datos. JavaScript ya cuenta con un
objeto global JSON el cual cuenta con unos métodos para poder hacer estas
transformaciones.

Los JSON son independiente del lenguaje se pueden usar con cualquier lenguaje
y cada lenguaje tiene sus propios métodos para convertir, parsear y generar estos
mismos JSON. Veamos un ejemplo de un JSON.
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",
"episode": [],
"url": "https://rickandmortyapi.com/api/character/1",
"created": "2017-11-04T18:48:46.250Z"
}

84
Fundamentos de programación con JavaScript

Como vemos su sintaxis es igual a la de un objeto de JavaScript y también

podemos incluir los mismos tipos de datos dentro del JSON que los de un objeto
de JavaScript es decir podemos tener cadenas, números, arreglos, booleanos, y
otros objetos en sí mismo.

AJAX

AJAX, acrónimo de Asynchronous JavaScript And XML o JavaScript Asíncrono

+ XML (AJAX) en si AJAX es una forma de trabajar con varias tecnologías
existentes como HTML, XML, JavaScript y el más importante el objeto
XMLHttpRequest a menudo llamado XHR.

Cuando tenemos en conjunto todas estas herramientas podemos tener

aplicaciones web que se actualicen constantemente sin necesidad de volver a
cargar toda la página. Obteniendo aplicaciones mucho más rápidas a la hora de
trabajar con los datos.

Que es XMLHttpRequest, bueno bien es un objeto de JavaScript el cual nos

permite recuperar recursos de un servidor ej: textos, JSON o hasta código HTML
veamos un ejemplo de cómo podemos trabajar con este objeto.

1. const URL = 'https://rickandmortyapi.com/api/character/1'

2. // URL del API o JSON que vamos a recuperar
3.
4. const req = new XMLHttpRequest()
5. // Creamos una instancia del objeto XMLHttpRequest
6.
7. req.open('GET', URL)
8. // Abrimos la peteción pasandole como primer valor el,
9. // El método HTTP puede ser POST, PUT, DELETE, GET, etc.
10. // Segundo valor la URL
11.
12. req.responseType = 'json'
13. // Definimos el tipo de respuesta que esperamos.

85
Fundamentos de programación con JavaScript

14. req.send()
15. // Enviamos la solicitud con el método send()
16.
17. req.onload = function() {
18. const data = req.response
19. console.log(data)
20. // Cuando tengamos el JSON podemos acceder,
21. // Al objeto response y ver la data
22. }
23. // Por último usamos el metodo onload para escuchar,
24. // La respuesta del servidor, en otras palabras,
25. // Esperamos que el el servidor nos envíe el JSON

También podemos definir que esperamos un text y hacer un parse de esos datos
para poder tratarlo como un objeto de JavaScript veamos un ejemplo.

1. req.responseType = 'text'
2. // Definimos el tipo de respuesta que esperamos.
3. req.send()
4. // Enviamos la solicitud con el método send()
5.
6. req.onload = function() {
7. const dataText = req.response
8. const data = JSON.parse(dataText)
9. console.log(data)
10. // Cuando tengamos el JSON podemos acceder,
11. // Al objeto response y ver la data
12. }
13. // Por último usamos el metodo onload para escuchar,
14. // La respuesta del servidor, en otras palabras,
15. // Esperamos que el el servidor nos envíe el JSON

Con el método parse del objeto JSON podemos convertir el texto en un objeto de
JavaScript.

Para terminar con el ejemplo podemos ver que es algo engorroso obtener datos
JSON desde una API pero tranquilo esta era la forma antigua de trabajar hoy en
día y gracias a las nuevas características de JavaScript podemos usar un método
llamado fetch().

86
Fundamentos de programación con JavaScript

Fetch es una forma fácil de obtener datos de forma asíncrona y muy parecida al
método XMLHttpRequest, fetch proporciona una alternativa mejor y se puede
trabajar con promises veamos un ejemplo.

1. const URL = 'https://rickandmortyapi.com/api/character/1'

2. // URL del API o JSON que vamos a recuperar
3.
4. fetch(URL)
5. // .then(res => console.log(res))
6. // Podemos ver toda la respuesta tenemos datos como el status pero
por lo general lo que hacemos es ejecutar la función json()
7. .then(res => res.json()) // Devolvemos el JSON
8. .then(data => {
9. console.log(data)
10. // Obtenemos los datos
11. })

Podemos observar que es mucho más sencillo obtener datos con este método y
menos líneas de código, por defecto el método HTTP es GET, pero podemos
definir el método HTTP enviado un objeto como segundo parámetro del método
fetch.

1. fetch(URL, {
2. method: 'GET',
3. })
4. .then(res => res.json()) // Devolvemos el JSON
5. .then(data => {
6. console.log(data)
7. // Obtenemos los datos
8. })

En ese objeto donde definimos el método HTTP también podemos pasar otras
propiedades como los headers, el cors, la data si hacemos una solicitud de tipo
POST y también podemos capturar cualquier error con catch como vimos en las
promesas.

87
Fundamentos de programación con JavaScript

Programación funcional o declarativa

La programación funciona o declarativa es un paradigma de programación, un
estilo de construir nuestras aplicaciones, evitando prácticas que nos llevan a
provocar cambios de estados y mutación de los datos. Veamos algunos ejemplos
para comprender un poco más este tema.

Se puede observar que el resultado es el mismo y lo que buscamos es doblar los

valores de un array tenemos la forma imperativa donde creamos una variable con
un array vacío creamos un for y empujamos los nuevos valores a ese array vacío.

Con la forma declarativa es un poco más sencillo ya que en JavaScript existe

una función llama map la cual nos devuelve un array y lo que hacemos es
recorrer cada valor hacer la multiplicación por cada valor y al final nos devolverá
un array con esos nuevos valores.

JavaScript es un lenguaje de programación que no se creó para ser usado

específicamente como funcional, pero podemos usar conceptos, prácticas y
librerías que nos llevar a usar este paradigma de programación.

88
Fundamentos de programación con JavaScript

Debemos tener en cuenta:

• Inmutabilidad
• Funciones puras
• Funciones de orden superior
• Uso del currying

Inmutabilidad

Con inmutabilidad lo que evitamos es modificar el valor de nuestras variables y

trabajar con datos inmutables. Por lo general nuestras aplicaciones pueden llegar
a ser demasiado grandes y complejas donde no se ve a simple vista este tipo de
variables que están siendo modificadas. Veamos un ejemplo.

El valor no cambia.

En este caso el valor cambia porque se modificó el array inicial sin hacer
referencia directamente al array a.

Medidas que podemos usar para evitar este tipo de cosas.

Reducir o eliminar asignaciones

89
Fundamentos de programación con JavaScript

Usar librerías como inmutable.js de Facebook

Usar las funciones freeze, con freeze podemos hace inmutable un objeto
Librerías que trabajan bajo el paradigma funcional como Ramda o Lodash/fp.

Veamos algunos ejemplos de cómo resolver la mutación del ejemplo anterior.

En este ejemplo use la librería Ramda la importe vía cdn desde el html.

Si usamos freeze obtenemos un error en la consola y no nos va a dejar modificar

el array.

Funciones puras

Una función pura es aquella cuyo resultado siempre va a ser igual para un mismo
valor de entrada, nunca va a tener efectos secundarios sobre variables externas o
internas. En otras palabras, nunca se va a modificar variables internas o externas
y solo depende del valor que se le pase como argumento. Veamos un ejemplo.

90
Fundamentos de programación con JavaScript

Definimos una función doublé que recibe un parámetro n el cual nunca va a ser
mutado y lo que hacemos es devolver siempre el mismo resultado para ese valor
de entrada. En otras palabras, siempre que yo le pase 5 a esa función me va a
devolver 10.

Cuando se considera una función impura veamos algunos indicadores:

• No tiene argumentos de entrada
• No devuelve ningún valor
• Usa 'this'
• Usa variables globales

Algunos ejemplos de funciones impuras:

Usando funciones tenemos mayor control sobre nuestro código, funciones que
podemos reutilizar, fáciles de testear y mayor legibilidad, veamos un ejemplo más
donde podamos poner en práctica algunos de estos conceptos.

91
Fundamentos de programación con JavaScript

La idea en este ejemplo es acumular la suma de los valores de nuestro array eso
lo hacemos gracias a la función reduce la cual recorre cada uno de los valores del
array y acumula la suma el problema viene cuando ejecutamos varias veces la
función sumOfValues, como podemos ver se sigue mutando el array original.
Veamos cómo podemos solucionar esto.

Gracias a la función concat podemos agregar el nuevo valor a nuestro array y nos
devolverá un nuevo array sin mutar el array original.

92
Fundamentos de programación con JavaScript

Funciones de orden superior

Son aquellas que reciben como argumento una o más funciones y también pueden
devolver funciones (closures). En este caso vamos a usar los pilares de la
programación funcional en JavaScript los cuales son map, filter y reduce, su uso
es trabajar con arrays.

Map: crea un nuevo array con los resultados aplicados a cada uno de los
elementos.

Filter: crea un nuevo array con los resultados que cumplan la condición
establecida.

Reduce: ejecuta una función reductora sobre cada elemento del array devolviendo
un único valor.

Tenemos 3 ejemplos sencillos de cómo usar estas funciones de orden superior

(HOF). Cabe mencionar que las HOF tienen una relación con los Componentes de

93
Fundamentos de programación con JavaScript

orden superior (HOC) en librerías como React, el funcionamiento es tomar un

componente y devolver un nuevo componente.

Uso del currying

El currying o currificar busca transformar una función con N valores en una

secuencia de funciones únicas. El currying nunca se va ejecutar si no se le pasan
todos los argumentos de entrada. Con el uso de currying podemos reutilizar
funciones en diferentes partes de nuestro código. Veamos un ejemplo para
entenderlo mejor.

Lo primero que tenemos es una función normal con dos parámetros definidos a y
b y devuelve una suma, la segunda función ya es una función de tipo currying
donde esperamos que nos pasen una función y devolvemos una función tanto
para a como para b y al final devolvemos la ejecución de la función f.

94
Fundamentos de programación con JavaScript

Capturamos en una variable llamada curriedSum la función de tipo currying la

cual está lista para ser ejecutada pasando los dos valores como vemos en el
console.log(). Si queremos ver que devuelve curriedSum lo podemos ver.

Está esperando que le pasemos el primer valor y a su vez el segundo para al final
poder ejecutar f que contiene la función suma.

Algo interesante es podemos pasar primero un valor a curriedSum guardar esa

función en una variable y ejecutar esa nueva función y obtener el valor final
veamos un ejemplo.

95
Fundamentos de programación con JavaScript

Al final tenemos el mismo resultado, pero guardando la función en una nueva

variable y al final ejecutando la última función.

Si pensamos en hacer algo como esto console.log(curriedSum(5, 5)) el

resultado no es el que esperamos ya que devuelve una función en vez del
resultado de la suma.

Librerías como Ramda y Lodash nos permiten obtener el resultado que

esperamos si ejecutamos nuestro currying de cualquier de las dos formas. En jsbin
cargue la librería Lodash en Add libray.

Por último, veamos un ejemplo más cercano a la vida real, un sistema de logs de
nuestros proyectos el cual nos devuelve información útil.

96
Fundamentos de programación con JavaScript

Vemos que podemos seguir usando funciones normales y currying gracias a

Lodash las 2 primeras ejecuciones informamos mensajes completos con fecha un
tipo de importancia y un mensaje. Y las dos últimas la hacemos suspendiendo el
siguiente valor de la función aprovechando eso para reusar funciones y mostrar la
información.

97
Fundamentos de programación con JavaScript

Resolviendo problemas con JavaScript

Problema tipo condicional #1

MENOR DE TRES NUMEROS: Dados 3 números diferentes, calcular el menor de

ellos.

Podemos ver que pedimos los números con window.prompt el cual nos mostrara
un recuadro donde podremos ingresar el número lo envolvemos en una función
Number ya que todo lo que recibimos de window.prompt es un string y en este
caso necesitamos un dato de tipo número para no tener problemas con los
condicionales, guardamos esos valores en variables y seguimos a evaluar las
condiciones, si una condición es verdadera mostramos un alert con el número que
es menor de los tres.

98
Fundamentos de programación con JavaScript

En cuanto a las expresiones evaluadas en las condicionales lo que hacemos es

buscar primero si el primer número es el menor de todos y luego vamos por el
segundo evaluando si es menor que el primero y el tercero y por último el tercer
número no es Cesario evaluarlo ya que si el número 1 y el 2 no son menores pues
por defecto el tercer número es el menor.

Problema tipo condicional #2

MULTIPLO DE X: Dados 2 números calcular si el primero es múltiplo del segundo.

Para resolver este problema lo que hacemos es obtener el resto de la división y

validar si el resto es cero si es cero el primer valor es múltiplo del segundo. Con el
operador modulo % podemos obtener el resto de una división. Entonces si
queremos saber si 21 es múltiplo de 3 lo que hacemos es obtener el resto y
validamos en la condicional si resto es igual cero.

Problema tipo condicional #3

Presentar un menú de 5 destinos (ciudades) diferentes, el usuario al seleccionar el

destino conocerá la distancia en kilómetros y el precio del pasaje por avión.

99
Fundamentos de programación con JavaScript

En este ejercicio es un poco más simple la solución ya que nos piden un menú con unas
opciones y dependiendo de esa opción devolvemos un resultado usamos los if anidados
para resolver esto y agregar una función para tener un poco más orden y funcionalidad a
la hora de mostrar la información con el alert().

Problema tipo ciclos #1

Dados base y exponente, calcular e imprimir la potencia.

100
Fundamentos de programación con JavaScript

En este caso podemos resolver este problema de dos formas la primera usando el
operador especial ** que nos devuelve la potencia o hacer un for y acumular el
resultado de cada multiplicación y obtener la potencia.

Problema tipo ciclos #2

Leer N valores y calcular e imprimir el Promedio de los números impares

101
Fundamentos de programación con JavaScript

Este ejercicio es un poco más complejo, pero vamos por partes lo primero es pedir
la cantidad de número que vamos a pedir iniciamos unas variables un acumulador
un contador y una variable i para usar el while también tenemos un array para
guardar cuales fueron los números impares. Ya dentro del while pedimos el
número validamos si el resto de ese número es diferente de cero si es diferente de
cero quiere decir que es impar aumentamos a uno el contador y acumulamos el
número y agregamos ese número al array.

Para terminar, mostramos los números del array y hacemos la división de los
números acumulados sobre el contador y obtenemos el promedio.

Problema tipo ciclos #3

Leer un Número y determinar si es PRIMO o No.

Para resolver este problema lo primero que debemos saber es cuando un número es
primo y cuando NO, cuando hablamos de que un número es primo nos referimos
matemáticamente hablando a cuando solo es divisible por sí mismo y por la unidad. En
otras palabras, el resto de la división siempre debe ser diferente de cero si es cero no es
primo y en este caso la unidad comienza en 2 ya que asumimos que el 1 es primo por
defecto.
102
Fundamentos de programación con JavaScript

Ahora bien, pedimos el número definimos un contador y una variable primo que por
defecto va a ser true declaramos un while entonces mientras primo sea true y contador
sea diferente de numero voy a hacer el ciclo y validado con mod (%) si el resto de la
división es cero, si es cero la variable primo pasa a ser false y el ciclo se termina y por
último aumentamos el contador en uno. Fuera del while validamos la variable primo para
mostrar un mensaje si el número es primo o no.

Problema final

Elabore un algoritmo en JavaScript que lea el código, detalle (nombre articulo),

cantidad y precio de los artículos de una factura para un cliente de un
supermercado. Por cada artículo cuya compra supere las 12 unidades se aplicará
un descuento del 5% por unidad. La lectura termina cuando el código sea igual a
cero. Calcule e imprima lo siguiente:

a. Valor total por artículo

b. Total de ítems (artículos) vendidos
c. Subtotal de la factura
d. IVA del 16% sobre el subtotal
e. Total a pagar
f. Valor total descontado (Dinero ahorrado en la compra)

El problema final lo pueden encontrar en el siguiente link.

https://codesandbox.io/s/ejercicio-6m512?file=/index.js

Espero haya sido de su aprovecho este libro, sé que si esta comenzado en este
mundo del desarrollo web se le puede hacer algo difícil pero el truco en esto es
repasar hacer ejercicios constantemente, realizar proyectos personales probar
cosas nuevas seguir aprendiendo y realmente nunca parar de aprender.

103