A continuación encontraras explicación a temas básicos o fundamentales del lenguaje Javascript, siendo que este lenguaje, es el referente actual del mercado, es interesante e importante manejar los conceptos iniciales.

Por qué nace Javascript?

En el año 1995, la www (World Wide Web) o lo que conocemos comunmente denominamos internet de forma errada, iniciaba su auge, con la posibilidad de compartir de forma fácil contenido (para aquel momento, la forma común era a través de CD/DVDs y el medio común eran las revistas). Este contenido era estático pero de forma fácil llegaba a nuestras pantallas. Sólo que en la medida que el contenido fue creciendo, se hizo necesario mejorar la interactividad de la comunicación, de forma tal que el usuario no solo fue un receptor de contenidos, en su lugar se convirtió en un actor importante del proceso, con el envío de datos.

Así nace Javascript, como un lenguaje orientado a mejorar la usabilidad de los sitios web, a permtir que las interfaces tomaran dinamismo y que la comunicación entre cliente y sitios web fuese más simple e incluso más divertida.

Pero el punto no quedó allí, Javascript fue creciendo, al inicio era normal que un navegador como Internet Explorer o Netscape Navigator (los navegadores que existían y dominaron el inicio de la WWW), no soportase el uso de Javascript, pero su crecimiento fue tal, que en la medida que la WWW evolucionaba, Javascript lo hacía también, convirtiendose en parte fundamental de estos programas.

Ahora mismo Javascript, ya es un lenguaje de programación maduro, con impacto no sólo en la plataforma web, sino que se ha convertido en un lenguaje multifacético, que permite trabajar del lado de la interfaz (web o frontend) y del lado del servidor (backend), además tenemos Javascript  para desarrollo móvil (React Native por ejemplo) y Javascript para desarrollo de aplicaciones Desktop o Cliente/Servidor (Electron).

Por todo lo anterior (un muy breve resumen) es importante conocer los aspectos básicos de Javascript, que se indican a continuación.

Tipos de Datos en Javascript

Javascript como lenguaje de programación, tiene interesantes características que lo hacen versatil y funcional, una de ellas es como gestiona sus tipos de datos. En Javascript los tipos no se definen, es decir hablamos que es un lenguaje de tipado débil, pero eso no significa que no tenga tipos, por ello es fundamental conocer cuales de ellos están disponibles:

  • String para gestión variables con valores alfanuméricos y cualquier otro carácter.
  • Number para representar los números ya sean enteros o decimales.
  • BigInt, usado para representar números enteros.
  • Boolean para manipular los valores lógicos (true y false)
  • Object, con el fin de poder gestionar y representar objetos, conocidos por sus propiedades y métodos
  • Symbol, son un nuevo tipo de tipo de datos primitivo introducido en la versión ES6 del lenguaje. Se utilizan para representar valores únicos que se pueden utilizar como identificadores o claves en los objetos. También se utilizan para crear propiedades y métodos privados en las clases.
  • Null, El valor nulo representa la ausencia intencional de cualquier valor de objeto. Existe como tipo de dato primitivo de JavaScript y se trata como falso para las operaciones booleanas.
  • undefined, es un valor primitivo automáticamente asignado a las variables que solo han sido declarados o a los argumentos formales para los cuales no existe argumentos reales. Es decir si no asignamos ningún valor a una variable, está tendrá ese valor undefined.
  • Function, es un tipo de dato especial usado para reconocer cuando trabajamos sobre un función, que es un fragmento de código que realiza una tarea específica y devuelve un valor.

Como obtener el tipo de dato de un campo

En Javascript como comentamos al anteriormente, la gestión de tipos de datos es débil, no es necesario indicar el tipo de dato cuando declaramos una variable, por ello es importante saber como determinar el tipo de dato a una variable declarada. Este tipo de dato será automáticamente atribuido por Javascript a partir del valor asignado.

Para realizar esta tarea podemos usar la función typeof , como sigue a continuación:

console.log(typeof 42);// Tipo de dato esperado: "number"

