JavaScript es un lenguaje basado en prototipos, por lo tanto entender el objeto prototype es uno de los conceptos más importantes que los profesionales de JavaScript necesitan saber. Este artículo te dará una breve descripción del objeto prototype a través de varios ejemplos. Antes de leer este artículo, deberás tener un entendimiento básico de la referencia this en JavaScript.

Objeto prototype

En honor a la claridad, vamos a examinar el siguiente ejemplo:

function Punto2D(x, y) {
  this.x = x;
  this.y = y;
}

Al declararse la función Punto2D, una propiedad predeterminada llamada  prototype será creada para ella (ten en cuenta que, en JavaScript, una función es también un objeto). La propiedad prototype es un objeto que contiene una propiedad constructor y su valor es la función Punto2D: Punto2D.prototype.constructor = Punto2D. Y cuando tú llamas a Punto2D con la palabra reservada new, los objetos recién creados heredarán todas las propiedades de Punto2D.prototype. Para verificar esto, puedes agregar un método llamado mover en  Punto2D.prototype de la siguiente manera:

Punto2D.prototype.mover  = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.mover (3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

El Point2D.prototype es llamado objeto prototipo o prototipo del objeto p1 y de cualquier otro objeto creado con la sintaxis new Point2D(...) . Puedes agregar tantas propiedades al objeto Point2D.prototype como quieras. Lo que suele hacerse es declarar métodos en Point2D.prototype y otras propiedades se declararán en la función constructora.

Los objetos integrados en JavaScript se construyen de manera similar. Por ejemplo:

• El prototipo de los objetos creados con la sintaxis new Object() o {} es Object.prototype
• El prototipo de los arreglos creados con la sintaxis new Array() o [] es Array.prototype
• Y es igual con otros objetos integrados como Date y RegExp.

Object.prototype es heredado por todos los objetos y no tiene prototipo (su prototipo es null)

Cadena de prototipos

El mecanismo de la cadena del prototipo es simple: cuando accede a una propiedad p en el objeto obj, el motor de JavaScript buscará esta propiedad dentro del objeto obj. Si el motor falla en la búsqueda, continúa buscando en el prototipo de objeto obj y así sucesivamente hasta llegar a Object.prototype. Si finalizada la búsqueda no se ha encontrado nada, el resultado será undefined. Por ejemplo:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

En el fragmento de código anterior, la declaración var obj2 = Object.create(obj1) creará el objeto obj2 con el objeto prototipo obj1. En otras palabras, obj1  se convierte en el prototipo de obj2 en lugar de Object.prototype por defecto. Como puedes ver,  bno es una propiedad de obj2, pero puedes acceder a ella a través de la cadena de prototipos. Sin embargo, para la propiedad c,  se obtiene un valor undefined porque no se puede encontrar en obj1 y en Object.prototype.

Clases

En ES2016, ahora podemos usar la palabra clave Class , así como los métodos mencionados anteriormente para manipular el prototype. Las clases de JavaScript son atractivas para los desarrolladores con experiencia en programación orientada a objetos, pero esencialmente hace lo mismo que el anterior.

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Esto es básicamente lo mismo que:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

Los métodos getter y setter en las clases vinculan una propiedad Object a una función que será llamada cuando se busque esa propiedad. Esto es solo azúcar sintáctico para ayudar a que sea más fácil buscar o establecer propiedades.

Más información sobre prototipos de JS:

• Todo lo que necesitas saber para entender el prototipo de JavaScript

Traducción del artículo - JavaScript Prototype Explained with Examples

Git es uno de los sistemas de control de versión más populares. Sin embargo, los nuevos desarrolladores pueden sentirse abrumados fácilmente al usarlo, lo sé pues así me sentí yo. De hecho, lo evité por años.

Si eres un desarrollador experimentado o no tiemblas ante la mención de Git, siéntete libre de pasar a la siguiente publicación. Sin embargo, si eres nuevo en Git o no te sientes seguro usándolo, tómate unos minutos para aprender estos consejos básicos - pero poderosos - de Git.

Estos es lo que cubriremos:

1. Git clone
2. Git checkout
3. Git pull
4. Git add and commit
5. Git stash and merge
6. Git push

Git clone

siempre clona los nuevos repositorios en los que trabajes, lo que significa descargar una copia de los archivos del repositorio en tu computadora. Si bien hay muchas formas de clonar un repositorio, explicaré cómo hacerlo desde la línea de comandos.

Por ejemplo, si deseas clonar el repositorio mencionado previamente, primero copea el enlace de la parte superior. Luego, abre tu terminal, y cambia de directorio utilizando el comando cd a la ubicación en tu computadora dónde deseas colocar estos archivos - $ cd <nombre-de-carpeta> . Escribe git clone y luego pega el enlace como se muestra a continuación si deseas clonar la rama maestra.

git clone https://github.com/JamesOkunlade/old-apple.git

Si tu quieres clonar una rama en particular de este repositorio, querrás hacer algo como esto:

git clone https://github.com/JamesOkunlade/old-apple.git -b branch-name

Git checkout

Es una buena práctica crear diferentes ramas para diferentes funciones en lugar de trabajar directamente en la rama maestra. Cuando se ha considerado que todas las funciones pasan ciertas pruebas y cumplen determinados requisitos, puedes fusionarlas en la rama maestra.

En diferentes momentos, tendrás que cambiar a la rama del repositorio en la que quieres trabajar y puedes hacerlo con el siguiente comando.

Si la rama ya ha sido creada:

git checkout branch-name

Y si simplemente estás creando la nueva rama de funcionalidad:

git checkout -b branch-name

Git pull

Tu equipo o compañero de programación cambiarán diferentes ramas de un repositorio, y tu deberías siempre recibir estos nuevos cambios antes de comenzar a escribir código. En tu terminal, ve a la rama en la que estarás trabajando y ejecuta el comando git pull. Los cambios más recientes serán descargados a tu repositorio local.

Git add and commit

Los comandos add y commit de Git casi siempre se usan juntos.  Piensa en ellos como capturar y guardar. Tu no puedes guardar algo si no lo has capturado primero. Por lo tanto, el comando add siempre debe preceder al comando commit. Mientras que tu usas el comando add para apuntar al archivo en particular que quieres capturar en su estado actual, usas el comando commit para guardar una copia de lo que has capturado.

Para capturar todos los archivos (con excepción de aquellos excluidos por Git ignore), deberás usar el comandogit add . y para capturar el estado actual de un archivo en particular, digamos index.html, deberás escribir git add index.html

Luego de capturar el estado actual de tu proyecto, deberás hacer un commit y guardar tus capturas en el repositorio local usando el siguiente comando:

git commit -m ‘commit message’

El mensaje de commit debería explicar la carácterística destacada de la captura que estás guardando. Por ejemplo:

git add index.html

git commit -m ‘el botón de función de formulario creado’

Puedes combinarlos usando el operador && como te muestro a continuación:

git add index.html && git commit -m ‘footer html structure created’

Git stash and merge

Con solo hacer un git stash guardarás cualquier edición que hayas hecho en tu rama pero que no quieras capturar con un commit. Eso significa que cuando esperas el commit y push de la copia de código de otro desarrollador, puedes experimentar en esa misma rama. Git lo alienta. Siempre que estés listo para hacer un pull de nuevos cambios a tu repositorio local, pero no quieras hacer un merge de tus cambios en él, debes entonces hacer un stash de tus cambios. Git stash mantendrá una copia en otra parte para tí y será accesible con solo hacer un git stash list.

El git merge es un comando que combina dos capturas diferentes. Puede combinar deferentes capturas de la misma rama creadas por desarrolladores diferentes o fusionar diferentes capturas de diferentes ramas.

Cuando hayas hecho un checkout a la rama master, git merge development unirá la rama development a tu rama master y vice versa.

Git push

Al igual que cuando guardas tus fotografías en un álbum de Google Photos para quien comparta ese álbum pueda verlas, piensa en git push como enviar tu repositorio local al repositorio remoto para que otros puedan acceder a él.

git push -u origin branch-name

Mientras que hay otros comandos de Git disponibles, es interesante lo que puedes lograr con dominar los pocos que he cubierto en este artículo.

No dudes en contactarme y hacerme cualquier pregunta en Twitter.

James Okunlade (@JamesOkunlade) | Twitter
Los últimos Tweets de JamesOkunlade (@JamesOkunlade). Full-stack SWE | JavaScript/React/Redux | Ruby/Ruby on Rails |…twitter.com

James Okunlade - Software Developer - Filmdrive| LinkedIn

Traducido del artículo de James Okunlade - The essentials of Git explained in five minutes

Las Funciones son Objetos

Lo primero que tenemos que saber es que en Javascript, las funciones son objetos de primera clase. Como tales, podemos trabajar con ellos de la misma forma que trabajamos con otros objetos, como asignarlos a variables y pasarlos como argumentos a otras funciones. Esto es importante, porque esta última técnica nos permite ampliar la funcionalidad de nuestras aplicaciones.

Funciones Callback

Una función callback es aquella que es pasada como argumento a otra función para que sea "llamada de nuevo" (call back) en un momento posterior. Una función que acepta otras funciones como argumentos es llamada función de orden-superior (High-Order), y contiene la lógica para determinar cuándo se ejecuta la función callback. Es la combinación de estas dos la que nos permite ampliar nuestra funcionalidad.

Para ilustrar las funciones callback, iniciemos con un ejemplo simple:

function crearCita(cita, callback){ 
  var miCita = "Como yo siempre digo, " + cita;
  callback(miCita); // 2
}

function logCita(cita){
  console.log(cita);
}

crearCita("come tus vegetales!", logCita); // 1

// Resultado en la consola: 
// Como yo siempre digo, come tus vegetales!

En el ejemplo anterior, crearCita es la función de orden-superior, la cual acepta dos argumentos, el segundo es el callback. La función logCita se está pasando como nuestra función callback. Cuando ejecutamos la función  crearCita  (1), observa que no estamos agregando paréntesis a logCita al pasarla como argumento. Esto se debe a que no queremos ejecutar nuestra función callback de inmediato, simplemente queremos pasar la definición de la función a la función de orden-superior para que pueda ejecutarse más tarde.

Además, debemos asegurarnos que si la función callback que pasamos espera argumentos, debemos proporcionarlos al ejecutarla (2). En el ejemplo anterior, eso sería la declaración callback(miCita); ya que sabemos que logCita  espera que se pase una cita.

Además, podemos pasar funciones anónimas como callbacks. La siguiente llamada a crearCita  tendrá el mismo resultado que el ejemplo anterior:

crearCita("come tus vegetales!", function(cita){ 
  console.log(cita); 
});

Por cierto, tu no estás obligado a usar la palabra "callback" como el nombre de tu argumento, Javascript solo necesita saber que es el nombre correcto del argumento. Según el ejemplo anterior, la siguiente función se comportará exactamente de la misma manera.

function crearCita(cita, funcionParaLlamar) { 
  var miCita = "como siempre digo, " + cita;
  funcionParaLlamar(miCita);
}

¿Por qué usar funciones Callback?

La mayoría del tiempo estamos creando programas y aplicaciones que operan en una forma sincrónica. En otras palabras, algunos de nuestra operaciones comienzan solo después de que se hayan completado las anteriores. Usualmente, cuando solicitamos datos desde otras fuentes como una API externa, no siempre sabemos cuando nuestros datos serán devueltos. En estos casos queremos esperar la respuesta, pero no queremos que toda nuestra aplicación se detenga mientras se recuperan los datos. Estas son situaciones dónde las funciones callback resultan útiles.

Veamos un ejemplo que simula una solicitud a un servidor:

function solicitudServidor(consulta, callback){
  setTimeout(function(){
    var respuesta = consulta + "lleno!";
    callback(respuesta);
  },5000);
}

function obtenerResultados(resultados){
  console.log("Respuesta del servidor: " + resultados);
}

solicitudServidor("El vaso está medio  ", obtenerResultados);

//Resultado en la consola luego de 5 segundos:
// El vaso está medio lleno!

En el ejemplo anterior hacemos una solicitud simulada al servidor. Después de que pasen cinco segundos, la respuesta es modificada y luego nuestra función callback   obtenerResultados se ejecuta. Para ver esto en acción, puedes copiar / pegar el código anterior en las herramientas de desarrollador de tu navegador y ejecutarlo.

Además, si ya estás familiarizado con la función setTimeout, entonces has estado usando funciones callback todo el tiempo. El argumento de función anónima pasado a la llamada de la función setTimeout en el ejemplo anterior ¡también es un callback! Entonces la función callback del ejemplo es en realidad ejecutada por otro callback. Ten cuidado de no anidar demasiadas funciones callback si puedes evitarlo, ya que esto puede llevar a algo llamado "infierno de callbacks". Como su nombre lo indica, no es un placer lidiar con él.

Traducido del artículo - What is a Callback Function in JavaScript?