Funciones en Node.js y Javascript. Más detalles

Funciones en Node.js y Javascript. Más detalles

“Funciones en node.js y Javascript. Más detalles”, es la segunda parte de lo más importante de las funciones en node.js y Javascript. El tema de funciones es muy importante, y también muy extenso. Aprenderás sobre el prototipo de una función, el comportamiento de la referencia a this, propiedad especial prototype, elevado de funciones y sus beneficios, variable adicional arguments y métodos útiles como call y apply. Y como extra muy importante, si llegas al final, las mejores recomendaciones de comunicación a través del código.

El prototipo de una función en Node.js y Javascript

En la primera parte de Funciones en Node.js y Javascript. Pudimos entender que las funciones son objetos, y el porqué las funciones son objetos. Una función tiene un prototipo, si no sabes que es un prototipo en Javascript, esto explica en esta publicación.

Las funciones tienen como prototipo a Function.prototype. Aunque a diferencia de los objetos literales no se ven tan clara la relación, podemos ejecutar la siguiente prueba.

function saludar() {
  return 'Hola';
}
saludar.__proto__ = Function.prototype; // true

El prototipo de Function.prototype es Object.prototype. Con esta última sentencia comprobamos lo que hemos dicho de los objetos en Javascript, tienen como objeto base a Object.prototype.

saludar.__proto__.proto === Object.prototype; // true;

Aquí el diagrama.

Cadena de prototipos de una función
Cadena de prototipos de una función

Tipos de invocaciones y referencia this

Las funciones en Node.js y Javascript se comportan de manera extraña al ser invocadas. Este comportamiento cambia según la forma en como se invoque e influye en como se trata la referencia this. En las siguientes cuatro secciones se explican estos tipos de invocaciones.

Invocación de funciones en Node.js y Javascript como método

Cuando una función se asigna a una propiedad de un objeto entonces decimos que es un método. Y cuando un método es invocado se puede hacer referencia al objeto al que pertenece a través de la palabra reservada this.

Como vimos en el tema de objetos, se puede acceder a una propiedad a través de corchetes, así ['nombreDePropiedad'].

const jaime = {
  nombre: 'Jaime',
  saludar: function() {
    return `Hola soy ${this.nombre}`;
  }
};
jaime.saludar(); // 'Hola soy Jaime'
jaime['saludar'](); // 'Hola soy Jaime'

Invocación de funciones en Node.js y Javascript como función

Cuando una función se invoca de esta manera y quiere hacer referencia a this, este debería obtener null o undefined, pero en lugar de eso, hace referencia al objeto global del ambiente donde se está ejecutando el código, en el caso del navegador web hace referencia a window. En el caso de node.js es el objeto global.

function saludar() {
  return this;
}
saludar(); // En el navegador es window y en node.js es global

Dentro del navegador web, es algo como lo siguiente.

Window {
  alert: ƒ alert()
  console: console {},
  fetch: ƒ fetch(),
  isNaN: ƒ isNaN(),
  clearInterval: ƒ clearInterval(),
  clearTimeout: ƒ clearTimeout(),
  setInterval: ƒ setInterval(),
  setTimeout: ƒ setTimeout()
  ...
}

Por otro lado en node.js es algo como esto.

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: [Getter/Setter],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
  ...
}

Ahora, si una función interna hace referencia a this.

function saludar() {
  function saludarInternamente() {
  	return this;
  }
  return saludarInternamente();
}
saludar(); // En el navegador web es window, en Node.js es global

Esta función interna sigue haciendo referencia al objeto window o global. Y lamentablemente este mismo comportamiento sucede aun si la función saludar es el método de un objeto.

const jaime = {
  nombre: 'Jaime',
  saludar: function() {
    function saludarInternamente() {
      return this;
    }
    return saludarInternamente();
  }
};
jaime.saludar();  // En el navegador web es window, en Node.js es global

Cuando el objeto se crea a través de una clase, la referencia a this es undefined, esto es una mejora, sin embargo, ¿Tendría más sentido que si hiciera referencia al objeto en cuestión? Yo opino que si, pero ese ejemplo vamos a guardarlo para cuando toquemos las clases.

Invocación de funciones en Node.js y Javascript como constructor

Javascript es un lenguaje de programación orientado a objetos basado en prototipos. Originalmente no usa clases, pero intenta simular una sintaxis basada en clases. Estamos hablando del operador new.

Las funciones constructoras son funciones que se invocan con el operador new para crear nuevos objetos. Como el ejemplo de abajo.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}
const jaime = new Persona('Jaime', 33);

Esta forma de crear objetos con una función constructora permite que la referencia a this esté correctamente enlazada al nuevo objeto. Lo podemos comprobar cuando ejecutamos las siguientes líneas.

jaime.nombre; // 'Jaime'
jaime.edad; // 33

Propiedad especial prototype

Existe una propiedad especial llamada prototype en las funciones, esta no es la misma propiedad oculta que enlaza a Function.prototype.

Esta propiedad especial prototype permite usar a una función constructora para simular la herencia clásica. Así cuando se crea un nuevo objeto usando la función constructora, este nuevo objeto pueda usar las propiedades de prototype. Esto propiedad básicamente funciona igual que las propiedades Object.prototype, Function.prototype, Array.prototype, y demás prototipos de objetos en Javascript. Con la diferencia, que nosotros agregamos el contenido manualmente a prototype. A continuación un ejemplo.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}
Persona.prototype.saludar = function () {
  return `Hola soy ${this.nombre} y tengo ${this.edad} años`;
};
Cadena de prototipos de una función y propiedad especial prototype
Cadena de prototipos de una función y propiedad especial prototype

Y con este ejemplo comprobamos que la función saludar invocada desde el objeto jaime, efectivamente tiene la referencia a this enlazada correctamente. Y puede acceder al nombre y edad del nuevo objeto jaime.

const jaime = new Persona('Jaime', 33);
jaime.saludar(); // Hola soy Jaime y tengo 33 años

Visualmente es como el siguiente diagrama.

Cadena de prototipos de un objeto creado con una función constructora
Cadena de prototipos de un objeto creado con una función constructora

Por último te preguntarás, ¿Por qué no agregamos los métodos dentro de la función constructora Persona? Muy parecido a lo que hicimos cuando vimos el tema de closure.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
  this.saludar = function () {
    return `Hola soy ${this.nombre} y tengo ${this.edad} años`;
  };
}
const jaime = new Persona('Jaime', 33);
jaime.saludar(); // Hola soy Jaime y tengo 33 años

Pues la respuesta es que también se puede hacer, pero la desventaja es que estaríamos creando nuevas funciones cada vez que creamos una instancia de Persona. Con el uso de la propiedad prototype no se crean nuevas funciones, solo se hacen referencia a ellas, es decir, cada nuevo objeto debe ir a buscar en sus prototipos a la función saludar.

Nota importante sobre las funciones constructoras

Las funciones constructoras siempre empiezan con una letra mayúscula, no porque la sintaxis del lenguaje lo necesite, sino para que los programadores identifiquen a una función constructora de una que no lo es y se use adecuadamente el operador new.

Invocación de funciones en Node.js y Javascript con apply y call

Como ya hemos hecho mucho hincapié, las funciones en Node.js y Javascript son objetos. Por lo tanto una función también tiene métodos. Los métodos del prototipo Function.prototype.apply y Function.prototype.call, permiten definir explícitamente la referencia a this al ejecutarse el cuerpo de la función.

Invocación con Function.prototype.apply

const jaime = {
  nombre: 'Jaime',
  saludar: function(saludo) {
    return `${saludo}, soy ${this.nombre}`;
  }
};
jaime.saludar('Hola'); // Hola, soy Jaime
jaime.saludar.apply({ nombre: 'Pepito' }, ['Buenos días']); // Buenos días, soy Pepito

El método apply recibe como primer parámetro el objeto al que se va a enlazar la función y podrá hacer referencia usando this y como segundo parámetro un arreglo de valores que son los parámetros de la función. En este caso la función saludar solo recibe una cadena de caracteres a través del parámetro saludo. Es por eso que solo necesita un arreglo con un solo elemento.

Aquí un ejemplo con una función de dos parámetros.

function sumar(a, b) {
  return a + b;
}
sumar.apply(null, [1, 2]); // 3

En este ejemplo el primer parámetro del método apply es null porque la función no se enlaza a un objeto y no necesita usar la referencia this.

Invocación con Function.prototype.call

Este método es una simplificación del método apply, igualmente recibe dos parámetros, el objeto al cual se hará referencia con this y los argumentos de la función que va a invocar. La única diferencia es que en lugar de recibir un array de parámetros para la función que se va a invocar, recibe cualquier número de parámetros separados con comas. A continuación un ejemplo.

function sumar(a, b) {
  return a + b;
}
sumar.call(null, 1, 2); // 3

Parámetro extra arguments de las funciones en Node.js y javascript

Cuando una función es invocada, adicional a la lista de parámetros, tiene acceso a un parámetro llamado argument. Este parámetro extra contiene la lista de todos los parámetros pasados en la invocación de una función.

function saludar(complemento) {
  return arguments;
}
saludar('Hola');
/*
Arguments [
  0: "Hola",
  callee: ƒ saludar(saludo),
  length: 1,
  Symbol(Symbol.iterator): ƒ values(),
  [[Prototype]]: Object
]
*/

arguments es un objeto muy parecido a un Array, pero no lo es. En el ejemplo anterior vemos que su prototipo es Object.prototype y para ser un Array debería ser Array.prototype.

Debido a lo anterior, arguments no tiene todos los métodos útiles de un Array. Por ejemplo, que tal si queremos recorrer la lista de todos los parámetros, en un arreglo se podría usar el método Array.prototype.forEach, pero eso no es posible.

Una forma de mitigar este inconveniente es convertir el objeto arguments a un arreglo, usando el método Array.from. Y entonces si usar los métodos de Array.prototype que necesites. Ejemplo.

