1Conceptos básicos de programación.

Programar es el proceso de crear software escribiendo,

probando, depurando y dando mantenimiento a las
instrucciones del computador en un lenguaje de
programación. A este conjunto de instrucciones se les
denomina código fuente del software creado.

Existen centenares de lenguajes de programación,

muchos de ellos fueron creados para dar respuesta a
problemas particulares o máquinas específicas. No es de
interés ahora discutir todos los tipos de lenguajes existentes, sino, más bien,
conocer aquellos que pueden ser interpretados por computadores, smartphones o
que pueden ser empleados para proveer servicios informáticos a través de internet
y su clasificación más general.
Un lenguaje de programación es diferente al lenguaje de códigos que puede
entender la máquina (lenguaje de máquina). Los lenguajes de programación,
pueden dividirse en dos categorías: lenguajes interpretados o lenguajes
compilados, a saber:
Compilado Interpretado
Definición
El código creado debe traducirse de Un programa escrito en un lenguaje
manera que el procesador del interpretado, necesita de otro
computador o smartphone pueda programa auxiliar (el intérprete), que
comprenderlo, a este proceso se le traduce los códigos fuentes de un
llama compilación. programa y los interpreta para la
máquina.
El lenguaje compilado necesita que Un lenguaje interpretado es convertido
antes de ser ejecutada una a lenguaje de máquina cada vez que
compilación se convierta el código es ejecutado (para ello requiere del
fuente escrito a un lenguaje de intérprete), que traduce las
máquina. instrucciones.
Características
Para un lenguaje compilado luego de Por lo general, en el ciclo de desarrollo
compilar un programa se debe crear de software (tiempo entre el momento
ejecutables para cada uno de los en que escribe el código y lo prueba)
sistemas operativos en los que lo vaya es más corto en un lenguaje
a utilizar. Es decir, un programa interpretado dado que no se necesita
compilado en Linux no servirá en realizar el proceso de compilación,
Windows o en Mac OS. cada vez que cambia el código fuente.
Cuando se está ejecutando un Un lenguaje interpretado para ser
programa escrito en un lenguaje ejecutado, debe tener instalado el
compilado es mucho más rápido que interpretador.
uno interpretado, dado a que se
encuentra en código de máquina.
 Los lenguajes compilados están El código fuente en un lenguaje
optimizados para el momento de la interpretado está optimizado para
ejecución, pero esto significa más hacerle la vida más fácil al
trabajo para el programador programador, aunque esto signifique
(compilarlo). una carga adicional de procesamiento
para la máquina.
Tabla 1- Lenguajes de programación
JavaScript, al igual que cualquier otro lenguaje de programación, tiene algunas
características especiales: sintaxis, modelo de datos, etc. JavaScript es un
lenguaje esencial para cualquier principiante de programación y también para
quienes ya saben programar, debido a que las diferencias con otros lenguajes de
programación son numerosas siendo un lenguaje necesario para el desarrollo de
aplicaciones web y móviles hoy en día.
En adelante, JavaScript es el lenguaje de programación abordado y es un
lenguaje interpretado que inicialmente fue creado para que los navegadores lo
interpreten y hoy en día muchos dispositivos tienen el intérprete que permite correr
programas escritos en él por lo que será más sencillo el trabajo tanto para la
máquina como para el programador.
2Entornos de codificación e instalación JavaScript

En su mayoría los navegadores (Chrome,

Mozilla, Edge) tienen intérprete de JavaScript y
adicional se puede instalar el intérprete para el
sistema operativo de preferencia (Framebits,
2020).

Dado lo anterior, existen herramientas,

manuales o videos que se emplean para el
desarrollo de programas en JavaScript y a
continuación se comparten recursos de acceso
y material audiovisual de apoyo de cada
herramienta, tal como se indica en la siguiente tabla.
Herramienta Recurso Web Uso y/o instalación
Editor y compilador en https:// Woodrow, J (2018) How to use
 línea PlayCode playcode.io/ playcode.io. https://www.youtube.co
m/watch?v=9rtsvbc4KZI
Intérprete de https:// Framebits. (19 de enero. 2020).
JavaScript: Node js nodejs.org/es/ Descargar e instalar Node Js en
Windows
10. https://youtu.be/v0x1Ku5Tgac
Editor de código Visual https:// Code Compadre. (30 de junio.
Studio Code code.visualstudi 2020). How to Download and Install
o.com/ Visual Studio Code for Windows
10. https://youtu.be/KpzkPlh_HsU
El navegador: Google https:// Choque, R. C. (2020, May 10).
Chrome www.google.co Cómo usar la consola de google
m/chrome/ chrome para Javascript. Youtube.
Retrieved
from https://www.youtube.com/watch
?v=Hf3n-p3VYx4