console.log(typeof 'texto');// Tipo de dato esperado: "string"

console.log(typeof true);// Tipo de dato esperado: "boolean"

console.log(typeof varSinValor);// Tipo de dato esperado: "undefined"

Un punto importante a recordar es que Javascript hace conversión automática de los tipos, a partir de un valor asignado, pero existen formas para asignar tipos de forma implicita, esto lo logramos usando clases como:

Number, con esta clase conseguimos transformar un valor numérico en un tipo de dato explicito Number, cuando el valor no es un número válido será retornado el valor especial NaN.

Ejemplo de uso:

 let numeroExplicito = Number('234');

String, a partir de la declaración de esta clase, el valor pasado por argumento será definido como tipo string forma explicita.

Ejemplo de uso:

let cadenaExplicita = String(123);

Boolean, usando esta clase podemos definir un valor como tipo de dato lógico, recordando que al hacer conversión automática, el valor 0 se toma como false y cualquier otro valor se toma como true.

Ejemplo de uso: 

let valorLogicoExplicito = Boolean(0);//tomará el valor false

Gestión de variables en Javascript

Anteriormente revisamos que tipos de datos podemos manejar en Javascript, de forma tal que los datos que manejemos en nuestros programas serán clasificados dentro de alguno de esos tipos, ahora bien estos datos, cómo son manejados?, de que forma serán almacenados?

Los lenguajes de programación en general, usan la memoria del computador como pequeñas cajas, en donde cada caja corresponde a un dato (que tiene su tipo), ese espacio o caja en la memoria se denomina variable. A través de las variables podemos mantener, crear, actualizar y borrar los datos en la memoria y es lo que va a permitir que podamos desarrollar programas genéricos, preparados para distintos escenarios y valores.

En Javascript las variables se manejan haciendo de tres palabras reservadas: var, const y let. Cada una de ellas tiene particularidades

Hablemos de var

La palabra reservada var permite definir una variable (o espacio de memoria) que va a estar disponible en todo el sistema, a partir del punto que sea definida y esta variable es posible cambiarla en cualquier momento, veamos un ejemplo:

var nombre = 'Diego';

function primeraFuncion() {
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);

//Llamadas a las funciones
primeraFuncion();
segundaFuncion();

En el ejemplo anterior, la variable nombre está disponible en todo el programa, porque está declarada al inicio del programa.

Si ejecutamos el código vamos a obtener el siguiente resultado:

La variable nombre está disponible en el cuerpo principal del programa. Nombre:Diego
La variable nombre esta disponible en la primera funcion. Nombre:Diego
La variable nombre esta disponible en la segunda funcion. Nombre:Diego

Ahora si cambiamos la declaración de la variable, y la colocamos dentro de primeraFuncion y ejecutamos nuestro código, vamos a obtener un error.

function primeraFuncion() {
    var nombre = 'Diego';
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    //Error porque la variable nombre no está disponible en este ámbito o alcance  
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

//Error porque la variable nombre no está disponible en este ámbito o alcance
console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);
primeraFuncion();
segundaFuncion();

¿Por qué sucede ese error? Sucede por el alcance de la variable, cuando declaramos la variable dentro de primeraFuncion su alcance es sólo dentro de esa función, al intentar llamarla fuera de esa función, la variable no existe, por ello el error.

Veamos ahora cuál es el comportamiento de una variable declarada con var en cuanto a modificar su valor: cuando se declara de esta forma, es posible modificar su valor sin problema, esto puede ser bueno pero a la vez puede generarnos problemas si no estamos conscientes de su alcance, veamos el primer código pero ahora modificando el valor de la variable en algunas de las funciones:

var nombre = 'Diego';

function primeraFuncion() {
    nombre = 'Leonardo';
    console.log('La variable nombre esta disponible en la primera funcion. Nombre:' + nombre);
}

function segundaFuncion() {
    console.log('La variable nombre esta disponible en la segunda funcion. Nombre:' + nombre);
}

console.log('La variable nombre está disponible en el cuerpo principal del programa. Nombre:' + nombre);
primeraFuncion();
segundaFuncion();