function saludar(complemento) {
  const args = Array.from(arguments);
  args.forEach(actual => console.log(actual));
}
saludar('Hola', 'Soy Jaime', 'Tengo 33 años');
/*
Hola
Soy Jaime
Tengo 33 años
*/

Aunque la función saludar solo recibe un parámetro, aun así todos los parámetros que se pasen en la invocación, se guardan en arguments.

Elevado de funciones en Node.js y JavaScript

El elevado se refiere a que la creación de función sube hasta el inicio del ámbito en donde se encuentre. Solo la declaración normal de función puede ser elevada. Ejemplo.

function saludar(complemento) {
  return agregarComplemento(complemento);
  function agregarComplemento(complemento) {
    return `Hola, ${complemento}`;
  }
}
saludar('soy Jaime'); // 'Hola, soy Jaime'

Como podemos ver la función agregarComplemento se puede utilizar antes de su definición, esto es porque javascript antes de ejecutar el código, crea la función al inicio del ámbito local donde se encuentra, el código anterior se traduce antes de ser ejecutado a lo siguiente.

function saludar(complemento) {
  function agregarComplemento(complemento) {
    return `Hola, ${complemento}`;
  }
  return agregarComplemento(complemento);
}
saludar('soy Jaime'); // 'Hola, soy Jaime'

Las funciones en forma de expresión y funciones flecha no cuentan con este elevado de funciones, así que es importante definirlas antes de ser usadas.

Beneficio del elevado de funciones

Este comportamiento parece confuso, pero cuando estás programando con funciones es muy útil. Cuando se programa se tiene funciones principales y funciones secundarias. Para la persona que lee nuestro código muy a menudo es suficiente con visualizar las funciones principales para entender el código, no tiene que perder el tiempo en ver los detalles de las funciones secundarias. Imaginate un archivo con cien líneas de código y compara encontrar las funciones principales en las líneas de inicio contra encontrar las funciones principales al final.

Veamos un ejemplo. Aquí al lector solo le interesa a alto nivel lo que renderiza renderVista.

function renderVista() {
  renderHeader();
  renderMain();
  renderFooter();
}
function renderHeader() {
  renderMenu();
  renderBanner();
  renderSearchForm()
  // ....
}
  function renderMenu() {
    // ...
  }
  function renderBanner()  {
    // ...
  }
  function renderSearchForm()  {
    // ...
  }
function renderMain() {
  renderContent();
  renderAside();
  // ...
}
  function renderContent() {
    // ...
  }
  function renderAside() {
    // ...
  }
  function renderFooter()  {
    // ...
  }

Es facil, ¿Verdad?, solo leemos la primera función e ignoramos el resto del código.

¿Pero qué pasa cuando ahora la función principal se encuentra al final? Ejemplo.

function renderMenu() {
  // ...
}
function renderBanner()  {
  // ...
}
function renderSearchForm()  {
  // ...
}
function renderHeader() {
  renderMenu();
  renderBanner();
  renderSearchForm()
  // ....
}
function renderMain() {
  renderContent();
  renderAside();
  // ...
}
function renderContent() {
  // ...
}
function renderAside() {
  // ...
}
function renderFooter()  {
  // ...
}
function renderVista() {
  renderHeader();
  renderMain();
  renderFooter();
}

Además de ir hasta el final para encontrar la función principal que nos interesa usar, se pierde el sentido de este archivo. O al menos tardamos más en entender el objetivo de este archivo, el cual es renderizar la vista.

Por último, si quisieras, puedes hacer que todo viva dentro de una sola función, utilizando funciones anidadas. Haciendo más claro la relación entre las funciones. Como el siguiente ejemplo.

function renderVista() {
  renderHeader();
  renderMain();
  renderFooter();
  function renderHeader() {
    renderMenu();
    renderBanner();
    renderSearchForm()
    // ....
      function renderMenu() {
      	// ...
      }
      function renderBanner()  {
        // ...
      }
      function renderSearchForm()  {
        // ...
      }
  }
  function renderMain() {
    renderContent();
    renderAside();
    // ...
      function renderContent() {
          // ...
      }
      function renderAside() {
        // ...
      }
  }
  function renderFooter()  {
    // ...
  }
}

¿Las funciones son referencia o valor?

Como ya vimos en la publicación sobre objetos, dado que la función es un objeto, entonces una función siempre será una referencia.

Diferencias importantes entre funciones flecha y tradicionales

Las funciones flechas tienen ciertas limitaciones si las comparamos con las funciones tradicionales, aunque hay que decir que si tu código está enfocado a la programación funcional, este tipo de funciones son muy convenientes.

Sus limitaciones en comparacion con las funciones tradicionales son:

  • No tienen el enlace correcto a this y no puede usar super().
    • Debido al punto anterior no funciona bien con los métodos call, apply y bind.
    • No pude usarse como método de un objeto.
  • No tiene la propiedad especial prototype.
    • Consecuencia del punto anterior no es posible usar una función flecha como función constructora.
  • No tiene acceso a parámetro extra arguments.

Veremos estas limitaciones en una futura publicación sobre las funciones flecha.

Comunicación con funciones en node.js y Javascript

Como ya lo hemos mencionado en otras publicaciones, el código es una forma de comunicación entre lo que creamos ahora con nuestro yo del futuro y nuestro equipo. Sabemos que la programación es una actividad social de mucha comunicación y ser eficientes en esta comunicación ahorra tiempo y dinero a programadores y no programadores.

Recordemos que las funciones son las unidades más pequeñas de organización de código. Además sin las funciones, ¿Cómo definiríamos el comportamiento de objetos y de funciones más grandes? Las funciones nos sirven para:

  • Organizar el código
  • Reusar código
  • Se usa para la composición de objetos, agregando comportamientos.
  • Se usa para la composición de funciones más complicadas

Teniendo en cuenta lo anterior, he aquí algunas recomendaciones a la hora de crear funciones.

Un muy, muy buen nombre

En esta publicación encontrarás las recomendaciones de nombres.

Lo más simple que se pueda

Una función debe ser lo más simple posible, y para eso debe tener una meta pequeña y específica, lo que conlleva a no complicar las cosas y hacer una cosa a la vez, paso a pasito, algo sencillo y bien hecho.

Cuando se resuelve un problema complicado, la forma recomendada de solucionarlo es como si imaginaras que eres un bebe, y tu problema es que no puedes correr. ¿Suena complicado no crees? Probablemente pudiste correr bien sin caerte alrededor de los tres años. Sin darte cuenta dividiste un problema grande en partes más pequeñas. Para llegar a correr, primero aprendiste a gatear, luego a caminar y finalmente intentaste correr con muchas caídas en el camino. Y si dividimos aún más estas tres fases encontraremos objetivos aún más pequeños, ejemplo, dar el primer paso. Así son las funciones, solucionan el problema pedacito por pedacito.

Siguiendo el enfoque anterior, una función simple es la que cumple con lo siguiente.

  • Se enfoca en resolver una sola cosa sencilla pero bien hecha.
  • Tendrá pocas líneas de código
  • Cuando mucho una o dos condiciones if o un switch
  • Cuando mucho uno o dos ciclos for, while, do while, etc.
  • Muy poquita indentación debido a los tres puntos anteriores
  • Por mucho tres parámetros, un humano solo puede recordar cuatro cosas a la vez, hagámosle la vida más fácil a nuestro compañero. Si de verdad necesitas muchos parámetros, puedes utilizar un objeto literal como único parámetro, así al menos no tenemos que recordar el orden en que deben de ir.
  • Todos los puntos anteriores lograrán que la función sea muy fácil de leer y comunicar.

En una futura publicación haremos una aplicación pequeña donde aplicaremos estas recomendaciones

Conclusiones

El tema de funciones es muy grande, aún nos faltan temas por ver. Como nos seguimos dando cuenta, las funciones son una pieza fundamental en Javascript y en el desarrollo de software en general. Según donde se invoque una función, podrá enlazarse al objeto this correcto. El elevado de funciones es beneficioso para la comunicación de las intenciones de nuestras funciones.

No olvidemos que las funciones son objetos. Las recomendaciones expuestas reflejan el principio ágil de simplicidad. Manteniendo las cosas simples, somos más productivos. En el caso de nuestro código, aumentamos el poder de flexibilidad y mantenimiento del mismo a través de una comunicación clara y código fácil de comprender.

Funciones en Node.js y JavaScript. Lo realmente importante

Funciones en Node.js y JavaScript. Lo realmente importante

Al igual que Objetos en Node.js y Javascript. Lo realmente importante. “Funciones en Node.js y JavaScript. Lo realmente importante” se refiere a los principios detrás de las funciones, lo que es realmente importante para continuar aprendiendo, mejorar el entendimiento de funciones en programación, Node.js y en Javascript.

Antes de hablar de funciones en Node.js y JavaScript, vale la pena recordar o definir lo que es una función en programación.

¿Qué son las funciones?

Las funciones son un elemento muy importante en cualquier lenguaje de programación. Sabemos que la programación funcional se inventó incluso antes de cualquier lenguaje de programación basándose en el cálculo lambda de Alonzo Church.

Sintaxis calculo lambda, programación funcional
Sintaxis calculo lambda, programación funcional. Imagen tomada de https://www.slideshare.net/FASTPresentations/introduction-to-lambda-calculus-using-smalltalk-by-facundo-javier-gelatti

En los primeros lenguajes de programación se usaban subrutinas, procedimientos y funciones. Las subrutinas, procedimientos y funciones tienen en común que agrupan un conjunto de operaciones con la finalidad de reutilizarlas muchas veces y solo escribirlas una vez.

Las funciones, a diferencia de los procedimientos y subrutinas, aún se usan en los lenguajes de programación modernos, y son la unida más pequeña de organización de código. Se usan para definir el comportamiento de los objetos, componiéndolos de funcionalidades específicas. Recordemos de otra publicación que los objetos son un grupo de funcionalidades y que contribuyen a la comunicación con otros objetos.

