Javascript

El siguiente texto es una guía teórica-práctica sobre javascript escrita para la materia de desarrollo de aplicaciones en la nube de la carrera de ingeniería en sistemas de información - UTN FRSF

Leer o descargar la versión en PDF

Intro

Javascript es un lenguaje de programación que ejecuta en todos los browsers.

Por ejemplo, en Chrome podemos utilizar las herramientas de desarrollador para abrir una consola presionando Option + ⌘ + J (macOS), o Shift + CTRL + J (Windows/Linux)

Dentro la consola de Chrome ingresamos expresiones de js como nuestro input > que luego se ejecutan y su resultado se imprime como output < en la terminal misma.

TIP: La consola de Chrome es útil para realizar pruebas mientras estamos aprendiendo, ya que nos permite ver resultados inmediatos y sus herramientas de autocompletado e inspección son potentes.

Para poder escribir nuestro código y luego poder ejecutarlo vamos a necesitar un poco de ayuda de NodeJS, un entorno de ejecución de javascript, el cual está basado en el motor que utiliza Chrome.

Utilizando Node es que podemos ejecutar javascript en todos lados, incluso en servidores.

Para instalar node basta con dirigirnos a https://nodejs.org/es/ para descargar e instalar la última version LTS. Otra alternativa es utilizar nvm (node version manager), para cuando necesitamos administrar múltiples versiones, el cual se encuentra disponible para linux/mac y windows

Para comprobar si se instaló correctamente abrimos alguna terminal y ejecutamos

$ node -v

Deberíamos ver una respuesta indicando el número de versión de node indicándonos que todo salió bien

Con node instalado solo nos falta un editor de texto, vscode es una buena opción, pero también existen otros. Ahora solo nos falta abrir nuestro editor de texto de preferencia y estamos listos para empezar a escribir javascript.

0 - Hola mundo

Creando un archivo de extensión .js podemos empezar a escribir código, lo que escribamos aquí se ejecutara de arriba hacia abajo hasta finalizar.

Al escribir

console.log("Hola mundo");

Suponiendo que nuestro archivo se llama holamundo.js podemos abrir una terminal en el mismo directorio que el archivo y ejecutar

node holamundo.js

Y observamos

Sintaxis básica de javascript

Esta sección es un pequeño resumen de sintaxis moderna de javascript (ES6), no es necesario revisar, pero la idea es que resulte familiar a lo ya conocido por el alumno o que sirva de punto de partida para explorar

Declarando variables

Existen 3 formas de hacerlo

var foo = "asd"; // Variable mutable de scope de función o global (No recomendado)
let foo = "asd"; // Variable mutable de scope de bloque
const foo = "asd"; // Variable inmutable de scope de bloque

Para ver la diferencia de porque es recomendable let sobre var pueden leer este link de let vs var

En javascript no declaramos el tipo de dato al momento de crear variables, de hecho aunque no es para nada recomendable, el tipo de dato de la variable puede modificarse en tiempo de ejecución.

El siguiente código es javascript válido y nos muestra los tipos de dato más comunes

let miVariable;
console.log("Type: ", typeof miVariable); // Type: undefined

miVariable = "asd";
console.log("Type: ", typeof miVariable); // Type: string

miVariable = 100;
console.log("Type: ", typeof miVariable); // Type: number

miVariable = 0.212312;
console.log("Type: ", typeof miVariable); // Type: number (no hay distinción de enteros)

miVariable = true;
console.log("Type: ", typeof miVariable); // Type: boolean

// Muchas cosas en javascript son 'object'
miVariable = [1, 2, 3]; // Arrays
console.log("Type: ", typeof miVariable); // Type: object

miVariable = {
    id: 1,
    nombre: "juan",
    apellido: "carlos",
    habilitado: true
}; // Objetos
console.log("Type: ", typeof miVariable); // Type: object

miVariable = null; // Null
console.log("Type: ", typeof miVariable); // Type: object

// También podemos declarar variables definidas

let miVariableDefinida = miVariable;
const miConstanteDefinida = miVariable;

Bloques de control

Javascript también soporta los bloques de control similares a los que ya conocemos de otros lenguajes

• switch
• while
• for
• if...else

Comparando variables

// Operador '==' - Igualdad 'de valor' (no recomendable)
if (100 == "100") {
    console.log("Iguales (?) :thonk:");
}

// Operador '===' - Igualdad de valor y de tipo
if (100 === "100") {
    console.log("Esto no se ejecuta");
}

if (100 === 100.0) { // Recordemos que ambos son "number"
    console.log("Esto se ejecuta");
}

Valores Truthy & Falsy de variables

Los valores en javascript se consideran verdaderos o falsos dependiendo de su contenido al momento de ser evaluado en un “contexto booleano”, esto es conveniente para checkeos.

truthy	falsy
true	false
'false' (el string false)	0
'0' (el string 0)	'' (string vacío)
() (función vacía)	null
[] (array vacío)	undefined
{} (objeto vacío)	NaN (Not a number)
Los demás valores

Algunos ejemplos

let nombre = undefined;