El resultado de la ejecución del código anterior es:

La variable nombre está disponible en el cuerpo principal del programa. Nombre:Diego
La variable nombre esta disponible en la primera funcion. Nombre:Leonardo
La variable nombre esta disponible en la segunda funcion. Nombre:Leonardo

Observamos como la variable fue modificada en la primera función, y de allí en adelante la variable ya queda con ese valor, si en la segunda función eso no era lo esperado, se puede producir un comportamiento no esperado, sin generar errores de ejecución.

Hablemos de let

Con la palabra reservada let también podemos declarar variables en nuestras aplicaciones Javascript. Si en nuestro ejemplo inicial cambiamos por var por let, no vamos a obtener ninguna diferencia, pues el alcance de la variable es global. Ahora donde se comporta let de manera diferente? Cuando definimos variables dentro de bloques (recordando que un bloque puede ser el código dentro de un condicional ifo dentro del estructura de repetición whileo for) el comportamiento va a ser diferente. Veamos el siguiente ejemplo:

function mostrandoDiffVarYLet(nombre) {
    //Alcance de la función  
    if (nombre == 'Diego') {
        //Alcance del bloque.    
        var profesion = 'Escritor';
        let apellido = 'Castillo';
        console.log('Dentro del bloque. Profesión:' + profesion);
        console.log('Dentro del bloque. Apellido:' + apellido);
    }
    console.log('Fuera del bloque. Profesión:' + profesion); //En esta línea va a generarse un error  
    //porque apellido fue declarado dentro del alcance del bloque  
    console.log('Fuera del bloque. Apellido:' + apellido);
}
mostrandoDiffVarYLet('Diego');

En la ejecución del código anterior, al intentar usar la variable apellido fuera del bloque condicional, se genera un error. De esta forma vemos que la variable declara con var se mantiene disponible durante el ámbito o alcance de la función, mientras que la variable declara con let se mantiene solo dentro del alcance del bloque.

Nosotros podemos usar let en lugar de var en ese ejemplo, simplemente movemos la declaración al alcance de la función y la variable profesion se va a comportar como queremos y sólo haciendo uso de la palabra let .

En cuanto a modificar o no el valor de una variable declarada con let , cambia con respecto a declararla con var ? No cambia, es posible modificar su valor siempre y cuando esté dentro del ámbito o alcance. Veamos el ejemplo ahora ajustado, usando let para todas las variable y actualizando su valor.

function mostrandoDiffVarYLet(nombre) {
    //Alcance de la función  
    let profesion = 'Escritor';
    if (nombre == 'Diego') {
        //Alcance del bloque.    
        let apellido = 'Castillo';
        console.log('Dentro del bloque. Profesión:' + profesion);
        console.log('Dentro del bloque. Apellido:' + apellido);
    }
    //Actualizamos su valor  
    profesion = 'Corredor de F1';
    console.log('Fuera del bloque. Profesión:' + profesion);
    //En esta línea va a generarse un error.  
    //porque apellido fue declarado dentro del alcance del bloque.  
    //La dejamos comentada  
    //console.log('Fuera del bloque. Apellido:'+apellido);
}
mostrandoDiffVarYLet('Diego');

Al ejecutar el código anterior, obtenemos lo siguiente:

Dentro del bloque. Profesión:Escritor
Dentro del bloque. Apellido:Castillo
Fuera del bloque. Profesión:Corredor de F1

Hablemos de const

Cuando usamos la palabra reservada const le indicamos a Javascript dos cosas:

  1. Nuestra variable es para usarse dentro del ámbito o alcance del bloque, es decir se comporta como let
  2. Nuestro valor se define al declarar la variable y no se cambia en ningún otro punto del sistema. Si se intenta cambiar vamos a obtener un error.

Veamos esto con un ejemplo:

function mostrandoDiffVarYLetYConst(nombre) {  
    //Alcance de la función  
    if (nombre == 'Diego') {    
        //Alcance del bloque.    
        var profesion = 'Escritor';    
        let apellido = 'Castillo';    
        const edad = 13;    
        console.log('Dentro del bloque. Profesión:'+profesion);    
        console.log('Dentro del bloque. Apellido:'+apellido);    
        console.log('Dentro del bloque. Edad:'+edad);    
        //Esta línea va a generar un error   
         //No es posible cambiar el valor    
         edad = 14;  
    }  
    profesion = 'Corredor de F1';  
    console.log('Fuera del bloque. Profesión:'+profesion);  
    //En estas líneas se va a generar errores.  
    //porque apellido y edad fueron declarados dentro del alcance del bloque  
    console.log('Fuera del bloque. Apellido:'+apellido);  
    console.log('Fuera del bloque. Edad:'+edad);
}

mostrandoDiffVarYLetYConst('Diego');

Observando el código anterior, vemos que al intentar modificar el valor de edad se genera un error, porque declaramos, le dijimos a Javascript que esa variable en memoria debe permanecer con su valor inicial, al intentarse cambiar, Javascript sigue lo definido, protege la variable y marca un error.

Luego observamos que tanto const como let, su ámbito o alcance es de bloque, es decir, son validas dentro de una función, o dentro de un condicional o dentro de un bloque de repetición, de acuerdo a como sean declarados.

Para el caso de const, existen un conjunto de variables que denominamos estructuradas, que posible que cambiemos su "valor", dejo entre comillas esto, porque en realidad, sigue el comportamiento anteriormente descrito, pero vamos a tener la sensación que es posible cambiar su valor, cuando la realidad es que estas variables se manejan por referencia, es decir su valor corresponde a su posición o referencia en la memoria, la cual al ser const sigue siendo constante, lo que sucede es que por ser estructurados vamos a acceder de forma diferente, veamos esto en detalle, revisanod Arreglos y Objetos en Javascript

Manejo de arreglos en Javascript


Los arreglos o arrays, son estructuras que nos permiten manipular de forma eficientes datos que por su naturaleza son repetibles, es decir que se pueden agrupar y se manipulados como una variable única. Ejemplo de ello: los nombres de productos, las notas de un alumno, las ciudades de un país. Imaginemos que sea necesario crear una variable para almacenar por ejemplo las ciudades de un país, sería una gestión ineficiente y que muy posiblemente nos llevaría a errores.

Es por ello que los lenguajes de programación implementan esta estructura de datos llamada arrays, y Javascript no es la excepción.

Veamos como declarar un arreglo y sus operaciones básicas:

Declaración de un arreglo o array

En Javascript podemos declarar una variable de tipo array, de las siguientes formas:

Declaración a partir del constructor de la clase

//Declara un arreglo vacio
const arreglo = new Array();

//Declara un arreglo con elemento iniciales
const arreglo1 = new Array('Elemento 1','Elemento 2');

//Declara un arreglo con un tamaño definido pero sin elementos definidos
const arreglo2 = new Array(2);

Declaración en notación literal

//Declara un arreglo vacio
const arreglo = [];

//Declara un arreglo con elemento iniciales
const arreglo1 = ['Elemento 1','Elemento 2'];

Los arreglos pueden almacenar datos de distintos tipos: primitivos y estructurados. Esto significa que podemos tener arreglos de números, cadenas de caracteres, datos lógicos, así como arreglos de objetos y arreglos dentro de arreglos, esto es super interesante y poderoso.

En buena práctica mantener los arreglos con tipos de datos similares, pero es importante saber que Javascript acepta arreglos con diferentes tipos de datos, por lo que un arreglo como el que sigue sería totalmente válido:

const arregloMultiple = [3, 5, 9, 'Hola', true];

Sólo que mi recomendación es evitar este tipo de arreglos, para mantener buenas prácticas y un código mejor estructurado.

Métodos de arreglos

Uno de los puntos de más interesante de la gestión de arreglos, es su dinamismo en cuanto a los datos, es decir nosotros podemos: agregar, actualizar y borrar elementos a un arreglo de forma fácil.