Sin las funciones, un objeto no serviría de mucho. Las funciones definen el comportamiento de objetos. Y también forma funciones más grandes. En conclusión, las funciones nos sirven para.

  • Organizar el código
  • Reusar código
  • Se usa para la composición de objetos, agregando comportamientos.
  • Se usa para la composición de funciones más complicadas

¿Qué son las funciones en Node.js y JavaScript?

En Node.js y JavaScript, y de hecho en cualquier ambiente donde se ejecute JavaScript, las funciones son todo lo descrito en la sección anterior. Y además son objetos.

  • Al ser objetos, pueden tratarse como cualquier otro valor:
    • Pueden ser asignadas a variables y propiedades de otros objetos
    • Crearlas dinámicamente durante la ejecución del código JavaScript
    • Tener sus propiedades y métodos
    • Ser parámetros para otra función
    • Ser el valor de retorno de una función
  • Adicionalmente el cuerpo de una función proporciona ámbito local a las variables y parámetros

Aunque no es el tema de esta publicación, todas las características listadas hacen que JavaScript pueda usarse como un lenguaje de programación funcional.

¿Cómo crear funciones en Node.js y JavaScript?

Las tres formas recomendadas para crear funciones son las siguientes.

  • Declaración normal
  • Función como expresión
  • Funciones flechas

Declaración de función

Este es el método más común, muy similar en otros lenguajes de programación. Se usa la palabra reservada function, seguida del nombre de la función, luego una lista de argumentos entre paréntesis, los cuales se separan por comas. Esta lista de argumentos es opcional.

Por último el cuerpo de la función usando llaves { }. El cuerpo de la función contiene las sentencias que necesites.

function nombre(argumento1, argumento2, ...argumentoN) {
  // sentencias
}

Ejemplo concreto:

function sumar(a, b) {
  return a + b;
}
sumar(1, 2); // 3

Para ejecutar el código de la función es necesario invocarla. La invocación se hace con un par de paréntesis y dentro los argumentos necesarios, separados por comas. Así como el ejemplo anterior.

Una función siempre regresa algún valor, incluso si no se define explícitamente. Si no defines lo que retorna una función, por defecto el valor de retorno será undefined.

function sumarSinReturn(a, b) {
  const resultado = a + b;
}
sumarSinReturn(1, 2); // undefined

Si ejecutamos la función, nos regresa undefined porque no le indicamos explícitamente que regrese algún valor

Función en forma de expresión

Esta forma de crear funciones es mucho más flexible, su definición puede aparecer donde sea que se pueda definir una expresión. Eso le da la habilidad de ser asignada a una variable o a una propiedad de un objeto.

Su sintaxis es igual que la declaración de una función que vimos anteriormente, pero al ser asignada a una variable o propiedad, su nombre es opcional.

function [nombreOpcional](argumento1, argumento2, ...argumentoN) {
  // sentencias
}

A continuación vamos a ver algunos ejemplos.

// Sin nombre, tambie  conocida como funcion anonima
const sumar = function(a, b) {
 return a + b;
};
// Con nombre
const sumar = function sumar(a, b) {
  return a + b;
};
const calculadora = {
  sumar: function(a, b) {
    return a + b;
  }
};
const persona = {
  // como propiedad de un objeto
  comer: function() {
    return 'Comiendo...';
  }
};

Funciones flecha

Las funciones flecha es la forma más nueva de crear funciones, mucho más parecido a las funciones matemáticas del álgebra. Se sienten muy convenientes porque su sintaxis es mucho más reducida. Son una alternativa a las funciones en forma de expresión, es más rápido escribirlas. Sin embargo tiene muchas limitantes en comparación a las otras dos formas de crear funciones. Aunque si las usas para programación funcional son bastante efectivas.

Para ser honesto a mí me parece que si su uso no es enfocado a la programación funcional, sí que le agrega más complejidad al uso de funciones en JavaScript, de por sí las funciones en Node.js y Javascript pueden ser muy diferentes en comparación con otros lenguajes.

Pero bueno, veamos su sintaxis.

argumento => expresión;
// Com mas de un arguento es necesario parentesis
(argumento1, argumentN) => expresión;
// Con varias lineas de sentencias, es necesario las llaves {}
argumento => {
 // sentencias
};
// Con mas de un argumento y con varias lineas se sentencias
(argumento1, argumentoN) => {
  // sentencias
};
// Sin argumentos es necesario los parentesis
() => expresión

Cuando se usan expresiones, no es necesario definir explícitamente el return. El resultado de la expresión es el valor de retorno.

const calcularCuadrado = a => a * a;
const sumar = (a, b) => a + b;
const saludar = () => 'Hola';
// invocaciones
calcularCuadrado(5); // 25
sumar(1, 2); // 3
saludar(); // 'Hola'

Cuando queremos que el cuerpo de la función tenga varias líneas de sentencias, se usan llaves. Además si queremos que la función regrese algún valor, entonces explícitamente usamos la sintaxis del return.

Ejemplos.

const calcularCuadrado = a => {
  const result = a * a;
  return result;
};
const sumar = (a, b) = > {
  const result = a + b;
  return result;
};
// invocaciones
calcularCuadrado(5); // 25
sumar(1, 2); // 3

Funciones anidadas o internas

Una función se puede definir dentro de otra función, es decir, dinámicamente podemos crear funciones internas dentro de otra función principal e invocarlas.

function saludar() {
  function saludarInterna() {
    return 'Hola';
  }
  const saludo = saludarInterna();
  console.log(saludo);
}
saludar(); // 'Hola'

En la siguiente sección veremos otras funciones anidadas.

Ámbito local de funciones

Las funciones en Node.js y JavaScript proporcionan un ámbito de valores, local al cuerpo de la función, es decir, lo que está definido en el cuerpo de la función solo puede ser referenciado dentro de la misma.

function abuelo() {
  const nombre = 'Jaime';
  const apellido = 'Cervantes'
  function padre() {
    const apellido = 'Buendía';
    function hijo() {
      const apellido = 'Pérez';
      const nombreCompleto = `${nombre} ${apellido}`;
      console.log(nombreCompleto); // Jaime Pérez
    }
    hijo();
    const nombreCompleto = `${nombre} ${apellido}`;
    console.log(nombreCompleto); // Jaime Buendía
  }
  padre();
  const nombreCompleto = `${nombre} ${apellido}`;
  console.log(nombreCompleto); // Jaime Cervantes
}
abuelo();

Las funciones internas pueden acceder a las variables de su función padre (por nombrarlas de alguna manera). En el ejemplo anterior se puede notar que la función hijo puede hacer referencia a la constante nombre de la función abuelo. Esto nos produce Jaime Pérez. En la siguiente sección lo explicamos mejor

Closures o cierres

El anidado de funciones permite que las funciones hijas tengan su propio ámbito local, oculto de las funciones padres. Al mismo tiempo estas funciones internas tienen acceso a los valores definidos en las funciones padres. Este encapsulamiento de información y al mismo tiempo acceso a información externa, se le llama closure o cierre.

Continuemos con el ejemplo de la sección anterior, las funciones abuelo, padre e hijo

function abuelo() {
  const nombre = 'Jaime';
  const apellido = 'Cervantes'
  function padre() {
    const apellido = 'Buendía';
    function hijo() {
      const apellido = 'Pérez';
      const nombreCompleto = `${nombre} ${apellido}`;
      console.log(nombreCompleto); // Jaime Pérez
    }
    hijo();
    const nombreCompleto = `${nombre} ${apellido}`;
    console.log(nombreCompleto); // Jaime Buendía
  }
  padre();
  const nombreCompleto = `${nombre} ${apellido}`;
  console.log(nombreCompleto); // Jaime Cervantes
}
abuelo();

El resultado de la invocación de la función abuelo es:

Jaime Pérez --> Desde función hijo
Jaime Buendía --> Desde función padre
Jaime Cervantes --> Desde funcion abuelo

Entre más interna la función, más alcance a todos los ámbitos de las demás funciones “externas padres” tiene. Como la imagen de abajo, es como si los ámbitos de las funciones abuelo y padre estuvieran dentro del ámbito de la función hijo.

Closure, ámbito de funciones en js
Closure, ámbito de funciones en js

Siempre una función tomará el valor de la variable que este más cerca de su propio ámbito local. Las variables dentro de su propio ámbito local son las de mayor relevancia. Esto permite que los nombres de variables y constantes no colisionen entre ámbitos anidados.

La función hijo, tiene acceso a las constantes nombre y apellido de la función abuelo. También tiene acceso a la constante apellido de la función padre. Pero la constante apellido dentro de la propia función hijo está más cerca que lo definido en padre y abuelo, tiene mayor relevancia. Entonces el nombre completo que se imprime en la consola es Jaime Pérez en lugar de Jaime Buendía o Jaime Cervantes.

La función padre si tiene acceso a las constantes nombre y apellido de la función abuelo. En su propio ámbito tiene una constante apellido igual a Buendía. Al estar más cerca este valor, no toma el apellido de la función abuelo que está más lejos. Por eso en la consola el nombre completo que se imprime es Jaime Buendía. Luego la función padre NO tiene acceso a la constante apellido de la función hijo.

Finalmente se imprime en la consola Jaime Cervantes Velasco porque las constantes nombre y apellido están definidas en el propio ámbito local de la función abuelo. La función abuelo NO tiene acceso a las constantes apellido de sus funciones internas padre e hijo.

POO surgio de funciones

Ya que vimos un poco de las funciones anidadas y closures, podemos hablar de como se descubrió la programación orientada a objetos. Esto refleja la importancia de las funciones en los lenguajes de programación.

Ole Johan Dahl y Kristen Nygaard se dieron cuenta de que la pila de llamadas de las funciones en ALGOL, podía ser movida a un Heap. Esto permite que las variables declaradas por una función puedan existir incluso después de que la función termine su ejecución y retorne algún valor.

De esta manera la función se convirtió en el constructor de la clase, las variables locales en propiedades de la instancia de clase y las funciones internas en sus métodos. Y así en 1966 la programación orientada a objetos fue descubierta.