Tabla 2 - Entornos de codificación.

3Sintaxis del lenguaje JavaScript

n adelante, se presentan las características básicas de la sintaxis de JavaScript,

codificando algoritmos básicos, para ejemplificar la estructura propia del lenguaje
de programación, sin embargo, se recomienda que siempre que se esté
codificando algoritmos, se pueda tener a disposición la documentación técnica
oficial del lenguaje y material complementario propuesto.

3.1 Funciones y operaciones matemáticas

En JavaScript se pueden utilizar muchas funciones matemáticas; por ejemplo, un
algoritmo que toma dos números (8 y 6) y le aplica las 4 operaciones básicas y en
el editor de código online PlayCode (disponible en https://playcode.io/) se revisan
las características de la sintaxis del JavaScript y a la vez se conocen las
operaciones matemáticas del lenguaje.

Ingresar en la ruta del navegador a https://playcode.io/new, escribir el código de la

línea 1 a la 12 en la pestaña script.js como se muestra en la siguiente figura:
Figura 3 / Operaciones aritméticas con JavaScritpt.
Explicación:
en las líneas 1 y 2 aparece la palabra reservada let que sirve para indicar que se
define una variable accesible en el contexto donde se crea (cuando se vea
programación modular quedará más claro esto del contexto).

Las palabras reservadas numero1 y numero2se les asigna el valor

correspondiente. Es de observar que se definen y se inicializa la variable en una
misma línea, esto es una característica del lenguaje.

Luego en las líneas 4 al 7 se crean o se definen unas variables con la palabra

reservada var, a diferencia de la palabra let estas variables se pueden ver desde
cualquier parte o módulo del script.
Una vez se crean las variables con identificadores suma, resta, producto, division,
también son inicializados sus valores empleando las operaciones matemáticas
respectivas.

Una de las formas que JavaScript permite mostrar los resultados es con la función
log del objeto console y se accede console.log() (con el operador punto .) y entre
paréntesis lo que se desea mostrar en la pantalla de la consola.

Validación:
Dentro de los paréntesis "la suma es: " + suma, aparece la operación
más + usado para sumar dos números antes, solo que acá no hay dos
números sino una cadena de texto y un número, pero en este caso lo
que hace el operador + es concatenar o juntar el texto “la suma es:” y
el valor de la variable suma. A esta característica de los operadores se les llama
sobrecarga de operadores, porque según el tipo de datos suma y según otra
concatena.
Cuando las operaciones matemáticas son más complejas como la raíz cuadrada,
la función exponencial, las funciones trigonométricas, existe un objeto que agrupa
estas funciones se llama Math, puede ver la documentación técnica de la clase
completa en Math (MDN, 2021b), a continuación, un ejemplo de su uso.
Se debe crear un algoritmo que muestre el seno del valor PI (3,1416) multiplicado
por 3 la función, y también que nos eleve 6 a la tercera potencia mostrando su
resultado:

Figura 4 / Uso del objeto Math

Se debe escribir el código fuente de las figuras 3 y 4, y obtener los mismos
resultados en la consola, como se muestra en cada imagen, de esta forma se
familiariza con la herramienta de trabajo.
A continuación, puede revisar el listado de funciones de la clase Math.
Tabla 1
 Métodos del objeto Math

Todas las funciones matemáticas se pueden combinar con otras operaciones

aritméticas o emplear operadores de evaluación de condición y previo a ello es
preciso conocer los diferentes tipos de datos que existen.
3.2. Tipos de datos, operadores y orden de evaluación
Existen muchos tipos de operadores para JavaScript, cuya función es realizar una
operación entre dos o más valores contenidos en variables, constantes o
acumuladores:

A. Tipos de datos

JavaScript tiene los siguientes tipos de operadores (se describirán los principales
para aprender a programar).

Según sea el tipo que las variables o constantes almacenan, se pueden clasificar
en seis (6) tipos de datos primitivos la referencia del lenguaje dice que son:

 Undefined: indeterminado o indefinido.

 Boolean: tipo booleano los valores posibles son true o false.
 Number: números enteros, o decimales.
 String: cadenas de texto.
 BigInt: números enteros grandes.
 Symbol: referencia a otros datos.
Otros tipos de datos más complejos o abstractos de datos:

 Null: tipo primitivo especial que tiene un uso adicional para su valor: si el
objeto no se hereda, se muestra null.
 Object: tipo estructural especial que no es de datos, pero para cualquier
instancia de objeto construido que también se utiliza como estructuras de
datos (new Object, new Array, new Map, new Set, new WeakMap, new
WeakSet, new Date y casi todo lo hecho con la palabra clave new).
 Function: una estructura sin datos, aunque también responde al operador
t.
Cuando se declaran variables se debe considerar los siguientes tipos, ya se han
usado dos (2) de ellas:

 var: declara una variable, opcionalmente la inicia a un valor.

 let: declara una variable local con ámbito de bloque, opcionalmente la inicia
a un valor.
 const: declara un nombre de constante de solo lectura y ámbito de bloque.
Para ampliar la información de acuerdo con los tipos de datos y estructuras, se
debe revisar el material complementario dispuesto:
Enlace web. Tipos de datos y estructuras en JavaScript. (MDN, 2021e).
Una variable en JavaScript puede tener cualquier tipo de dato, entero, real,
cadena de texto etc. JavaScript no es un lenguaje fuertemente tipado de manera
que queda en el programador la responsabilidad de saber qué tipo de dato está
almacenando en cada variable.

B. Operadores

Se considera una expresión, aunque de un tipo distinto, el asignar un valor a una

variable. Para todas estas operaciones se emplean los denominados ‘operadores‘.
Se listan a continuación algunos de los operadores que se utilizan con mucha
frecuencia.

Operadores de asignación
Un operador de asignación asigna un valor a la variable a la izquierda basándose
en el valor de su operando derecho. El operador de asignación más simple es
igual (=), que asigna el valor de su operando derecho a su operando izquierdo. Es
decir, x = y asigna el valor de y a x. A continuación, se presenta una lista de
operadores más usados.
También hay operadores de asignación compuestos que son una abreviatura de
las operaciones enumeradas en la siguiente tabla:

Operadores de asignación

Un operador de asignación asigna un valor a la variable a la izquierda basándose

en el valor de su operando derecho. El operador de asignación más simple es
igual (=), que asigna el valor de su operando derecho a su operando izquierdo. Es
decir, x = y asigna el valor de y a x. A continuación, se presenta una lista de
operadores más usados.

También hay operadores de asignación compuestos que son una abreviatura de

las operaciones enumeradas en la siguiente tabla:

Nombre Operador abreviado Significado

Asignación. x=y x=y

Asignación de adición x += y x=x+y
Asignación de resta x -= y x=x-y
Asignación de multiplicación x *= y x=x*y
Asignación de división x /= y x=x/y
Asignación de residuo x %= y x=x%y
Asignación de exponenciación x **= y x = x ** y

tabla 2 / Operadores de asignación básicos

C. Orden de evaluación de operadores.

Es importante recordar que los computadores ejecutan los operadores en un

orden establecido. El siguiente es el orden (jerarquía), de acuerdo con los
expuestos anteriormente, y deben conservar el orden de precedencia de
operadores:

1. 1Paréntesis (se ejecutan primero los más internos).

2. 2Signo (-2), si un valor es positivo o negativo.
3. 3Potencias (^) y Raíces y otras funciones (Math.sqrt()); Productos y
Divisiones ( * y /), en este mismo orden.
4. 4Sumas y Restas (+ y -).
5. 5Concatenación (+).
6. 6Relacionales (=, <, >).
7. 7Negación (no).
8. 8Conjunción (y).
9. 9Disyunción (o).
3.3. Expresiones y comentarios.
JavaScript permite poner comentarios en el código fuente, como la mayoría de los
lenguajes de programación y existen dos tipos de comentarios en línea que
comienzan con una doble barra: //, y los comentarios multilínea, que comienzan
con /* y terminan con */ tal como se observa en la siguiente figura.

Figura 6 / Tipos de comentarios.

Los comentarios son importantes porque le dan mantenibilidad al programa, es

decir que otro programador, o el mismo, tiempo después puede revisar el código y
apoyarse en los comentarios para saber qué hace el algoritmo y como lo hace.
En adelante se procura que exista al menos un comentario en cada código fuente
empleado para ejemplificar los elementos constitutivos del lenguaje de
programación JavaScript y puede hacer lo mismo durante la creación de los
diferentes códigos.
3.4. Estructuras de selección
La estructura de selección se necesita cuando el código de tu programa ejecuta
uno de varios resultados posibles, basado en el valor de una condición.

Ejemplo: un aprendiz aprueba un examen cuando la calificación de este es

mayor o igual a 3. Elaborar un programa en JavaScript donde que dada una
calificación, aplique el criterio de aprobación e imprima “Aprobado” o
“Reprobado”, según sea el caso.

Como resultado del análisis a este problema tenemos el diseño del siguiente
algoritmo:

Figura 7 / Seudocódigo calificaciones

El mismo algoritmo se puede visualizar, pero ya en lenguaje de programación:

Figura 8 / Algoritmo
calificaciones en JavaScript

Como la línea 1 empieza con /*

quiere decir que toda
continuación será un comentario
hasta que aparezca los
caracteres */ (línea 3), en él se
debe escribir que hace el
algoritmo y otra información que
se verá más adelante.

En la línea 4 se define un valor

constante (es decir no se
modificará más en todo el
algoritmo donde definimos) se
ha puesto por identificador la
palabra calificacion.
Para recordar: una palabra reservada es una palabra que no se puede utilizar
como identificador de algún dato.
En la línea 6 ocurren varias cosas que se deben tener en cuenta:

1. 1Se usa la palabra reservada if y entre paréntesis la condición que la se

quiere comparar.
2. 2Se emplea el símbolo corchete abierto { se llama abrir corchete.
3. 3
En la línea 7 se envía la instrucción de que imprima el resultado de que
aprobó.
4. 4En la línea 8 se cierra un bloque de código con el símbolo corchete
cerrado }, esto quiere decir que hasta este punto termina el bloque. A todo
lo que esté entre estos corchetes se le llamará CONTEXTO, en el primer
contexto están agrupadas las operaciones que se ejecutarán si la condición
calificacion >= 3 es verdadera.
5. 5También en la línea 8 se observa la palabra reservada else, que sirve para
indicarle al intérprete de JavaScript que se creará un bloque o contexto
para cuando la condición evaluada por el if no se cumpla, y enseguida se
abre el contexto con el carácter corchete abierto {.
6. 6Luego, en la línea 9 se ha puesto la operación de escribir en la consola
que ha reprobado.
7. 7Para finalizar el contexto, se cierra con el carácter corchete cerrado }.
Ahora se debe escribir el programa y cambiar los valores de la constante para
validar que el algoritmo está bien diseñado.

De la misma forma, se puede realizar el algoritmo que, dada una edad en años,
evalúe e imprima si es mayor de edad:
Figura 9 / Escribir en pantalla si es o no mayor de edad.

De acuerdo con la figura 9, no existe un contexto si no se cumple la condición de

mayoría de edad a esta estructura se denomina CONDICIONAL SIMPLE.

El flujo de ejecución del algoritmo anterior es básico y puede haber otros mucho
más complejos como las estructuras de repetición o iterativas que también tienen
una sintaxis particular.
3.5. Estructuras de repetición
Las estructuras de repetición permiten repetir un bloque de instrucciones,
determinado o no, un número de veces. A continuación, se ejemplifican los más
comunes (FOR, WHILE) que se pueden codificar también en la sintaxis de
JavaScript.

A. Estructura de repetición FOR

Ejemplo 1: escribir un procedimiento que muestre siete (7) veces en pantalla la

frase “Esto es un algoritmo”. Mostrar en pantalla la salida del ejercicio:

Figura 10 / Imprimir 7 veces un mensaje.

Como se puede observar en la línea 4 de la figura 9, se ha usado la palabra
reservada for y dentro del paréntesis aparecen tres (3) instrucciones (separadas
por punto y coma).
La primera instrucción let i = 0; es la creación e inicialización de una variable con
identificador i, como se usó la palabra reservada let se está indicado que la
variable i solo podrá ser accedida dentro del contexto del for.

Luego se ve una condición i < 7;, esta condición significa que mientras que i tenga
valores de 0 a 6 debe ejecutar el bloque o contexto definido en el for (desde el
corchete abierto hasta el corchete cerrado).

Una vez ha terminado de ejecutar el contexto (línea 6) se ejecutará la tercera

sentencia de la línea 7 o sea i++, esta línea es equivalente a i = i + 1; incrementar
en 1 la variable i, luego de incrementarla procede a evaluar nuevamente la
condición y si se cumple volverá a ejecutar las instrucciones que están dentro el
contexto (lo que está dentro de paréntesis).

Es de notar que los valores toman la variable i son 0, 1, 2, 3, 4, 5, 6. En total 7

valores el número de veces que se necesita que se repita el bucle..
Para recordar:
El carácter punto y coma se usa para decirle al computador, o intérprete, que ha
finalizado una instrucción.
La estructura de repetición PARA (FOR) se usa cuando se sabe cuántas veces se
debe repetir un grupo de instrucciones.

Ejemplo 2: se necesita elaborar un algoritmo en JavaScript que, dado un número

entero, sume todos los números naturales que hay hasta ese número. Por
ejemplo, si el usuario digita 3, el programa debe sumar: 1 + 2 + 3, si el usuario
digita 5 el programa debe sumar 1+2+3+4+5. Al finalizar, debe imprimir el
resultado.

Figura 11 / Sumar los números desde 1 hasta un número.

Como se puede ver, se decide una constante con valor 5, y una variable que será
para el algoritmo un acumulador donde se almacenarán las sumas. También, note
que los valores de i van desde 1 hasta exactamente el valor que tiene la constante
(es decir 5).
B. Estructura de repetición WHILE

A través del ejemplo del cálculo de factorial se explicará el uso y comportamiento

de la sentencia while. Recordando el algoritmo diseñado:

Figura 12 / Seudocódigo algoritmo cálculo de factorial.

Figura 13 / Seudocódigo algoritmo cálculo de factorial.

Es ideal poder transcribir el código usando https://playcode.io/ , para lo cual se
debe escribir la condición del while, es decir, contador <= numero de último, para
que el sistema PlayCode no entre a un ciclo que nunca termina. Una vez funcione
correctamente, se propone el código que está entre comentarios (//) para practicar
las dos formas de sintaxis.

Es de recordar que las estructuras de repetición básicas y su sintaxis pueden

pasar su aplicación más común para recorrer la estructura de datos.
3.6. Estructuras de datos
Las estructuras de datos también conocidas como arreglos, son importantes en el
desarrollo de algunos algoritmos son obligatorias a la hora de hacer aplicaciones
web o móviles; por ello, se explica su sintaxis en JavaScript para los vectores,
matrices y registros.

A. Vectores
Los vectores se definen en JavaScript como un tipo de dato con métodos, y
atributos que lo definen. Es ideal analizar lo siguiente:

Figura 14 / Definición de un vector.

En la línea 1 se ve cómo se define un vector con identificador frutas, de tres
(3) elementos, cada uno de ellos es una cadena de texto con una fruta.

En la línea 3 se manda imprimir en la consola todo el vector con su contenido,

como se ve en la consola.

En la línea 4 se le llama al atributo frutas.length que contiene el tamaño del

vector (es decir 3).
Acceder a los elementos de un vector
 Figura 15 / Indexar un vector.
Los índices de los vectores se comienzan en cero, en otras palabras, el índice del
primer elemento de un vector es 0, y el del último elemento es igual al valor de la
propiedad length del array restándole 1. Si se utiliza un número de índice no
válido, se obtendrá
undefined.
Ahora, se debe crear un programa que guarde los resultados de la tabla de
5 en un vector, con estos resultados recorrer el vector e imprimir la tabla del 5:

Figura 16/ Crear la tabla del 5.

Es ideal revisar la lista de los métodos más comunes en los arreglos:
Función Operador abreviado
indexOf() Devuelve el índice del primer elemento del array que sea
igual a elemento Buscado, o -1 si no existe.
join() concatena en un string todos los elementos de un array.
push() Añade uno o más elementos al final de un array y devuelve
 el nuevo valor de su propiedad length.
pop() Elimina el último elemento de un array, y devuelve dicho
elemento.
sort() Ordena los elementos de un array, modificando este, y
devuelve el array ordenado.
shift() Elimina el primer elemento de un array, y devuelve dicho
elemento.
B. Matrices

Las matrices se pueden ver lógicamente como un vector, y cada uno de sus
elementos es otro vector, así la representación de la matriz queda codificada como
muestra la figura 17:

Figura 17 / Crear la tabla del 5.

C. Registros

Hasta ahora se ha visto cómo un arreglo es la colección de datos del mismo tipo,
pero un registro es una colección de datos de diferente tipo que se relacionan
entre sí:

Nombre Correo Edad Saldo

Juan [email protected] 19 36.234
Luis [email protected] 18 23.234
Andrea [email protected] 22 0
m
Pedro [email protected] 12 65.234
Maria [email protected] 16 123
Tabla 7 / Registros.
Figura 18/ Registros.
Exceptuando el encabezado de la tabla 7, cada fila representa un registro y cada
dato de un registro puede tener un tipo de dato diferente. Si se está interesado en
codificar la tabla 7, en una estructura con JavaScript el código sería como se tiene
en la figura 18:
Para recorrer todos los registros se precisan dos (2) ciclos for, uno dentro de otro
(anidado) como se muestra a continuación:

Figura 19/ Registros.

Como se puede observar en la figura 19, se requieren dos ciclos for anidados, y
cada ciclo tiene una variable de índice de nombre diferente i y j y la manera de
indexar la matriz vista anteriormente en el ejemplo de registros [ i ][ j ].
3.7. Estructuras de salto
Estas estructuras son instrucciones que permiten romper la ejecución natural o
secuencial de los programas, permitiendo que se salte a otro punto de la ejecución
del programa, estas instrucciones tienen las palabras reservadas (continue, break
y return):
Sentencia continue
La sentencia continue se salta a la siguiente iteración del ciclo for o while como se
presenta en el siguiente ejemplo y teniendo en cuenta los resultados.

Figura 20/ Sentencia continue.

Como se observa, cuando la variable i tiene el valor 3, se ejecuta la sentencia
continue se salta la sentencia donde debe imprimir el valor de 3, por ese motivo no
aparece en la consola.

Sentencia break
Por otro lado, la sentencia break, detiene la ejecución del ciclo
independientemente de cuántas veces este configurando el ciclo. Mire el siguiente
ejemplo en la Figura 21, prestando especial atención en la salida de consola.
Figura 21/ Sentencia break.
En la anterior figura, cuando i tiene el valor de 3 ya no se sigue ejecutando más el
ciclo, aunque esté programado para ejecutarse 5 veces, solo ejecuta 3 iteraciones
y, ya que en el tercero luego de evaluar la condición i == 3 ejecuta la sentencia
break haciendo que termine todo.
Sentencia return
Sirve para terminar la ejecución de un bloque de instrucciones, se usa mucho en
programación modular cuando se quiere retornar un resultado, se usará más
adelante.

Por ejemplo, se tiene una función que divide un número entre 4 y se ha creado
para obtener resultados. En el primer caso se le pasa 27 para que lo divida entre 4
pero como no hay return dentro, devuelve “undefined”. No accede al número
porque el número solo vive dentro de la función y no hay nada que dé el valor. Si
se le agrega return, efectivamente se obtiene el resultado de la división.

3.8 Métodos de ordenamiento y búsqueda

Existen varias técnicas de ordenamiento de vectores las cuales son importantes
para realizar búsquedas y, al igual que en la vida real, es más fácil buscar en un
lugar que esté ordenado que en uno que no lo esté, como JavaScript está
diseñado para pequeños algoritmos que resuelven pequeños problemas y
convertirlos en servicios, el uso de esas técnicas no tiene mucha aplicabilidad,
pues la diferencia en tiempos computacionales de ejecución es considerable solo
cuando se manejan volúmenes de datos grandes, mientras que para volúmenes
de datos cortos o pequeños los tiempos computacionales no tienen diferencias
comparables. Es por eso que, si en JavaScript el volumen de datos en los
arreglos no será grande, no es necesario la aplicación de esas técnicas.
A. Ordenamiento de cadenas de texto

Figura 23/ Ordenamiento de números como cadenas de texto

Se ordenará un vector de mayor a menor valor y de acuerdo con los datos que
tiene, se debe tener en cuenta que el arreglo se modifica al ordenarlo, devolviendo
la misma matriz ordenada, pero no una nueva. Esto es importante, si se quiere
mantener inmutable el vector y obtener otro ordenado, lo que se tendría que hacer
es una copia del arreglo antes de ordenarlo.

Por defecto el método Array.sort() ordena los elementos del array como si fueran
cadenas inclusive si los datos son de tipo entero, como en este ejemplo:.
Figura 24/ Ordenamiento de cadenas de texto
La figura 24 muestra el arreglo a ordenar en la línea 1, en la línea 2, se muestra en
consola el vector, se ha usado la función join(‘, ’) que sirve para concatenar los
datos del vector o arreglo poniendo entre ellos una coma (,) y espacio (línea 2).
Luego se aplica la función sort() en la tercera línea de código y, posteriormente,
se muestra el vector ya ordenado. Como se observa, el resultado en consola es un
ordenamiento como si los elementos fueran cadenas de texto.

Figura 25/ Invertir el orden de los elementos

El ejemplo de la figura anterior muestra un ordenamiento de cadenas de texto.
También podemos ordenar el arreglo de forma descendente con el
método Array.reverse() como se muestra en la figura 25.
La función Array.reverse() no ordena los elementos, simplemente toma los
elementos y les invierte el orden, es decir, el primero pasa a ser el último, el
segundo, el penúltimo y así hasta que el último pasa al primer puesto, es por esto
que primero se ordena en orden ascendente y luego se invierte para lograr el
orden descendente.
B. Ordenamiento de datos numéricos
Figura 26/ Definición de una función
Como se ve el ordenamiento con la función Array.sort() se hace considerando los
elementos del arreglo como cadenas de texto. Antes de ver cómo se ordenan con
datos numéricos se explicará que es una función en JavaScript.

Las funciones son uno de los bloques de construcción fundamentales

en JavaScript. Una función en JavaScript es similar a un procedimiento o “un
conjunto de instrucciones que realiza una tarea o calcula un valor, pero para
que un procedimiento califique como función, debe tomar alguna entrada y
devolver una salida donde hay alguna relación obvia entre la entrada y la
salida”. Para usar una función, se debe definir en algún lugar del ámbito en el que
se desea llamarla (MDN, 2021d).
Ejemplo: se quiere construir una función que reciba dos (2) datos
numéricos, hay que multiplicar estos dos números, al resultado se le suma
el valor de 100 y, por último, retorna la mitad de este resultado.
Como se puede observar en la línea 1 de la figura 26, se usa la palabra reservada
function y luego se escoge identificador para la función que el caso
es operacion, luego entre paréntesis se seleccionan nombres para las variables
de entrada (en el ejemplo a, y b), a continuación, se define un contexto (espacio
de código entre corchetes) para indicar cuáles son las instrucciones que ejecutará
la función. En la línea 2 se muestra que la función retorna la multiplicación de a *
b sumando 100 y a este resultado dividido entre 2. En la línea 4 se ve como
invocamos la función operacion, y le pasamos los parámetros 3 y 8 para las
variables a y b respectivamente, el resultado es almacenado en la
variable dato1. Y como se observa la función puede invocarse más de una vez
(las que se necesiten).
Figura 27/ Ordenamiento de números
Para ordenar un vector con datos numéricos se debe pasar como argumento una
función al método
Array.sort(), esta función indica qué operación debe hacerse sobre los datos a
comparar entre dos datos del arreglo. Para comparar si un número es mayor que
otros es muy común usar la resta porque si se resta un número solo existen tres
tipos de respuestas. Cuando a un número a le restamos un número b (a - b), si el
resultado es negativo es porque b es mayor que a, si el resultado es positivo
porque aes mayor que b si el resultado es cero solo si a y b son iguales.s

Figura 28/ Ordenamiento inverso de números

Como se puede ver en la figura 27 se pasa una función (sin identificador) que
recibe dos datos del arreglo (a y b) y los compara con la diferencia (resta) de ellos.
A las funciones que no se les pone identificador se les llaman funciones anónimas,
también existe otra forma de sintaxis para funciones anónimas, se denomina
funciones flecha. Se verá, con la sintaxis de función flecha, cómo ordenar un
arreglo número de manera inversa en la figura 28.
La figura 29 muestra cómo no se usa la palabra reservada function, tampoco se
usan la identificación de contexto (corchetes) porque la función tiene una sola
línea y se reemplaza por el operador =>. Y por defecto se retorna el resultado de
la operación b – a, que es la diferencia de los dos números, pero en el otro orden
(este orden de la operación es el que determina si el ordenamiento es de mayor a
menor o viceversa).

C. Ordenamiento de registros

Suponiendo que se tienen los registros de la tabla, se desea ordenarlos de mayor

edad a menor edad.
Usuario Edad
Mariela 31
Eduardo 30
Andrés 34

Tabla 7 / Registros.
En esta oportunidad en la figura 30 se muestra en las líneas 6 y 8, que se puede
usar contexto (corchetes) a pesar de que dentro solo hay una sentencia (línea 7),
el resultado a retornar es la diferencia entre b.edad y a.edad para que el
ordenamiento sea de mayor a menor.

D. Buscar un elemento
Figura 30/ Buscar un elemento
El método find() devuelve el valor del primer elemento del array que cumple la
función de prueba proporcionada (Array.prototype.find() – JavaScript, MDN,
2021).
Como se puede ver en la figura 31, se usa el identificar elemento para referenciar
a la variable que se va a aplicar el criterio que en el ejemplo es encontrar el primer
elemento que sea mayor que 10.

Figura 31/ Buscar varios elementos

Muchas veces es importante que, en lugar de retornar un solo valor, el resultado
sea más de uno, por ejemplo, si en el arreglo de la figura 30, se retornan los
valores que son mayores que 10, por lo tanto, debe retornar otro vector con los
valores resultados. Para esto existe la función Array.filter(), que crea un nuevo
arreglo con los datos que cumplan con la condición.
Es de interés notar que la consola solo retornó los datos que cumplen la condición
que el elemento es mayor que 10.

En la medida que se va avanzando en el conocimiento de la sintaxis del lenguaje,

el código fuente se va enriqueciendo de elementos y por tanto de complejidad,
esto hace que sea necesario conocer herramientas para la depuración de fallas y
corregir los fallos en la redacción del código.
4Depuración y fallas de sintaxis
La principal funcionalidad que se requiere en la depuración del código, es la
mostrar salidas parciales de datos de depuración del estado de las variables, o tal
vez se tenga la necesidad de mostrar que se está ejecutando determinada línea
de código. Por lo general, la salida de JavaScript está dirigida hacia un navegador
o hacia un flujo de datos de un servidor web, dejando la consola para realizar
estas depuraciones

Hasta ahora se ha usado la consola para mostrar datos de depuración cuando se

emplea
console.log(), que es un método usado para mostrar mensajes de confirmación
de operaciones o mitificaciones de éxito en las operaciones del algoritmo. Pero
también existen más:
 console.log() para enviar y registrar mensajes generales.
 console.dir() para registrar un objeto y visualizar sus propiedades.
 console.warn() para registrar mensajes de alerta.
 console.error() para registrar mensajes de error.

Figura 31/ Mensaje de depuración

5Fallas de lógica
Para realizar las depuraciones y correcciones en la lógica, es preciso realizar la
ejecución paso a paso de algunas líneas de código, para poder apreciar los
cambios que las variables tienen en el transcurso de la ejecución. A continuación,
se indican algunas instrucciones para realizar una revisión paso a paso, cuando la
depuración se hace desde un navegador web siguiente los siguientes pasos.
A. Chrome DevTools
Se puede ir a las herramientas de desarrollo (DevTools)
pulsando "Command+Option+I" en Mac o "Control+Shift+I" en Windows y
Linux para ver el panel de inspección en la parte izquierda de la ventana del
navegador. Al inspeccionar el elemento ofrece diferentes opciones para trabajar.
Aparece varias pestañas las opciones presentes para depuración en Chrome son:

 Console: la consola se utiliza para imprimir registros, muestra errores y

advertencias.
 Elements: se pueden seleccionar los elementos para inspeccionar los
elementos HTML y hacer estilos en ellos.
 Sources: permite navegar los archivos que están presentes en la página
cargada y se puede elegir el archivo que se desea consultar.
 Network: empleado para inspeccionar todas las llamadas de red que
realizan los clientes al servidor, como las cabeceras HTTP, el contenido y el
tamaño.
B. Seleccionar fuente (sources)
Una vez se tiene que ir a la sección del archivo con el código fuente a depurar, se
puede navegar a través de él e identificar la porción de código en la que se
sospecha ocurre un error en la lógica.

C. Marcar punto de interrupción

Un punto de interrupción es una línea de código donde el programa se detendrá.
Ya seleccionado el archivo a ser depurado, se puede ver que hay números de
línea escritos por cada línea de código. Se debe hacer clic en este número de
línea y esta línea actuará como un punto de interrupción y la ejecución se
detendrá una vez que el control llegue a esta línea.
D. Avanzar línea a línea
Cuando la ejecución se detiene en el punto de interrupción, se puede reanudar la
ejecución haciendo clic en el botón azul que se muestra en la figura 34, así la
ejecución avanza línea por línea. Aquí se puede inspeccionar cada línea de código
junto con los valores contenidos en las variables.

Figura 34/ Ejecución línea a línea

E. Comprobar el estado de las variables
El punto más importante es conocer los valores de las variables, esto se hace
pasando el ratón por encima de la variable. La principal ventaja de usar puntos de
ruptura es que se pueden conocer los valores de más de una variable al mismo
tiempo, lo que no es posible en el caso de las consolas de registro, donde se debe
escribir console.log() para cada variable.