Como accedemos o actualizamos un arreglo?

Lo hacemos a través de su posición, porque cada uno de los elementos de un arreglo posee una posición o indice única, comenzando desde la posición 0, por lo que el primer elemento de un arreglo siempre estará en esta posición.

const arreglo = ['Primer elemento', 'Segundo elemento'];

//Para mostrar el primer elemento ejecutamos:
console.log(arreglo[0]);

Agregando elementos:

A un arreglo podemos agregarle elementos en su inicio o en su final, para ello nos aprovechamos de 2 métodos que Javascript nos provee:

  • push(), nos permite agregar elementos al final de un arreglo.
const arreglo = ['Primer elemento', 'Segundo elemento'];

//Agregando al final
arreglo.push('Tercer elemento');

//El arreglo ahora será: ['Primer elemento', 'Segundo elemento','Tercer elemento'];
  • unshift(), nos permite agregar elementos al inicio de un arreglo
const arreglo = ['Primer elemento', 'Segundo elemento'];

//Agregando al final
arreglo.unshift('Elemento antes del primero');

//El arreglo ahora será: ['Elemento antes del primero','Primer elemento', 'Segundo elemento'];

Eliminando elementos:

Podemos eliminar elementos tanto al inicio como al final, para ello usamos los siguientes métodos:

  • pop() nos permite borrar o extraer elementos del final del arreglo, el elemento extraido lo podemos pasar a una variable si fuese necesario.
const arreglo = ['Primer elemento', 'Segundo elemento','Tercer elemento'];

//Extrayendo del final
const elemento = arreglo.pop();

//El arreglo ahora será: ['Primer elemento', 'Segundo elemento'];
  • shift() nos permite borrar o extraer elementos del inicio del arreglo, al igual que el caso anterior, el elemento extraido lo podemos pasar a una variable.
const arreglo = ['Primer elemento', 'Segundo elemento'];

//Extrayendo del inicio
const elemento = arreglo.shift();

//El arreglo ahora será: ['Segundo elemento'];

Actualizando el valor de un elemento

Para ello lo que definimos es un nuevo valor en la posición del elemento que deseamos actualizar, veamos un ejemplo:

const arreglo = ['Primer elemento', 'Segundo elemento'];

arreglo[1] = 'Segundo elemento actualizado';

Otros métodos de uso regular de los arreglos:

Existe una cantidad interesante de métodos, que es importante conocer, de igual forma te dejo acá el link a la documentación de la MDN con todos los métodos disponibles.

Veamos los métodos que en particular más uso cuando trabajo con arreglos:

  • filter(), nos permite obtener un nuevo arreglo filtrado, es decir, aplicamos una condición y será creado un nuevo arreglo con sólo aquellos elementos que cumplan la condición indicada, filter no modifica el arreglo original. Importante tener esto en cuenta.
const arreglo = [1, 3, 5, 7, 9, 11];

//Queremos solo los elementos menores a 6

const arregloFiltrado = arreglo.filter((e) => e < 6);
//arregloFiltrado será: [1, 3, 5]

  • findIndex(), nos retorna la posición del primer elemento que cumpla la condición indicada. Es útil cuando conocemos el valor pero necesitamos la posición, para realizar algún proceso.
const arreglo = ['Primer elemento', 'Segundo elemento','Tercer elemento'];

//Obteniendo la posición del elemento
const posicion = arreglo.findIndex((e) => e === 'Segundo elemento');
//Posición tendrá el valor 1, que es la posición del elemento buscado
  • slice(), permite que obtegamos un pedazo (slice) o subarreglo de un arreglo, interesante e importante cuando deseamos realizar algún proceso sobre sólo un parte del arreglo.
const arreglo = ['1 elemento', '2 elemento','3 elemento','4 elemento'];

//Extrayendo un pedazo
const subArreglo = arreglo.slice(1,2);