Este comportamiento lo podemos implementar usando funciones en Node.js y JavaScript y aprovechando su habilidad de crear closures.

function crearPersona(nombre, apellido) {
  function saludar() {
    return `Hola soy ${nombre}...`;
  }
  function comer() {
    return 'Comiendo...';
  }
  function getNombre() {
    return `${nombre} ${apellido}`;
  }
  const instancia = {};
  instancia.saludar = saludar;
  instancia.comer = comer;
  instancia.getNombre = getNombre;
  return instancia
}
const jaime = crearPersona('Jaime', 'Cervantes');
jaime.comer(); // Comiendo...
jaime.saludar(); // Hola soy Jaime
jaime.getNombre(); // Jaime Cervantes

Los parámetros nombre y apellido, están dentro del ámbito local de la función crearPersona, así que funcionan igual que variables dentro del cuerpo de la función. Las funciones internas continúan teniendo acceso a esos parámetros incluso después de que la función padre regrese su valor, un objeto literal que es la instancia de una persona.

Luego cuando la instancia jaime invoca a su método getNombre, esta propiedad hace referencia a la función interna getNombre de la función crearPersona. Debido al closure de la función interna getNombre, tenemos acceso a los parámetros nombre y apellido incluso mucho después de que la función padre crearPersona haya regresado su valor.

Nombres de funciones en Node.js y Javascript

Tenemos que estar conscientes de que la programación y el desarrollo de software es una actividad social, de mucha comunicación. Y entre más eficiente sea esta comunicación, mayor es el éxito del software. Esto nos permite ahorrar el tiempo y el recurso económico de todos los involucrados. Estoy hablando de programadores y no programadores, inversionistas, clientes y usuarios.

Una de las formas de comunicación entre compañeros programadores y muchas veces uno mismo en el futuro, es a través de un código fácil de comprender, y para contribuir a esta fácil comprensión debemos de escoger con mucho cuidado el nombre de nuestras funciones.

Toma en cuenta las siguientes recomendaciones. Pero teniendo en mente que solo son ejemplos, y a la hora de escribir tus funciones reales y con el contexto adecuado, muy probable puedas idear mejores nombres de funciones a los aquí mostrados.

Dedica el tiempo suficiente para nombrar tu función.

Igual de importante que nombrar las variables, así las funciones. Las funciones son las unidades más pequeñas que nos permiten definir comportamientos en aplicaciones. El tiempo invertido en nombrar tus funciones es mucho menor que el tiempo que tienes que invertir tu mismo en el futuro y tus compañeros al tratar de descifrar lo que una función realmente hace. Es como organizar tu cuarto, entre más ordenado, más rápido encontraras las cosas que necesitas, más rápido te cambiaras, o más rápido encontraras tus calcetines, etcétera.

El nombre debe ser muy semántico, describir su objetivo

El nombre de una función debe describir con la mayor claridad posible lo que hace. Es importante que sea un verbo porque una función siempre realiza una o más operaciones enfocadas a una tarea en concreto.

Por ejemplo, si una funcion regresa el nombre completo de una persona ¿Cual de los siguientes nombres encaja mejor?

fullName()
getName();
getFullName()

El nombre que describe mejor el objetivo de la función es getFullName.

Si la función regresa un booleano, el nombre de la función debe indicar que el resultado puede ser true o false. Tal cual el resultado de una condición lógica. Es como hacer una pregunta cuyas posibles respuestas solo pueden ser si o no.

hasChildren(person) {
  return Boolean(person.childre.length);
}
if (hasChildren(currentPerson)) {
  // Haz algo
}

Si hasChildren fuera un método, quedaría de la siguiente forma.

if (currentPerson.hasChildren()) {
  // Haz algo
}

Te das cuenta como la condición se lee como una frase muy entendible. Si currentPerson tiene hijos, entonces...haz algo.

Evitar suposiciones erróneas

Si el nombre describe cosas que en realidad no hace, entonces debemos de renombrar esa función. Por ejemplo, si una función forma el nombre completo de un cliente y regresa ese nombre. ¿Qué función evita mejor las suposiciones erróneas?

function setClientName() {} // Se entiende que el nombre del cliente va a ser modificado
function getFullClientName() {} // Aquí esta claro que solo consigue el nomnbre completo del cliente

setClienteName nos indica que el nombre del cliente será modificado, es un mal nombre. Entonces el nombre que mejor evita las suposiciones erróneas es getFullClientName. No dice que forma el nombre, pero sí que va a regresar un nombre completo, para fines prácticos no nos interesa saber como forma ese nombre completo, solo que no los regrese.

Acuerdos con los programadores

Es muy importante establecer acuerdos para el nombramiento de las funciones. En los ejemplos anteriores he estado utilizando el prefijo get que indica que mando a obtener algo. Pero sería confuso que algunos programadores utilizaran la palabra fetch y otros la palabra retrieve, y otros collect o bring.

Usa el contexto adecuado

Es importante que se entienda el contexto de la función, en anteriores ejemplos utilizamos la funcion getFullClientName, pero dependiendo del contexto de la aplicación, pudiera ser mejor getFullUserName o getFullEmployeeName.

Aunque estos nombres tiene que ver con el contexto del negocio o problema, también hay términos técnicos que los programadores ya están muy acostumbrados y no se deben mezclar con el dominio del problema.

Por ejemplo, el patrón de diseño observador contiene métodos como update, subscribe, publish, notify. Si estamos trabajando con la aplicación de una revista que usa notificaciones nativas del celular, sms, y realiza publicaciones periódicas. Esto también puede crear confusiones, así que se deben de nombrar las funciones con mucho cuidado de tal manera que se distingan entre funciones o métodos del patrón de diseño y las otras relacionadas con el negocio.

El alcance de la función ayuda a la longitud del nombre

El nombre de las funciones pude ser largo o corto dependiendo del alcance que tiene en el software. Por ejemplo, una función que se usa mucho en diferentes archivos, vale la pena que su nombre se a corto. Porque si muchas personas lo utilizan, es importante que sea fácil de escribir y pronunciar.

Por otro lado, si es una función que solo se utiliza en un archivo, su nombre puede ser largo, este tipo de funciones normalmente las utilizan internamente las otras funciones con nombre corto. Entonces las funciones de nombres largos son una forma de explicar lo que hace la función de nombre corto. Esto no quiere decir que no pueda ser corta, pero si necesitas más palabras para describir mejor la función, adelante.

Como ejemplo imaginemos una función que regresa el total de tus ganancias a la fecha actual de todo tu portafolio de inversiones. Donde las ganancias son la suma de los intereses de tus inversiones más las contribuciones que has hecho a la fecha.

// funcion corta, reutilizable en otros archivos o aplicaciones
function getEarnings() {
  return calculateEarnings();
}
// funciones con nombre más largo que describen a la funcion corta
function calculateEarnings() {
 const earnings = calculateCurrentTotalInterest();
 const aditionals = calculateCurrentTotalAdditionalContributions();
  return earnings + aditionals;
}
function calculateCurrentTotalInterest() {}
function calculateCurrentAdditionalContributions() {}

No te preocupes tanto por estos ejemplos, el objetivo es que tengas una idea. En una futura publicación haremos una pequeña aplicación donde veremos como aplicar estas recomendaciones.

Conclusiones

Las funciones en Node.js y Javascript es un tema bastante amplio, es una de las cosas mejor hechas en JavaScript que revelan la potencia del lenguaje. Se nota que Javascript está influenciado por LISP y Scheme.

Así mismo no olvidemos de nombrar correctamente nuestras funciones, ellas son las unidades más pequeñas que permiten organizar el software en comportamientos bien definidos.

La programación funcional es el primer paradigma de programación inventado, de ahí la importancia de las funciones, porque es un paradigma del cual la programación orientada a objetos tomó bases.

No olvidemos que las funciones en Node.js y JavaScript son objetos y por lo tanto pueden tratarse como cualquier valor.

Aún nos faltan varios temas importantes sobre las funciones. Estos son abordados en esta publicación. Cualquier duda, no dudes en escribirla en los comentarios, ¡Estaremos contentos de ayudarte!.

Si quieres, como ejercicio, puedes traducir todos los ejemplos a funciones en forma de expresión y funciones flechas. ¡Diviértete!

Objetos en Node.js y Javascript. Lo realmente importante

Objetos en Node.js y Javascript. Lo realmente importante

Introducción

Objetos en Node.js y Javascript. Lo realmente importante” se refiere a los principios detrás de los objetos, lo que es realmente importante para continuar aprendiendo, mejorar el entendimiento de objetos en programación y en Node.js y Javascript.

Empecemos con el entendimiento de lo que es un objeto en programación.

¿Qué son los objetos en programación?

Se ha dicho mucho que la programación orientada a objetos representa el mundo real. La verdad es que la programación en general trata de representar el mundo real en algo digital. Así que la programación orientada a objetos también trata de representar digitalmente el mundo real, solo que con un poco más de énfasis en el uso de objetos. Pero como hemos establecido en esta publicación, lo importante NO son los objetos, lo importante es:

El paso de mensajes para la comunicación entre objetos

En programación un objeto es una forma digital de agrupar funcionalidades y que algunas de ellas pueden ser análogas a las de un objeto en la vida real, pero que es mucho más limitado y no se debe esperar que sean iguales, porque solo es una representación digital.

Cuando desarrollas software, y necesitas agregar una funcionalidad, modificar o arreglar un error, tu pensamiento lógico está basado en la representación de objetos digitales, sus relaciones y comunicaciones con otras entidades digitales. Nunca se debe pensar que como el objeto real se comporta de cierta manera, su representación también. Es de mucha ayuda conceptualmente, pero en la implementación muy a menudo son diferentes.

Recordemos lo que nos dice Alan Kay:

Lamento que hace tiempo haya acuñado el término Objetos para la programación porque hizo que las personas se enfocaran en la parte menos importante. La gran idea es «Envío de mensajes«

Alan Kay