// Usamos !! para negar dos veces e imprimir el valor booleano de la variable
// también podríamos haber escrito
//
// if(nombre){
//   console.log("true")
// }
//   console.log("false")
// }

console.log(!!nombre); // false

nombre = null;
console.log(!!nombre); // false

nombre = "";
console.log(!!nombre); // false

nombre = "Ricardo";
console.log(!!nombre); // true

El objeto global 'process' de Node

Node nos proporciona el objeto global process para obtener información e interactuar con el proceso actual.

Como process es un objeto global solo basta referenciarlo en nuestro programa para poder utilizarlo, sin embargo nuestro editor de texto a veces puede no reconocerlo. Si quisiéramos ayudar al autocompletado del editor podríamos escribir:

 const process = require('process');

Utilizando process podemos recuperar los argumentos de consola accediendo a process.argv

---

Ejercicios Si querés resolver los ejercicios pensados para esta sección podés dirigirte a la hoja de ejercicios-00

---

1 - Funciones y asincronía en javascript

Definición

Las funciones existen en casi todos los lenguajes de programación modernos, nos permiten encapsular comportamiento y reutilizar código.

function saludador(nombre) {
    return `Hola ${nombre}!`;
}

const greeter = function (name) {
    return `Hello ${name}!`;
}

// Invocaciones
saludador("Ricardo");
greeter("Richard");

Desde ES6 también podemos declarar nuestras funciones con la sintaxis de funciones flecha

const saludador = (nombre) => {
    return `Hola ${nombre}!`;
}

// Podemos comprimir quitando el return y los {}
const saludador = (nombre) => `Hola ${nombre}!`;

// Si solo recibe un parámetro también podemos quitar el () 
const saludador = nombre => `Hola ${nombre}!`;

// Si no recibe parametros tenemos que usar ()
const saludador = () => `Hola Extraño!`;

Funciones como first class citizens

En javascript las funciones van un paso más alla, se consideran “first-class citizen” (o ciudadanos de primera clase), esto quiere decir que son tratadas como cualquier otra variable. Por ejemplo, una función puede recibir otra función como parámetro, retornar una función y que esta sea luego asignada a una variable.

// Asignando funciones a variables
const f1 = function foo() {
    console.log("foo");
};
const f2 = function () {
    console.log("anónima");
};
const f3 = () => console.log("anónima");

// Declarando funciones y ejecutándolas inmediatamente (se asigna el resultado)
const hola = function () {
    return "hola"
}()
const chau = (() => "chau")() // En este caso tenemos que agregar paréntesis extras

// Funciones como parámetros
const sumar = (a, b) => a + b;
const operar = (operacion, n1, n2) => console.log(operacion(n1, n2))
operar(sumar, 1, 2) // Imprime: 3

// Funciones que retornan funciones (también llamadas thunks)
const restar = (n1) => (n2) => console.log(n1 - n2)
restar(10)(8) // Imprime: 2

Clausuras

Un detalle a mencionar es que javascript, a diferencia de lenguajes como java, no ofrece una manera nativa de marcar funciones “privadas”. Pero nos permite simular ese comportamiento mediante clausuras

Una clausura es una función que permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

Veamos este ejemplo

const saludar = (() => {
    const componerNombre = (n, a) => `${n} ${a}`;

    return (nombre, apellido) => {
        const nombreApellido = componerNombre(nombre, apellido);
        console.log(`Hola ${nombreApellido}`)
    };
})();

saludar("Ricardo", "Sanchez");  

Estamos definiendo una función y luego ejecutándola inmediatamente, esta retorna otra función que toma nombre y apellido de parámetro y se asigna a la variable saludar. Ahora, desde la función saludar estamos haciendo referencia a la función interna componerNombre pero esta no puede ser accedida de forma externa, logrando un resultado similar al de las funciones privadas.

Asincronía en Javascript

El runtime de Javascript solo puede ejecutar una sola cosa a la vez, es un lenguaje de programación single-threaded (un hilo) y por lo tanto solo puede procesarse de a una instrucción.

Esto nos impone una limitante al tratar de realizar operaciones que se extienden en el tiempo como consultar apis. Si nuestra función demora estaremos bloqueando el hilo principal y por lo tanto nada más podrá ejecutarse.

Por ejemplo, desde la consola de desarrollador de chrome podemos ejecutar while(true){} y de esta manera tildar completamente la tab, ya que no desocupamos el hilo para que la página siga funcionando.

Ahora, acabamos de decir que nuestro javascript ejecuta en un único hilo, por lo que no podemos recurrir a la programación paralela para solucionar nuestros problemas pero sí a la programación concurrente

Pero nosotros no ejecutamos solo javascript, ejecutamos javascript en un navegador o sobre nodejs y estos poseen un modelo de concurrencia basado en un “loop de eventos”. Si bien este modelo es diferente al que estamos acostumbrados en lenguajes como Java y existen varios recursos dedicados a explicar su funcionamiento de momento nos alcanza con saber que es la estrategia para resolver tareas concurrentes.

Modelando la asincronía: Promesas con then/catch

En Javascript, una Promise es un objeto que PUEDE producir un valor en algún m