//De esta forma subArreglo será: ['2 elemento','3 elemento']
//Podemos también solo indicar el inicio y obtendremos el resto del arreglo
const subArreglo2 = arreglo.slice(2);
//De esta forma subArreglo2 será: ['3 elemento','4 elemento'];
  • include(), permite determinar si un elemento del arreglo corresponde con el parámetro pasado, de esta forma podemos evaluar si dentro del array existe este valor.
const arreglo = ['1 elemento', '2 elemento','3 elemento','4 elemento'];

//Verificamos si el valor existe, esto no va a retornar true o false
const existeValor = arreglo.includes('1 eleme1nto');

//Mostramos el valor de la verificación
console.log(existeValor);

Además de estos métodos, existen una cantidad bien importante de otros métodos que nos permiten realizar múltiples operaciones sobre los arrays, puedes consultar este enlace de la MDN, con la explicación de cada uno de ellos.

Funciones en Javascript

Cuando hablamos de funciones, nos viene a la mente aquel concepto matemático, donde a partir de una entrada obtenemos un resultado procesado.

En programación el concepto de función tiene cierta similitud, en cuanto a que tenemos una entrada (parámetros) y obtenemos un resultado (retorno de la función), adicionalmente tenemos que decir que una función es un bloque código, que podemos ejecutar tantas veces necesitemos, de tal forma que hablamos de reutilización de recursos.

Qué es una función en Javascript

Con la premisa anteriormente indicada, hablemos ahora de funciones en Javascript, las cuales serán bloques de código que recibiran parámetros y retornaran un resultado. Así es, tan simple como ello, ahora vemos un ejemplo de código:

function nombreDeLaFuncion(parametro1, parametro2) {
  // Código que realiza una tarea
  return resultado;
}

Esa es la anatomía de una función, lleva un nombre (puede que a veces no 😎), recibe un conjunto de parámetros, que buscan generalizar o cubrir la mayor cantidad de comportamientos de acuerdo al proceso a implementar y al final retorna un resultado, el cual pudiera ser simplemente un return sin ningun resultado.

Que tan complejo puede ser el cuerpo de la función?

Desarrollemos siempre de forma tal que sea simple el cuerpo, si este es complejo se puede dividir en otras funciones que serán llamadas o invocadas desde una función principal.

De lo anterior, debemos diferenciar 2 momentos en la vida de una función:

  • Declaración: es cuando definimos su código: parámetros, cuerpo y resultado.
  • Ejecución, llamada o invocación: se refiere al caso en que dentro de nuestro código en otro punto, colocamos su nombre y le pedimos al interprete de Javascript que realice la ejecución de su código.
//Declaración o definición
function nombreDeLaFuncion(parametro1, parametro2) {
  // Código que realiza una tarea
  return resultado;
}

//Ejecución
nombreDeLaFuncion(valor1, valor2);

Cuál es la importancia de las funciones?

Cuando desarrollamos, en general debemos buscar ser óptimos, es decir que podamos delegar el trabajo al computador, es allí donde las funciones cobran importancia, por ser ese bloque de código que podemos llamar n veces con diferentes argumentos y la función ejecutará el proceso retornando ese resultado.

Para organizar el código siempre es importante aplicar el concepto de: divide y venceras, las funciones nos permite organizar el código de tal forma que podamos delegar a ella una tarea, en caso de ser necesario algún ajuste o mantenimiento, el cambio será realizado sólo en el cuerpo de la función.

La escalabilidad, al tener organizado nuestro código, es posible hacer crecer las caracteristicas de nuestra aplicación, será menos complicado y más factible poder extender las funcionalidades, por ello usar funciones es fundamental, no sólo en Javascript, la realidad es que se deb usar este concepto en general en el desarrollo de software.

Retornos de las funciones

Un aspecto bien interesante de las funciones, es que además de realizar un proceso, son capaces de retornar un resultado, este resultado puede ser tan simple como: verdadero, un número, una cadena de caracteres o pudiese ser tan complejo como un arreglo o lista, un objeto, una lista de objetos e incluso una función (Las llamadas funciones de orden superior).

Al ser tan flexible la gestión de funciones, se hace un recurso super interesante de aprender y de usar en nuestros desarrollos de forma constante.