También un objeto sirve para almacenar datos útiles que otros objetos pueden utilizar. Entonces un objeto nos sirve para:

  • Crear comunicaciones entre representaciones digitales de objetos.
  • Permite agrupar funcionalidades relacionadas con la representación digital del objeto.
  • Almacena datos que otro objeto puede usar. (Funciona como algunas estructuras de datos).

¿Qué son los objetos en Node.js y JavaScript?

Los objetos en Node.js y Javascript, son una colección de pares nombre: valor, parecido a los «arrays asociativos» de PHP. Estos pares de nombre/valor se les llama propiedades, una propiedad es como una variable y puede contener cualquier tipo de valor.

La clave del párrafo anterior es que puede contener cualquier tipo de valor, incluyendo funciones. Y con esto se identifican dos tipos de objetos.

  1. Objetos con funcionalidades y comunicaciones
    1. Que en su mayor parte tienen métodos para comunicarse con otros objetos y resolver problemas.
  2. Objetos con datos. También llamado estructura de datos
    1. Que en su mayor parte contiene datos y que nos sirven para almacenar y enviar información a través de mensajes. Estos objetos son utilizados por los objetos con funcionalidades y comunicaciones.

Recordemos que todo lo relacionado con objetos también funciona en cualquier lugar donde se ejecute JavaScript, node.js incluido.

¿Cómo crear objetos en Node.js y Javascript?

La forma más sencilla de crear un objeto es a través de un objeto literal. Un objeto literal es aquel que se crea con llaves {}, agregando sus propiedades y métodos. Como el siguiente ejemplo.

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  }
};
jaime.getNombre(); // Jaime Cervantes Velasco

Tenemos un objeto con cinco propiedades, nombre, apellidoPaterno y apellidoMaterno son de tipo string, edad es de tipo number y la última propiedad, getNombre() es de tipo function. Aquí tienes más información sobre los tipos de datos.

Aunque más adelante veremos a detalle las funciones, de momento, podemos decir que las funciones nos permiten encapsular y ejecutar un conjunto de operaciones que hacemos muy a menudo. En lugar de repetir el código de estas operaciones muchas veces, mejor ponemos estas operaciones dentro de una función.

Cada vez que necesitemos ejecutar estas operaciones, simplemente ejecutamos la función, a esta ejecución de la función se le llama invocación. Ejemplo de invocación es en la última línea, donde utilizamos paréntesis, jaime.getNombre();.

¿Cómo obtengo el valor de una propiedad?

Para obtener alguna propiedad de un objeto, podemos hacer de dos maneras:

  • Notación de puntos
  • Usando corchetes, muy parecido a como se acceden a los datos de un Array

La primera forma, notación de puntos, es muy sencilla, ejemplo:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  }
};
jaime.nombre // 'Jaime'
jaime.apellidoPaterno; // 'Cervantes'
jaime.apellidoMaterno; // 'Velasco'
jaime.edad; // 33
jaime.getNombre // function ()  { return 'Jaime Cervantes Velasco'; }

La segunda forma, usando corchetes [], ejemplo:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  }
};
jaime['nombre'] // 'Jaime'
jaime['apellidoPaterno']; // 'Cervantes'
jaime['apellidoMaterno']; // 'Velasco'
jaime['edad']; // 33
jaime['getNombre'] // function ()  { return 'Jaime Cervantes Velasco'; }
jaime['getNombre']() // 'Jaime Cervantes Velasco'

Aquí accedimos a las propiedades con corchetes usando el nombre de las propiedades, la cuales son strings.

Destaca como invocamos a la función getNombre. Estas dos sentencias hacen lo mismo, invocar a la función getNombre:

jaime.getNombre();
jaime['getNombre']();

El nombre de propiedades son cadenas de caracteres

Cuando usamos la notación de corchetes, usamos una cadena de caracteres para obtener el valor. Lo que mencionamos antes sobre que Un objeto es una colección de pares nombre: valor. El nombre de todas las propiedades son cadena de caracteres (string).

Como los nombres de las propiedades son cadenas de caracteres, entonces podemos definir propiedades encerradas por comillas, como el siguiente ejemplo:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  },
  'nueva-propiedad-con-guion-medio': 'Mi propiedad con guión medio encerrada por comillas'
};
jaime['nueva-propiedad-con-guion-medio']; // 'Mi propiedad con guión medio encerrada por comillas'

Y obtenerlos con notación de corchetes así, jaime['nueva-propiedad-con-guion-medio'].

Una propiedad como esta, no puede ser accedida con una notación de puntos, así jaime.nueva-propoiedad-con-guion.medio. Esta sentencia te dará un error en Javascript porque no es nombre de propiedad válido.

De hecho en Javascript el nombre de variables o propiedades válidos deben:

  • Empezar con una letra, incluido $ y _.
  • No puede empezar con números o caracteres usados en el lenguaje para otros propósitos, ejemplo -, %, /, +, &.
  • Después del la letra de inicio puedes ocupar números, otras letras válidas, $ y _.

¿Objetos en Node.js y Javascript que contienen otros objetos?

Un objeto puede contener cualquier tipo de dato, así que puede contener otros objetos. Veamos un ejemplo:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  },
  direccion: {
    calle: 'Melchor Ocampo',
    numero: 2,
    colonia: 'Las Flores',
    municipio: 'Tezonapa',
    estado: 'Veracruz'
  }
};

Aquí agregamos un objeto direccion al objeto jaime. Simplemente usando las llaves para crear objetos literales.

¿Cómo agrego, modifico y elimino propiedades?

Una vez que creas un objeto, puedes agregar más propiedades, modificarlas y eliminarlas.

Agregar propiedades a los objetos en Node.js y Javascript

Se utiliza la asignación para agregar nuevas propiedades que no existen previamente.

const jaime = {
  nombre: 'Jaime',
};
jaime.apellidoPaterno = 'Cervantes';
jaime.appelidoMaterno = 'Velasco';
console.log(jaime ); // { nombre: 'Jaime', apellidoPaterno: 'Cervantes', apellidoMaterno: 'Velasco }

Actualizar propiedades a los objetos en Node.js y Javascript

Se utiliza también la asignación para actualizar el valor de las propiedades que ya existen.

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
};
jaime.apellidoPaterno = 'Perez'
jaime.apellidoMaterno = 'Moreno';
console.log(jaime ); // { nombre: 'Jaime', apellidoPaterno: 'Perez', apellidoMaterno: 'Moreno' }

Eliminar propiedades a los objetos en Node.js y Javascript

Para eliminar propiedades se usa el operador delete. Ejemplo:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
};
delete jaime.apellidoPaterno;
// o tambien así:
delete jaime['apellidoMaterno];
console.log(jaime); // { nombre: 'Jaime' }

Las propiedades apellidoPaterno y apellidoMaterno, ya no existe en el objeto jaime.

¿Objetos en Node.js y Javascript son una referencia o un valor?

Los objetos en Node.js y JavaScript siempre serán una referencia, es decir:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
};
const pedro = jaime;
pedro.nombre = 'Pedro';
jaime.nombre === pedro.nombre; // true;
jaime.nombre; // 'Pedro'
pedro.nombre; // 'Pedro'

Las constantes jaime y pedro hacen referencia al mismo objeto en memoria.

¿Cómo recorro las propiedades de un objeto?

Existen varias formas, la más simple de recorrer las propiedades de un objeto es la siguiente.

Tenemos el objeto jaime:

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  }
};

Lo primero es obtener el nombre de sus propiedades con el método Object.keys, el cual genera un Array con los nombres de las propiedades.

const nombresProps = Object.keys(jaime);
console.log(nombresProps); // ["nombre", "apellidoPaterno", "apellidoMaterno", "edad", "getNombre"]

Ahora recorremos el arreglo nombresProps para obtener los valores.

nombresProps.forEach(nombreProp => {
  console.log(jaime[nombreProp]); // imprime el valor del nombre de propiedad actual
});

El resultado del código anterior es algo como lo siguiente.

'Jaime'
'Cervantes'
'Velasco'
33
function () {
  return 'Jaime Cervantes Velasco';
}

¿El prototipo de un objeto?

Javascript es un lenguaje de programación multi-paradigma, en su lado orientado a objetos, no utiliza clases para la reutilización de código, más bien usa composición de objetos. Pero ¿Cómo hace esta composición de objetos?

Mejor composición de objetos sobre herencia de clases

Mejor composición de objetos sobre herencia de clases

Design Patterns: Elements of Reusable Object-Oriented Software

Este principio es bastante aplicado en Javascript y por consiguiente se aplica de igual manera en Node.js, de hecho así fue construido. Todos los objetos en Javascript tiene un enlace a un prototipo, y puede utilizar todas las propiedades y funciones de su prototipo.

Este enlace de prototipo puede ser referenciado en código, usando la propiedad especial __proto__.

En el caso de los objetos literales, como jaime, son enlazados a Object.prototype, que es el objeto base de todos los objetos en Javascript.

const jaime = {
  nombre: 'Jaime',
  apellidoPaterno: 'Cervantes',
  apellidoMaterno: 'Velasco',
  edad: 33,
  getNombre: function () {
    return 'Jaime Cervantes Velasco';
  }
};
jaime.__proto__; // { constructor: f Object(), hasOwnProperty: f hasOwnProperty, ... }
jaime.__proto__ === Object.prototype; // true
jaime.toString === Object.prototype.toString; // true
jaime.toString(); //[object Object]

Si expandimos los prototipos en un navegador web como chrome, se visualiza de esta manera.

Objeto literal tiene como prototipo a Object.prototype
Objeto literal jaime tiene como prototipo a Object.prototype

Gráficamente, el enlace de prototipos es como la imagen de abajo.

Object.prototype el prototipo de jaime
Object.prototype el prototipo de jaime

El prototipo también lo puedes ver en node.js si lo enlazas a un debugger. Pero no veremos como hacer eso hoy.

¿Qué es la cadena de prototipos?

Hemos creado el objeto jaime literalmente, pero que tal si lo creamos a través de otro objeto persona, haciendo el objeto persona su prototipo inmediato.

