1. Asignación de variable por valor y por referencia

Entender cómo JavaScript asigna las variables es fundamental para escribir código sin errores. Si usted no entiende cómo funciona la asignación de variables, podría escribir fácilmente un código que cambie los valores involuntariamente.

Es importante saber que JavaScript siempre asigna las variables por valor. Pero esta parte es muy importante: cuando el valor asignado es uno de los cinco tipos primitivos de JavaScript (es decir, Boolean, null, undefined, String, y Number), se asigna el valor real. Sin embargo, cuando el valor asignado es un array, función u objeto, se asigna una referencia al objeto que está en la memoria.

En el siguiente fragmento de código, a var2 se le establece el valor de var1. Dado que var1 es un tipo primitivo (String), a var2 se le establece el mismo valor de tipo String de var1 y se puede considerar que es completamente distinto de var1 en este punto. En consecuencia, la reasignación de var2 no tiene efecto en var1.

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'
  

Comparemos esto con la asignación de objetos.

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }    
  

Podemos observar que al asignar el valor de var1 a var2, se le esta asignando a var2 la referencia del objeto guardado en memoria, uno puede ver cómo esto podría causar problemas si esperaba un comportamiento como una asignación primitiva. Esto puede ser especialmente desagradable si creas una función que mute involuntariamente un objeto.

2. Closures

Las clausuras son un patrón importante de JavaScript para dar acceso privado a una variable. En este ejemplo, crearSaludo devuelve una función anónima que tiene acceso al saludo suministrado, "Hola". Para todos los usos futuros, diHola tendrá acceso a este saludo.

function crearSaludo(saludo) {
  return function(name) {
    console.log(saludo + ', ' + name);
  }
}
const diHola = crearSaludo('Hola');
diHola('Joe');
// Hola, Joe  
  

En un escenario más real, podría imaginar una función inicial apiConnect(apiKey) que devuelve algunos métodos que usarían la clave API. En este caso, la apiKey solo debería proporcionarse una vez y nunca más.

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }
  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }
  return { get, post }
}
const api = apiConnect('my-secret-key');

//No hay necesidad de incluir la apiKey nunca mas
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });      
  

3. Destructuring

La sintaxis de destructuring assignment es una expresión de JavaScript que hace posible la extracción de datos de arreglos u objetos usando una sintaxis que equivale a la construcción de arreglos y objetos literales, en otras palabras, destructuring es una forma común de extraer propiedades de objetos de forma limpia.

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'  
  

Si desea extraer propiedades con un nombre diferente, puede especificarlas utilizando el siguiente formato.

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'    
  

4. La sintaxis extendida o spread syntax

Un concepto de JavaScript que puede despistar a las personas pero que es relativamente simple es la sintaxis extendida. En el siguiente caso, Math.max no se puede aplicar al arreglo arr porque no toma un arreglo como un argumento, sino que toma los elementos individuales como argumentos. El operador de propagación ... se utiliza para extraer los elementos individuales del arreglo.

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
  

5. Parámetros rest

La sintaxis de los parámetros rest nos permiten representar un número indefinido de argumentos como un arreglo.

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3  
  

6. Comparadores de igualdad (==) e identidad (===)

Asegúrese de conocer la diferencia entre el operador de identidad === y el operador de igualdad == en JavaScript. El operador == hará la conversión de tipos antes de comparar valores, mientras que el operador === no realizará ninguna conversión de tipos antes de comparar.

console.log(0 == '0');
// true
console.log(0 === '0');
// false      
  

7. Comparación de objetos

Un error que veo que cometen los recién llegados a JavaScript es comparar objetos directamente. Las variables están apuntando a referencias de los objetos en la memoria, no a los objetos en sí. Un método para compararlos realmente es convertir los objetos en cadenas JSON. Sin embargo, esto tiene un inconveniente: el orden de las propiedades del objeto no está garantizado. Una forma más segura de comparar objetos es incorporando una biblioteca que se especializa en la comparación profunda de objetos (por ejemplo, isEqual de lodash).

Los siguientes objetos son iguales, pero de hecho apuntan a diferentes referencias en memoria.

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false       
  

En cambio, el siguiente ejemplo se evalúa como verdadero porque un objeto se establece igual al otro objeto y, por lo tanto, apunta a la misma referencia (solo hay un objeto en la memoria).

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true      
  

8. Callback Functions

Demasiadas personas se sienten intimidadas por las funciones de devolución de JavaScript. Son simples, tomemos este ejemplo. La función console.log se pasa como una devolución de llamada a myFunc. Se ejecuta cuando se completa setTimeout. Eso es todo al respecto.

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'  
  

9. Promesas

Una vez que entienda las funciones de devolución de JavaScript, pronto se encontrará en el "infierno de las funciones de devolución anidadas". Aquí es donde las promesas son de ayuda. Coloque su lógica asíncrona en una promesa y resuelva en caso de éxito o rechace si falla. Use then para manejar el éxito y catch para manejar el fracaso de la promesa.

const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Siii!');
    }
    return rej('Oh no!');
  }, 1000);
});

myPromise
  .then(function(data) {
    console.log('Exito: ' + data);
    })
    .catch(function(err) {
    console.log('Error: ' + err);
    });
    
// si Math.random() retorna menos que 0.9 el siguiente texto es impreso en consola:
// "Exito: Siii!"
// si Math.random() retorna 0.9 o mayor el siguiente texto es impreso en consola:
// "Error: On no!"  

10. Async Await

Una vez que aprenda a utilizar las promesas de JavaScript, es posible que le guste la sintaxis async await, que es simplemente una forma mas simple y entendible de trabajar con promesas. En el siguiente ejemplo creamos una función asíncrona y dentro de eso esperamos la promesa de bienvenida.

const saludo = new Promise((res, rej) => {
  setTimeout(() => res('Hola mundo'), 2000);
})
async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}
myFunc();
// 'Hello world!'