Como declaramos una función en Javascript?

Existen múltiples formas declarar funciones y cada una tiene sus particularidades, veamos cuales son:

Declaración de función

Es la forma más simple y tradicional de declarar o definir una función, su anatomía sigue a continuación:

function <nombreFuncion> (<parametro1>,<parametro2>,...) {
  ...Bloque de código

  return <resultado>;
}

Expresión de función

En Javascript tenemos la particularidad de que podemos tratar las funciones como una variable cualquiera, entonces tomando esta afirmación, veamos como podemos expresar una función:

//Observa que se declara similar a una variable
const <nombreFuncion> = function(<parametro1>,<parametro2>,...) {
  return <resultado>;
}

Función de flecha o arrow function

Similar al caso anterior, una función de flecha se declara como una expresión de función, pero con la particularidad de no tener que usar la palabra reservada function, además de tener un par de características adicionales:

  • Si es posible realizar el proceso en una sola línea, no es necesario usar { } ni la palabra reservada return.
  • No tiene contexto de variables
//Es similar a una expresión de función
const <nombreFuncion> = (<parametro1>,<parametro2>,...) => {
  ...
  return <resultado>;
}

Arrow function en una línea

//Es similar a una expresión de función
const <nombreFuncion> = (<parametro1>,<parametro2>,...) => <resultado>;

IIFE (Immediately Invoked Function Expression)

Son funciones que no tienen nombre (anónimas) y que se ejecutan al momento de declararse, a diferencia de las anteriores, que separan los procesos de declaración y de ejecución. Su sintaxis sigue la siguiente anatomía:

( function () {
    let texto = 'Esta es una función de tipo IIFE';
    return `Función con resultado: ${texto}`
})()

Function constructor

Otra particularidad que Javascript nos ofrece es tener un tipo de dato para identificar las funciones, el tipo Function como lo vimos en el texto de Tipos de Datos de Javascript.

Ahora bien, cómo declaramos una función siguendo esta sintaxis?, veamos:

const <nombreFuncion> = new Function('parametro1', 'parametro2', ... , 
   'return <Codigo de la funcion>'
);

Es importante destacar en este tipo de declaración, que tanto los parámetros (los que sean necesarios) y el código de la función se pasan como cadena de caracteres (encerrados entre comillas) y es la clase Function la que a partir de esos datos construye y devuelve una variable de tipo Function

Ahora que sabemos como declarar funciones, usemos la forma más útil en cada caso según nuestras necesidades!

En Javascript también podemos hacer gestión de otro tipo de datos super interesante que es el objeto, mapa o diccionario, veamos un poco sobre el.

Objetos, mapas o diccionarios.

Como tipo de dato estructurado, un objeto, mapa o diccionario, sigue la siguiente anatomía o estructura:

const objeto = {
	//Propiedades, de la forma nombre: valor
}

Con lo anterior, podemos inferir que un objeto se compone de diferentes propiedades, cada una con su valor específico, siendo estas propiedades de cualquier de los tipos de datos definimos (y revisados al inicio del documento) en Javascript, veamos entonces un ejemplo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true
}

Observa que en la definición anterior, usamos tipos de datos como: cadenas, números y lógicos o booleanos, en este caso nuestro objeto representa a una persona, por lo que la flexibilidad que permite este tipo de dato, es enorme.

Ahora veamos un ejemplo más complejo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true,
    hijo: {
        nombre: 'Diego',
        edad: 15,
        hobbies: ['Artes marciales','Fútbol','Lectura']
    }
}

En este ejemplo asociamos un objeto dentro de un objeto, de forma tal que se pueden crear relaciones a lo interno de la definición, dejando la gestión de datos de una forma super eficiente y aún más fléxible. Incluso percibe que agregamos una propiedad de tipo arreglo de cadena de caracteres.

Y será que podemos hacerlo aún más complejo, veamos este otro ejemplo:

const persona = {
    nombre: 'Leonardo',
    edad: 39,
    profesion: 'Desarrollador de software',
    casado: true,
    familia: [
        {
            nombre: 'Diego',
            edad: 15,
            hobbies: ['Artes marciales','Fútbol','Lectura'],
            parentesco: 'hijo'
        },
        {
            nombre: 'Isveli',
            edad: 34,
            peliculasFavoritas: ['Una esposa de mentira','Harry Potter'],
            parentesco: 'esposa'
        },
        {
            nombre: 'Julia',
            edad: 64,
            profesion: 'Docente'
        }
    ]   
}

Observa que ahora tenemos una propiedad de tipo arreglo de objetos 🤪

Con los objetos podemos gestionar los datos de forma eficiente, flexible y poderosa, es por excelencia el tipo de dato usado, en conjunto con los arreglos para la gestión de datos en nuestras aplicaciones.

Formas de acceder a las propiedades de un objeto

Cuando estamos en código, podemos hacer uso de las propiedades de la siguiente forma:

//Tomando el ejemplo anterior, acceder a la propiedad nombre
console.log(persona.nombre);

Ahora bien que pasa si por alguna razón tenemos una propiedad con espacios, ejemplo de una declaración de ese tipo:

const persona = {
    nombre: 'Leonardo',
    'direccion de la persona': 'Planeta tierra',
    edad: 39
}

Tomando la primera definición de acceso a las propiedades, nos encontrariamos con un  problema ya que esto no es válido:

//No es válido
console.log(persona.direccion de la persona);

Entonces como resolvemos?, Javascript tiene para todo una solución :), veamos como se debe acceder entonces a este tipo de propiedad:

//Válido
console.log(persona['direccion de la persona']);

Lo cual también es valido si usamos el primer ejemplo:

//Válido
console.log(persona.['nombre']);

Métodos para manejar objetos en Javascript

Existen un par métodos que son muy usados cuando trabajamos con objetos, para acceder a sus propiedades y sus valores, estos son:

  • Object.keys(objeto), pasandole a este método un objeto, el nos devuelve un arreglo con cada una de las propiedades definidas para el objeto. Tomando el último ejemplo, la ejecución de este método nos retorna lo siguiente:
console.log(Object.keys(persona));
// [ "nombre", "direccion de la persona", "edad", "profesion", "casado", "familia" ]
  • Object.values(objeto), en este caso el método funciona similar al anterior, pero retornando los valores de cada propiedad. Incluso, mostrando los arreglos como valores. Siguiendo el mismo ejemplo:
console.log(Object.values(persona));
//La salida será:
/*
[ "Leonardo", "Planeta tierra", 39, "Desarrollador de software", true, [
    {
      nombre: "Diego",
      edad: 15,
      hobbies: [ "Artes marciales", "Fútbol", "Lectura" ],
      parentesco: "hijo",
    }, {
      nombre: "Isveli",
      edad: 34,
      peliculasFavoritas: [ "Una esposa de mentira", "Harry Potter" ],
      parentesco: "esposa",
    }, {
      nombre: "Julia",
      edad: 64,
      profesion: "Docente",
    }
  ] ]
  */

Como agregamos, actualizamos o removemos propiedades de un objeto?

  • Para agregar una propiedad a un objeto basta con definirla, de acuerdo a los visto anteriormente:
const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';
  • Para actualizar, seguimos la línea del ejemplo anterior, es simplemente atribuir un nuevo valor a la propiedad:
const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';
//Actualizamos las propiedades
persona.nombre = 'Sirius Black';
persona.genero = 'Gato Siames';
  • Para eliminar o remover una propiedad hacemos uso del método delete
const persona = {
	nombre: 'Sirius'
};

//Agregamos una nueva propiedad
persona.genero = 'Gato';
//Removemos la propiedad
delete persona.genero;

console.log(persona.genero); //Resultado undefined

Javascript es muy versatil, como vimos al inicio, da para usar en web, backend, desarrollo móvil y hasta desarrollo desktop, así que a colocar las manos en el código que Javascript tiene muchos desafíos interesantes.