const persona = {
  saludar: function () {
    return 'Hola';
  },
  comer: function () {
  	return 'comiendo...';
  }
};
const jaime = Object.create(persona); // Creamos jaime en base al prototipo persona

Si hacemos ahora un console.log(jaime):

console.log(jaime);

Y expandimos el resultado en un navegador web como chrome, el resultado se visualiza de la siguiente forma.

Cadena de prototipo
Cadena de prototipo

En la imagen, podemos ver que [[prototype]] apunta al objeto persona, por lo que jaime tiene acceso a los métodos comer y saludar del objeto persona.

Y si hacemos estas comparaciones vemos que el enlace al prototipo persona existe.

jaime.__proto__; // { saludar: f (), comer: f () }
jaime.__proto__  === persona; // true

Podemos invocar los métodos comer y saludar del objeto persona como si fueran de jaime.

jaime.comer();  // 'Comiendo...'
jaime.saludar(); // 'Hola'

Ahora si expandimos el último [[prototype]] ¿Cuál crees que sea el resultado?

Cadena de prototipos Object.prototype
Cadena de prototipos Object.prototype

Vemos claramente que el último [[prototype]] es Object.prototype, el prototipo base de todos los objetos en Javascript. Y puedes comprobarlo en código comparando Object.prototype con las propiedades especiales __proto__.

jaime.__proto__.__proto__ === Object.prototype; // true

También podemos usar el método toString como si fuera de jaime.

jaime.toString(); // [object Object]

A esto se le llama cadena de prototipos, un objeto puede tener los sub prototipos necesarios para reutilizar sus propiedades y métodos. En este caso fue así, jaime → persona → Object.prototype.

jaime --> persona --> Object.prototype
jaime –> persona –> Object.prototype

Peculiaridades con la cadena de prototipos

Usa los métodos y propiedades de los sub prototipos

El objeto jaime puede utilizar directamente las propiedades y métodos de sus prototipos.

jaime.toString(); // '[object Object]' --> de Object.prototype
jaime.hasOwnProperty('nombre'); // true --> de Object.prototype
jaime.saludar(); // 'Hola' --> de persona
jaime.comer(); // 'Comiendo...' --> de persona
jaime.nombre; // 'Jaime' --> de si mismo, objeto jaime

Actualizar propiedades no afecta a la cadena de prototipos

Cuando tenemos una propiedad que existe en varios sub prototipos, javascript usa el que esté más cerca en la cadena de prototipos. Supongamos que queremos cambiar el comportamiento del método toString en jaime así que en lugar de usar Object.prototype.toString, a jaime le agregamos un método con el mismo nombre.

Se puede decir que lo que estamos haciendo es actualizarlo.

jaime.toString = function () {
  return `${this.nombre} ${this.edad}`;
};
jaime.toString(); // 'Jaime 33'

Ahora se usa el método toString de jaime, no se recorre la cadena de prototipos hasta llegar a Object.prototype.toString como se hizo en los anteriores ejemplos. Por que ya existe un metodo toString directamente en nuestro objeto jaime.

El operador delete no elimina las propiedades de los prototipos

Cuando ocupamos el operador delete, este nunca toca la cadena de prototipos, solo elimina las propiedades propias del objeto en cuestión.

Si en la cadena de prototipos existe una propiedad con el mismo nombre de la que eliminamos, entonces ahora esa propiedad en la cadena de prototipos será utilizada.

Usando el ejemplo anterior, del método toString de jaime, si lo eliminamos con delete, entonces ahora el toString() de Object.prototype es el que se usara porque el objeto persona no tiene ese método directamente.

jaime.toString = function () {
  return `${this.nombre} ${this.edad}`;
};
jaime.toString(); // 'Jaime 33'
delete jaime.toString
jaime.toString(); // '[[object Object]]' --> De Object.prototype

En la última línea notamos que ahora jaime vuelve a usar el toString() de Object.prototype.

Ejemplos de objetos predefinidos en Node.js y Javascript

Como ya hemos mencionado en otras publicaciones, a excepción de los tipos primitivos, todo lo demás en javascript son objetos. En futuras publicaciones veremos más detalle de los objetos de tipo function y Array

¿Cómo crear un objeto function?

function imprimirPersona(persona) {
  console.log(persona.nombre);
  console.log(persona.edad);
}

Como la función imprimirPersona es un objeto, podemos agregarle propiedades sin ningún problema.

imprimirPersona.miPropiedad = 'Mi propiedad de una funcion';
console.log(imprimierPersona.miPropiedad); // 'Mi propiedad de una funcion

Las funciones son muy útiles, tan versátiles que con ellas podemos generar nuevos objetos, pero ese tema no pertenece a esta publicación.

¿Cómo crear un objeto Array?

La forma recomendada es simplemente crearlos usando corchetes [].

const vacio = [];
const numeros = [1, 2, 3, 4, 5, 6];
const animales = ['perro', 'gato', 'caballo'];
const conObjetos = [
  		{
          nombre: 'Jaime',
          edad: 33
        },
        function imprimirPersona(persona) {
          console.log(persona);
        }
	];

Como un array es un objeto, igual que una función, también le puedes agregar propiedades.

const numeros = [1, 2, 3, 4, 5, 6];
numeros.miPropiedad = 'Mi propiedad de un arreglo';
console.log(numeros.miPropiedad); // 'Mi propiedad de un arreglo

El Array es el objeto más claro para usarlo como estructura de datos.

¿Cómo crear un objeto Date?

const fecha = new Date();
console.log(fecha); // Fri May 28 2021 10:46:27 GMT-0500 (hora de verano central)

Como te podrás imaginar, al objeto date también le podemos agregar propiedades porque es un objeto

Conclusión

En Javascript y en cualquier plataforma donde se ejecute, un ejemplo es en node.js, tienen la peculiaridad de siempre tener un enlace a un prototipo. Así es como el lenguaje está diseñado. Ya sé que actualmente existen las clases, pero en realidad estas son funciones que internamente hacen uso de prototipos, también lo explicaremos en otra publicación.

Con excepción de los datos primitivos, todo lo demás en Javascript son objetos, es importante saber como funcionan para no atorarnos en este aprendizaje.

Con esta información tienes lo suficiente para seguir avanzando y utilizar los objetos más sabiamente.

El tema de los objetos es bastante extenso, todavía quedan muchas cosas a tomar en cuenta, pero ya es demasiada información que tenemos que dividirla en más publicaciones. Así que muy pronto continuaremos. Cualquier duda, no dudes en escribirla en los comentarios, ¡Estaremos contentos de ayudarte!.

¿Cómo funciona React con ReactDOM y JSX?

¿Cómo funciona React con ReactDOM y JSX?

En esta publicación veremos como crear un componente, y comprender como se relaciona React con ReactDOM y JSX. Tener buenos fundamentos sobre el funcionamiento de React es muy importante para aprender más rápido esta librería. Además, al entender bien estos fundamentos, es fácil arreglar errores a la hora de crear nuestros componentes y aplicaciones.

Primero utilizaremos solo React para crear un elemento y ReactDOM para pintarlo, luego agregaremos JSX y finalmente veremos como podemos convertir ese elemento en un componente reutilizable.

Para los que no tienen idea que es React, es una librería escrita en JavaScript que facilita la creación de interfaces gráficas de usuario para aplicaciones web y móviles. Esta basada en componentes y composición en lugar de herencia.

Vamos a usar una herramienta en línea llamada condesandbox. Aquí crearemos un nuevo sandbox con la plantilla de HTML 5, tambien se le llama static.

Plantilla sandbox HTML5
Plantilla sandbox HTML5

Luego creamos un archivo api-dom.html y otro react.html, en el body de ambos archivos agregamos un div con el atributo id igual a "raiz-app", en este elemento contenedor vamos a insertar todos los elementos nuevos.

Todo lo referente a API DOM deber estar en el archivo api-dom.html y todo lo referente a React en react.html.

API DOM: Crear un elemento saludo simple

El objetivo es crear un elemento donde saludemos a nuestro usuario a través de un texto. Primero usaremos el API del DOM que se encuentra en todos los navegadores. Esto nos ayudará a comparar y visualizar los beneficios de usar React.

<body>
  <div id="raiz-app"></div>
  <script>
    const saludo = document.createElement('div');
    saludo.textContent = 'Hola, soy un elemento saludo creado con API DOM';
    const raiz = document.getElementById('raiz-app');
    raiz.appendChild(saludo);
  </script>
</body>

Creamos un elemento div y dentro agregamos el texto del saludo. Finalmente agregamos nuestro saludo a nuestro contenedor raiz-app con node.appenChild(node).

Si abres tu archivo api-dom.html usando el navegador web del lado derecho de la interfaz de condesandbox, el resultado debe ser algo así.

Resultado de document.createElement
Resultado de document.createElement

React: crear elemento saludo

Ahora vamos a crear el mismo elemento de la sección anterior con React.

Importar código de la librería

Para empezar a utilizar React es necesario descargar su código, existen varias formas de usar el código de React, por el momento simplemente descargamos la librería usando la etiqueta <script> dentro de la etiqueta <head> de nuestro archivo react.html. De la siguiente manera.

<head>
  <title>React.createElement</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
</head>

Algo muy bueno de React es que separa las responsabilidades, lo que acabamos de agregar, descarga el código necesario para crear elementos y componentes. Para poder pintar esos elementos en nuestra página web, usamos ReactDOM. Pintar elementos en la página web desde luego que debe ser otra responsabilidad.

Para usar ReactDOM.render() necesitamos descargar su código usando de nuevo la etiqueta <script>, igual que hicimos con React.

<head>
  <title>React.createElement</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

Crear saludo con React.createElement() y ReactDOM.render()

Ahora sí, creamos nuestro nuevo elemento usando React.createElement(component, props, ...children)

<body>
  <div id="raiz-app"></div>
  <script>
    const saludo = React.createElement(
      'div',
      null,
      'Hola, soy un elemento saludo creado con React');
	ReactDOM.render(saludo, document.getElementById('raiz-app'));
  </script>
</body>

La primera diferencia con document.createElement(), es que React.createElement() recibe como parámetros adicionales un objeto de propiedades y luego cualquier número de parámetros que se convertirán en elementos hijos.

De momento no le agregamos propiedades, pero si queremos agregar el saludo como un elemento de tipo texto, este elemento de tipo texto será un elemento hijo. Es lo que en API DOM seria node.textContent.

Finalmente pintamos nuestro saludo usando el método ReactDOM.render(). Por el momento digamos que ReactDOM.render() es como el node.appendChild().

Resultado de React.createElement
Resultado de React.createElement

Podemos agregar más elementos hijos simplemente agregando más parámetros, de la siguiente forma:

const saludo = React.createElement(
  'div',
  null,
  'Hola, soy un saludo creado con React',
  ' Y yo soy otro hijo',
  ' Y yo otro hijo más'
);
ReactDOM.render(saludo, document.getElementById('raiz-app'));

El parámetro children es un parámetro rest, el cual puede tomar cualquier número de parámetros e internamente hacer referencia a ellos a través de un array, React sabe como usarlos para pintarlos. En este ejemplo children contiene lo siguiente.

children = [
  'Hola, soy un saludo creado con React',
  ' Y yo soy otro hijo',
  ' Y yo otro hijo más'
];

API DOM: Modificamos el elemento saludo agregando propiedades y estilos

Nuestro elemento hasta ahora es demasiado simple, vamos a agregarle algunos estilos, y para eso vamos a utilizar dos propiedades, className y style.

const saludo = document.createElement('div');
saludo.textContent = 'Hola, soy un elemento saludo creado con API DOM';
saludo.className = "saludo";
saludo.style = 'font-weight:bold; text-transform:uppercase;';
const contenedor = document.getElementById('raiz-app');
contenedor.appendChild(saludo);

La propiedad className no se llama class para evitar conflictos, debido a que class es una palabra reservada en JavaScript usada para definir clases.

Ahora creamos la reglas de estilo para la clase de estilos saludo. Vamos a usar la etiqueta <style> dentro de <head>.

<head>
  <style>
    .saludo {
      background: orange;
      padding: 16px;
    }
  </style>
<head>

La propiedad style también aplica estilos, en este ejemplo pone el texto en negritas lo convierte a mayúsculas. El resultado debe ser algo como la imagen de abajo.

Resultado de document.createElement con estilos y propiedades
Resultado de document.createElement con estilos y propiedades

React: Modificamos el elemento saludo agregando propiedades y estilos

En props podemos agregar las propiedades que necesitemos, en este ejemplo solo agregamos className y style.

const saludo = React.createElement('div', {
    className: 'saludo',
    style: {
      'font-weight': 'bold',
      'text-transform': 'uppercase'
    },
  },
  'Hola, soy un elemento saludo creado con React'
);
const contenedor = document.getElementById('raiz-app'))
ReactDOM.render(saludo, container);

En la propiedad style, los estilos son agregados a través de un objeto en lugar de una cadena de caracteres, esto es más cómodo y legible, ¿Imagínate que fueran muchos estilos?, la supercadena larga que se formaría.

Tampoco no es que se recomiende esta forma de aplicar estilos a tus elementos en React, pero podemos aprovechar esta comodidad por el momento.

Otro beneficio en la propiedad style, es que en las declaraciones de estilos pueden ser escritas en camelCase, de hecho esa es la convención en Javascript y en React. Es más simple escribir en camelCase que estar encerrando todas las propiedades en comillas y con guiones medios entre palabras.

const saludo = React.createElement('div', {
    style: {
      fontWeight: 'bold',
      textTransform: 'uppercase'
    },
  },
  'Hola, soy un elemento saludo creado con React'
});

Si usas la forma, property-name, React te mostrara unos “warnings” en la consola. Estos “warnings” solo saldrán en modo develop, en producción no hay problema. Solo es una convención y no es obligatoria.

Warning: Unsupported style property font-weight. Did you mean fontWeight?
    at div
printWarning @ react-dom.development.js:61

Por último agregamos los estilos CSS que usara la clase saludo.

<head>
  <style>
    .saludo {
      border: 1px solid #eee;
      padding: 10px;
    }
  </style>
<head>

Al final debes tener un resultado como el de la imagen de abajo.

Resultado de React.createElement y definiendo propiedades
Resultado de React.createElement y definiendo propiedades

React: children en props

El contenido de nuestro saludo lo podemos agregar en el objeto props, en la propiedad children, en lugar del último parámetro de la función. children, en este caso funciona como la propiedad textContent del ejemplo usando API DOM.

const saludo = React.createElement('div', {
  className: 'saludo',
  style: {
    fontWeight: 'bold',
    textTransform': 'uppercase'
  },
  children: 'Hola, soy un elemento saludo creado con React'
});
ReactDOM.render(saludo, document.getElementById('raiz-app'));

En un ejemplo anterior comentamos que el tercer parámetro children es un parámetro rest, el cual recibe cualquier número de parámetros los almacena en un Array. Pues la propiedad children también puede recibir un Array de hijos que React puede pintar.

const saludo = React.createElement('div', {
  className: 'saludo',
  style: {
     fontWeight: 'bold',
     textTransform: 'uppercase'
  },
  chidren: [
    'Hola, soy un saludo creado con React',
    ' Y yo soy otro hijo',
    ' Y yo otro hijo más'
  ]
);
const contenedor = document.getElementById('raiz-app');
ReactDOM.render(saludo, contenedor);

A lo mejor te parezca un poco complicado, pero es mucho más sencillo que el ejemplo del API DOM, imagínate que en lugar de texto fueran otros elementos como <h1>, <p>, otros <div>. Tendrías que crear elementos, agregarles el contenido y luego insertarlos dentro del elemento saludo.

Aun con este ejemplo, aunque es más sencillo que usar el API del DOM, se empieza a complicar cuando un elemento tiene muchos elemento hijos, por eso en React se recomienda usar JSX. Lo veremos a continuación.

React con ReactDOM y JSX

Ok, ya vimos como crear un elemento en React, pero ahora vamos a simplificar su implementación, JSX internamente utiliza React.createElement(component, props, ...children), pero estar llamando una función para crear un elemento complica la legibilidad del código.

Que tal si en lugar de escribir la función para crear un elemento, simplemente lo creas como cualquier otro codigo HTML, es mucho mas facil de escribir y leer, veamos la creación del elemento saludo con React y JSX.

const saludo = <div>Hola, soy un elemento saludo creado con React y JSX</div>;
const contenedor = document.getElementById('raiz-app');
ReactDOM.render(saludo, contenedor);

Mucha más fácil, ¿Cierto?, si te das cuenta no encerramos entre comillas el contenido del elemento saludo, JSX es lo suficientemente inteligente para entenderlo, pero para ellos es necesario descargar la herramienta llamada babel.js que lo hace posible.

Babel es una herramienta que no solo se encarga de convertir codigo JSX a invocaciones de React.createElement, sino que también convierte código con las últimas características del estándar ECMAScript a código que los navegadores web puedan entender. Para más información visita su sitio oficial.

Es importante aclarar que JSX internamente sigue siendo código JS, aunque parezca HTML y el uso de sintaxis HTML sea casi idéntica.

Usar babel para convertir JSX a JS

Todo muy bonito, pero para que podamos usar código JSX tenemos que descargar la herramienta.

<head>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

Al principio nuestro código lo insertamos dentro de las etiquetas <script>, pero para que babel pueda identificar que debe convertir codigo JSX a JS, es necesario decirle que es de tipo text/babel con el atributo type.

<script type="text/babel">
  const saludo = <div>Hola, soy un elemento saludo creado con React y JSX</div>;
  const contenedor = document.getElementById('raiz-app');
  ReactDOM.render(saludo, contenedor)
</script>

Ahora vamos agregar las propieades className y style para que tenga los mismos estilos que los ejemplos anteriores.

<script type="text/babel">
  const saludo = (
    <div
	  className="saludo"
	  style={{fontWeight: 'bold', textTransform: 'uppercase'}}
	>
      Hola, soy un elemento saludo creado con React y JSX
    </div>
  );
  const contenedor = document.getElementById('raiz-app');
  ReactDOM.render(saludo, contenedor)
</script>

Cuando se tiene más de una línea de JSX, es recomendado encerrarlo entre paréntesis para mejorar el entendimiento y evitar errores de JavaScript debido a la inserción automática de punto y coma.

Expresiones JS en atributos JSX

Algo interesante es como definimos el valor del atributo styles, usamos un par de llaves {}, todo lo que está encerrado en un par de llaves se ejecuta, por qué JSX lo identifica como una expresión de Javascript. En este caso JSX identifica que estamos definiendo un objeto para ser asignado a la propiedad style.

const saludo = (
  <div
  className="saludo"
  style={{fontWeight: 'bold', textTransform: 'uppercase'}}
  >
    Hola, soy un elemento saludo creado con React y JSX
  </div>
);

También podemos definir el objeto en otra línea y luego usar esa variable para realizar la asignación.

const styles = {fontWeight: 'bold', textTransform: 'uppercase'};
const saludo = (
  <div
  className="saludo"
  style={styles}
  >
    Hola, soy un elemento saludo creado con React y JSX
  </div>
);

El resultado de utilizar React con ReactDOM y JSX debe ser el mismo que en las últimas secciones, algo como la imagen de abajo.

Resultado React con JSX
Resultado React con ReactDOM y JSX

Componente reutilizable de React con ReactDOM y JSX

Ya que comprendemos la relación que tiene React con ReactDOM y JSX, es hora de que nuestro elemento saludo se convierta en un elemento reutilizable para saludar.

En Javascript el concepto de reutilización son las funciones, en React serian los componentes. Algo muy bueno de React, es que podemos hacer un componente usando una función. ¿Qué cosa puede ser más transparente que eso?

function Saludo(props) {
  return (
    <div
      className='Saludo'
      style={props.style}
    >
      {props.children}
    </div>
  );
}

Analizando un poco el código, vemos como la función Saludo, recibe un objeto de propiedades para ser usadas en el componente, recordemos que el contenido de este ejemplo se convierten en invocaciones a React.createElement(component, props, ...children).

En un ejemplo anterior vimos como asignar valores a las propiedades encerrando expresiones con llaves {}, no solo podemos hacer eso con atributos, sino también para pintar los elementos hijos, ejecutando {props.children}.

El código anterior JSX, se convierte en código JS, así:

function Saludo(props) {
  return React.createElement("div", {
    className: "Saludo",
    style: props.style
  }, props.children);
}

Ahora que tenemos un componente función, podemos usarlo de las siguientes formas.

const styles = { fontWeight: 'bold', textTransform: 'uppercase' };
const contenido = (
  <div>
   { Saludo({ children: 'Instancia de Saludo' }) }
   {
     Saludo({
       children: 'Instancia de Saludo en negritas',
       style: { fontWeight: 'bold' }
     })
   }
   <Saludo style={styles}>Instancia de Saludo con etiqueta</Saludo>
  </div>
);
const contenedor = document.getElementById('raiz-app');
ReactDOM.render(contenido, contenedor);

Lo mismo, todo este código se convierte a algo como lo siguiente.

function Saludo(props) {
  return React.createElement("div",
    {
      className: "Saludo",
      style: props.style
    },
    props.children
 );
}
const styles = { fontWeight: 'bold', textTransform: 'uppercase' };
const contenido = React.createElement(
  "div",
  null,
  Saludo({ children: 'Instancia de Saludo' }),
  saludo({
    children: 'Instancia de Saludo en negritas',
    style: {
      fontWeight: 'bold'
    }
  }),
  React.createElement(Saludo, { style: styles }, "Instancia de Saludo con etiqueta")
);
const contenedor = document.getElementById('raiz-app');
ReactDOM.render(contenido, contenedor);

Y el resultado visual es esto.

Resultado de usar un componente reutilizable con React
Resultado de usar un componente reutilizable con React

Date cuenta de que las invocaciones a la función Saludo, así como el uso de la etiqueta Saludo, se convierten en invocaciones a React.createElement(component, props, ...children). Y como el uso del JSX con la etiqueta <Saludo> facilita la lectura y creación del componente. Veamos un ejemplo solo usando etiquetas.

const styles = { fontWeight: 'bold', textTransform: 'uppercase' };
const contenido = (
  <div>
   <Saludo>Instancia de Saludo</Saludo>
   <Saludo style={{ fontWeight: 'bold' }}>Instancia de Saludo en negritas</Saludo>
   <Saludo style={styles}>Instancia de Saludo con etiqueta</Saludo>
  </div>
);
const contenedor = document.getElementById('raiz-app');
ReactDOM.render(contenido, contenedor);

¿Qué tal? Mucho más simple ¿Verdad?

Una última cosa, cuando uses etiquetas de los componentes de React, siempre deben empezar con la primera letra Mayúscula, así es como reconoce JSX que debe invocar a una función con ese nombre. De lo contrario se confundiría con las etiquetas normales de HTML y te lanzará un error como el siguiente.

Warning: The tag <saludo> is unrecognized in this browser. If you want to render a React component, start its name with an uppercase letter

Referencias

https://reactjs.org/

https://babeljs.io/

Instalar multiples versiones de node.js con NVM en macOS, Linux y Windows

Instalar multiples versiones de node.js con NVM en macOS, Linux y Windows

Introducción

Si no sabes que es node y nvm, aquí te explicaré que son, para qué sirven y además como instalar node.js con NVM para tener múltiples versiones y ser más productivo a la hora de crear tus paquetes.

¿Qué es node.js?

Tomando la definición del sitio oficial, Node.js®, node es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema más grande de librerías de código abierto en el mundo.

Vamos a describir la parte que nos interesa, Node.js es un programa, V8 es un motor de javascript de código abierto creado por Google, por lo que también lo hace un programa, V8 está escrito en C++, y la tarea de V8 es tomar código Javascript y convertirlo a código máquina (compilar código), pero lo que lo hace especial para nuestros fines es que puede ser embebido dentro de otros programas, lo que permite que V8 esté embebido en Node.js, V8 por así decirlo es el punto de partida para toda la funcionalidad de Node.js.

Node.js también está escrito en C++ y utiliza la API de V8 para agregarle características y funcionalidades nuevas a Javascript. Estas nuevas funcionalidades permiten tener acceso al sistema de archivos y carpetas, nos permite crear un servidor TCP y http, además de acceso a POSIX, o sea, a toda la funcionalidad del sistema operativo donde se encuentre instalado.

Node.js proporciona la sintaxis Javascript para crear programas que tengan acceso a las características del sistema operativo donde sé está ejecutando.

Cuando instalas node.js viene por default con una herramienta llamada NPM, que es el administrador de paquetes de node, con esta herramienta tú puedes instalar cualquier paquete de JavaScript que necesites.

¿Cómo lo hace? Pues cualquier desarrollador de javascript que siga los lineamientos adecuados puede publicar su librería/paquete, esta publicación genera un registro que internamente utiliza la línea de comandos de NPM para descargar e instalar ese nuevo paquete, además de que actualmente muchísimos paquetes ya registrados que puedes descargar y usar en tus proyectos.

¿Qué es NVM?

Para instalar node.js con NVM en macOS, primero debes tener git instalado para poder correr el comando de instalación de NVM. Ahora bien, ¿Qué es NVM? NVM significa Node Version Manager, y es al administrador de versiones de node, te permite tener múltiples versiones de node en tu computadora, dándote la flexibilidad de cambiar entre versiones y tener tu propio ambiente de trabajo en cada versión.

Puedes tener tú propios paquetes instalados, específicos para diferentes proyectos. Lo que tienes instalado en una versión, no choca con lo que tienes en otra.

Todo esto te da la habilidad de probar diferentes tipos de versiones de tus paquetes. Si estás creando un nuevo paquete y lo quieres probar en las últimas versiones de node.js, lo puedes hacer sin temor a romper lo que ya tienes para otra versión más estable o incluso para versiones más viejitas.

¿Cómo instalamos node.js con NVM en macOS y Linux?

Suponemos que ya tienes instalado git, si no es así, puedes ver como instalar git en macOS aqui.

Ejecuta el siguiente comando en una terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
Instalar nvm en mac o linux
Instalar nvm en mac o linux

Este comando te clonara la última versión estable de NVM en tu directorio ~/.nvm, luego intentara escribir en tu archivo ~/.zshrc o ~/.bashrc el código de abajo. Esto para que NVM se cargue y funcione correctamente al iniciar sesión en tu computadora.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

Ahora para ejecutar el código anterior, y nos funcioné desde este momento nvm, ponemos en la consola el siguiente comando. Esto te permite no cerrar y volver abrir tu shell.

source ~/.zshrc

Revisa si tu instalación de NVM quedo correcta, ejecutando:

nvm --version

Si te imprime la versión, es que todo quedo correctamente instalado.

Ahora instala la última versión estable de node.js con el comando nvm install version

nvm install node # Aqui "node" es una alias para instalar la ultima version

Y verifica la versión de node instalada con:

node --version

¿Como usar otras versiones de node.js con NVM en macOS y Linux?

Para listar todas las versiones de node.js, puedes ejecutar el siguiente comando:

nvm ls-remote

La terminal te mostrará algo así:

nvm ls-remote
nvm ls-remote

Si quieres instalar otra versión, vuelves a ejecutar el comando nvm install version, por ejemplo, vamos a instalar la versión 14:

nvm install 14

Este comando te instalará la versión 14 de node, pero para poder usarlo, debemos ejecutar el siguiente comando:

nvm use 14

Ahora que se instaló la version 14 de node, siempre que se instala una nueva versión, nvm toma como default esa versión recientemente instalada de node en la shell actual, donde se ejecutó el comando de instalación.

Para poder verificar la versión actual, puedes ejecutar el comando `nvm current`, si quieres ver todas las versiones instaladas ejecuta el comando `nvm ls`, el cual lista las versiones instaladas de node.js

nvm ls
nvm ls

¿Cómo instalar node.js con NVM en windows?

Para instalar node.js en windows existen dos opciones similares a NVM, no son lo mismo, pero cumplen con el objetivo de tener varias versiones de node.js para facilitar tu desarrollo de software.

  • NVS
  • NVM windows

Para usar estos comandos se recomienda hacerlo desde tu power shell de windows con derechos de administrador. También desde una terminal muy buena, y que la puedes descargar del siguiente enlace:

https://cmder.net/

Instalar estas dos herramientas en windows, es mucho más fácil porque tiene sus propios instaladores automáticos.

nvs windows

Primero hay que descargar el instalador del enlace de abajito. NVS de hecho fue creado con inspiracion de NVM y tambien se puede usar en Mac y Linux.

https://github.com/jasongin/nvs/releases

Instalador de NVS
Instalador de NVS

Ahora, la operación confiable de “siguiente”, “siguiente”, “siguiente”, “finalizar”. Una vez instalado, en tu terminal de preferencia ejecuta el comando nvs add [version].

nvs add 16

Y para usar una version especifica de node, simplemente en una terminal, ejecuta el comandp nvs use [version].

nvs use 16

nvm-windows

Para instalar nvm-windows es también muy fácil, solo descárgate el instalador de aquí.

https://github.com/coreybutler/nvm-windows/releases

Luego, ya sabes, la operación confiable de oprimir el botón next hasta que la instalación esté completa.

Los comandos que puedes utilizar son:

Para instalar una versión de node ocupamos el comando:

nvm install v16

Si tienes más de una versión de node, puedes elegir cuál usar, al igual que en linux y MacOS.`

nvm use v16

Listo ya sabes como instalar node.js en tu máquina, ahora sí, tienes todo lo necesario para empezar a desarrollar en javascript.

es_MXES_MX