El this de JavaScript es similar a lo que podríamos encontrar en otros lenguajes basados en clases como Java o C# (JavaScript en realidad es un lenguaje basado en prototipos y no tiene un concepto de "clase"): apunta al objeto que está llamando a la función (este objeto a veces se llama contexto). Sin embargo, en JavaScript, las funciones internas de la referencia this pueden vincularse a diferentes objetos dependiendo de dónde se llame a la función.

Aquí hay 5 reglas básicas para enlazar this en JavaScript:

Regla 1

Cuando se llama a una función en el ámbito global, this hace referencia de forma predeterminada al objeto global (window en el navegador, o global en Node.js). Por ejemplo:

function foo() {
  this.a = 2;
}

foo();
console.log(a); // 2

Nota: Si declaramos la función foo() en modo estricto, y luego la llamamos en el ámbito global, this será undefined y la asignación this.a = 2  arrojará una excepción  Uncaught TypeError (error de tipo no detectado).

Regla 2

Veamos el siguiente ejemplo:

function foo() {
  this.a = 2;
}

const obj = {
  foo: foo
};

obj.foo();
console.log(obj.a); // 2

Claramente, en el fragmento anterior, la función foo() se llama en el contexto del objeto obj, por lo tanto this ahora hace referencia a obj. Entonces, cuando se llama a una función con un objeto de contexto, la referencia  this se vincula a dicho objeto.

Regla 3

.call, .apply y .bind pueden utilizarse para enlazar explícitamente this. Usar .bind(this) es algo que podemos ver en muchos componentes de React.

const foo = function() {
  console.log(this.bar)
}

foo.call({ bar: 1 }) // 1

Aquí vemos algunos ejemplos rápidos de como utilizar cada uno para enlazar this:

• .call(): fn.call(thisObj, fnParam1, fnParam2)
• .apply(): fn.apply(thisObj, [fnParam1, fnParam2])
• .bind(): const newFn = fn.bind(thisObj, fnParam1, fnParam2)

Regla 4

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

const p1 = new Point2D(1, 2);
console.log(p1.x); // 1
console.log(p1.y); // 2

Lo que notamos aquí es que al llamar a la función Point2D utilizando la palabra clave new, la referencia this se vincula al objeto p1. Entonces, cuando llamamos a una función utilizando new, un nuevo objeto es creado y la referenciathis se vincula al mismo.

Nota: A una función que llamamos utilizando la palabra clave new también la conocemos como función constructora.

Regla 5

JavaScript determina el valor de this en tiempo de ejecución, según el contexto actual. Por eso a veces this podría no estar apuntando a dónde esperamos.

Veamos este ejemplo, una clase Gato que tiene un método llamado hacerSonido(), siguiendo lo que vimos en la regla anterior, utilizamos una función constructora y la palabra clave new.

const Gato = function(nombre, sonido) {
  this.nombre = nombre;
  this.sonido = sonido;
  this.hacerSonido = function() {
    console.log( this.nombre + ' decir: ' + this.sonido );
  };
}

const gatito = new Gato('Papá Gordo', 'Mrrooowww');
gatito.haceSonido(); // Papá Gordo dice: Mrrooowww

Ahora vamos a agregarle al gato el método molestar() para que puedan molestar a las personas repitiendo su sonido 100 veces, con un período de repetición de medio segundo.

const Gato = function(nombre, sonido) {
  this.nombre = nombre;
  this.sonido = sonido;
  this.hacerSonido = function() {
    console.log( this.nombre + ' decir: ' + this.sonido );
  };
  this.molestar = function() {
    let contar = 0, max = 100;
    const t = setInterval(function() {
      this.hacerSonido(); // <-- esta línea falla con `this.hacerSonido no es una función` 
      count++;
      if (contar === max) {
        clearTimeout(t);
      }
    }, 500);
  };
}

const gatito = new Gato('Papá Gordo', 'Mrrooowww');
gatito.molestar();

Esto no funcionará porque dentro de setInterval hemos creado un nuevo contexto con alcance global, entonces this ya no apunta a nuestra instancia gatito. En el navegador, this apuntará al objeto Window, que no tiene un método hacerSonido().

Algunas formas de solucionarlo:

1. Antes de crear el nuevo contexto, asignar this a una variable local llamada me, o self, o cualquier nombre que elijamos, y referenciar esa variable dentro del callback.

const Gato = function(nombre, sonido) {
  this.nombre = nombre;
  this.sonido = sonido;
  this.hacerSonido = function() {
    console.log( this.nombre + ' decir: ' + this.sonido );
  };
  this.molestar = function() {
    let contar = 0, max = 100;
    const self = this;
    const t = setInterval(function() {
      self.hacerSonido();
      contar++;
      if (contar === max) {
        clearTimeout(t);
      }
    }, 500);
  };
}

const gatito = new Gato('Papá Gordo', 'Mrrooowww');
gatito.molestar();

2. Con ES6 podemos evitar tener que asignar this a una variable local usando una arrow function, que automáticamente enlaza this al contexto del código donde ha sido definida.

const Gato = function(nombre, sonido) {
  this.nombre = nombre;
  this.sonido = sonido;
  this.hacerSonido = function() {
    console.log( this.nombre + ' decir: ' + this.sonido );
  };
  this.molestar = function() {
    let contar = 0, max = 100;
    const t = setInterval(() => {
      this.hacerSonido();
      contar++;
      if (contar === max) {
        clearTimeout(t);
      }
    }, 500);
  };
}

const gatito = new Gato('Papá Gordo', 'Mrrooowww');
gatito.molestar();

Traducido del artículo - The Complete Guide to this in JavaScript

JavaScript tiene un hilo de proceso único, lo que significa que dos porciones del script no pueden ejecutarse al mismo tiempo, deben hacerlo una después de la otra. Una promesa es un objeto que representa la terminación o el fracaso de una operación asíncrona, y el valor resultante.

var promise = new Promise(function(resolve, reject) {
  // hacemos algo, entonces…

  if (/* todo funciono */) {
    resolve("Mira, funcionó!");
  }
  else {
    reject(Error("Se rompe"));
  }
});

Una Promesa existe en uno de estos estados

• Pendiente: Estado inicial, ni cumplida ni rechazada.
• Cumplida: la operación se completó satisfactoriamente.
• Rechazada: la operación falló.

El objeto promesa funciona como un contenedor para un valor que no necesariamente conocemos cuando la promesa es creada. En una operación asíncrona, nos permite asociar distintos controladores al resultado si se cumple con éxito, o a los motivos del error si ha fallado.

Esto le permite a un método asíncrono devolver un valor de manera síncrona: en lugar de devolver el valor final, devuelve una promesa de proporcionar ese valor en algún momento del futuro.

Usando ‘Then’ para encadenar promesas

Para tomar varias llamadas asíncronas y sincronizarlas una luego de la otra, podeos utilizar el encadenamiento de promesas. Esto nos permite utilizar el valor resultante de una promesa en subsecuentes callbacks.

Promise.resolve('alguna')
  .then(function(string) { // <-- Esto sucederá luego de que se resuelva la promesa anterior (devolviendo el valor 'alguna')
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += ' cosa';
        resolve(string);
      }, 1);
    });
  })
  .then(function(string) { // <-- Esto sucederá luego de que la nueva promesa del .then anterior se resuelva
    console.log(string); // <-- Se muestra 'alguna cosa' en la consola
  });

Promesas API

Hay cuatro métodos estáticos en la clase Promesa:

• Promise.resolve
• Promise.reject
• Promise.all
• Promise.race

Las promesas pueden encadenarse

Cuando escribimos promesas para resolver un problema particular, podemos encadenarlas para crear una lógica.

var add = function(x, y) {
  return new Promise((resolve,reject) => {
    var sum = x + y;
    if (sum) {
      resolve(sum);
    }
    else {
      reject(Error("No se pudo realizar la suma!"));
    }
  });
};

var subtract = function(x, y) {
  return new Promise((resolve, reject) => {
    var sum = x - y;
    if (sum) {
      resolve(sum);
    }
    else {
      reject(Error("No se pudo realizar la resta!"));
    }
  });
};

// Empezando cadena de promesas
add(2,2)
  .then((added) => {
    // suma = 4
    return subtract(added, 3);
  })
  .then((subtracted) => {
    // resta = 1
    return add(subtracted, 5);
  })
  .then((added) => {
    // suma = 6
    return added * 2;    
  })
  .then((result) => {
    // resultado = 12
    console.log("My result is ", result);
  })
  .catch((err) => {
    // Si alguna parte de la cadena es rechazada, devolver mensaje de error.
    console.log(err);
  });

Esto es útil para seguir un paradigma de programación funcional. Al crear funciones para manipular datos, podemos encadenarlas para ensamblar un resultado final. Si en cualquier punto de la cadena de funciones se rechaza un valor, la cadena saltará al controlador catch() más cercano.

Para más información sobre Programación Funcional: Programación Funcional

Generadores de Funciones

En versiones recientes, JavaScript introdujo nuevas formas de manejar Promesas de manera nativa. Una de ellas son los generadores de funciones. Estos generadores son funciones que pueden ser pausadas. Al ser usados con Promesas, los generadores hacen su lectura más fácil y de apariencia síncrona.

const myFirstGenerator = function* () {
  const one = yield 1;
  const two = yield 2;
  const three = yield 3;

  return 'Terminado!';
}

const gen = myFirstGenerator();

Aquí tenemos nuestro primer generador, que podemos identificar por la sintaxis function*. La variable gen no va a ejecutar myFirstGenerator directamente, pero alistará al generador para ser usado.

console.log(gen.next());
// Returns { value: 1, done: false }

Al ejecutar gen.next() se reanudará el generador. Como es la primera vez que llamamos gen.next() ejecutará yield 1 y volverá a pausarse hasta que volvamos a llamar gen.next(). Cuando yield 1 es llamado, nos devolverá el value que se obtuvo y si el generador está hecho (done) o no.

console.log(gen.next());
// Devuelve { value: 2, done: false }

console.log(gen.next());
// Devuelve { value: 3, done: false }

console.log(gen.next());
// Devuelve { value: 'Terminado!', done: true }

console.log(gen.next());
// Arroja un error

A medida que seguimos llamando gen.next() continuará hacia el siguiente yield y se pausará cada vez. Cuando se terminen los yield, procederá a ejecutar el resto del generador, que en este caso solo devolver 'Terminado!'. Si llamamos gen.next() una vez más, obtendremos un error porque el generador ha concluido.

Ahora bien, imaginemos que cada yield en este ejemplo es una promesa, en ese caso el código luciría extremadamente síncrono.

Promise.all(iterable) es muy útil para múltiples consultas a distintas fuentes

El método Promise.all (iterable) devuelve una única Promesa que se resolverá cuando todas las promesas del argumento iterable se hayan resuelto o cuando el argumento iterable no contenga promesas. Rechaza con la razón de la primera promesa que rechaza.

var promise1 = Promise.resolve(catSource);
var promise2 = Promise.resolve(dogSource);
var promise3 = Promise.resolve(cowSource);

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// resultado esperado: Array ["catData", "dogData", "cowData"]

Más información sobre promesas:

• How JavaScript promises actually work
• How to implement promises in JavaScript
• How to write a JavsScript promise

Traducido del artículo - JavaScript Promises Explained

El operador typeof es muy útil porque nos permite consultar fácilmente el tipo de datos que una variable contiene. Esto es importante en JavaScript porque se trata de un lenguaje escrito dinámicamente. Esto significa que no necesitamos asignar un tipo de datos fijo a una variable cuando la creamos. Al no restringir las variables de esta manera, el tipo de datos que contienen puede cambiar durante la ejecución de un programa.

Por ejemplo:

var x = 12345; // number
x = 'string'; // string
x = { key: 'value' }; // object

Como podemos ver en el ejemplo anterior, una variable puede cambiar de tipo durante la ejecución de un programa. En nuestro trabajo diario puede ser complejo llevar un registro de estos cambios y es en esos casos donde el operador typeof será útil.

El operador typeof devuelve una cadena de texto que representa el tipo de dato actualmente contenido en una variable. Para usarlo podemos escribir typeof(variable) o typeof variable. Volviendo al ejemplo anterior, podemos utilizarlo para comprobar el tipo de dato de la variable x en cada paso:

var x = 12345; 
console.log(typeof x) // number
x = 'string'; 
console.log(typeof x) // string
x = { key: 'value' };
console.log(typeof x) // object

De esta manera, por ejemplo, podemos comprobar el tipo de dato de una variable dentro de una función y continuar en caso de obtener el resultado esperado.

Aquí tenemos una función de ejemplo que puede tomar una variable y anunciar si es una cadena de texto o un número:

function doSomething(x) {
  if(typeof(x) === 'string') {
    alert('x is a string')
  } else if(typeof(x) === 'number') {
    alert('x is a number')
  }
}

También podemos utilizar el operador typeof para asegurarnos de que una variable ha sido definida antes de utilizarla en nuestro código. Esto puede ser útil para prevenir un error muy común, intentar acceder a una variable cuyo valor aún no ha sido definido.

function(x){
  if (typeof(x) === 'undefined') {
    console.log('variable x is not defined');
    return;
  }
  // aquí continuamos con la función...
}

Cuando trabajamos con números, el valor que devuelve el operador typeof puede no ser lo que estamos esperando.

Los números pueden convertirse en NAN (No es un número) por distintos motivos.

console.log(typeof NaN); //"number"

Quizás estamos intentando multiplicar un número con un objeto, porque olvidamos acceder al número que ese objeto contiene:

var x = 1;
var y = { number: 2 };
console.log(x * y); // NaN
console.log(typeof (x * y)); // number

En este caso, no será suficiente utilizar typeof para comprobar que el resultado es un número, ya que NaN también cumple con esta condición.

En la siguiente función, vamos a comprobar que el valor es un número pero excluyendo a NaN de la condición:

function isNumber(data) {
  return (typeof data === 'number' && !isNan(data));
}

Si bien este es un método muy útil para validar tipos de datos, también debemos tener cuidado porque JavaScript tiene algunas rarezas y entre ellas encontramos el resultado de typeof en algunas situaciones particulares. En JavaScript muchas cosas son inesperadamente objetos, como por ejemplo los arreglos (arrays) y los valores null

var x = [1,2,3,4]; 
console.log(typeof x)  // object

console.log(typeof null)  // object

Traducido del artículo - JavaScript Data Types: Typeof Explained

La Accesibilidad Web es un estándar desarrollado por el World Wide Web Consortium (W3C) que incluye guías, herramientas y material de soporte. Nos permite optimizar nuestras interfaces para garantizar el acceso a personas con discapacidades o que puedan experimentar algún tipo de impedimento para acceder al contenido, ya sea temporal o permanente.

Al navegar en la web, estas personas hacen uso de funcionalidades propias del dispositivo o del navegador, sumando en algunos casos tecnologías de asistencia adicionales, como lectores de pantalla o controles de navegación. Estas herramientas requieren que nuestro código respete una serie de recomendaciones o buenas prácticas que muchas olvidamos. Tan así es que el útimo WebAIM Millon (un test anual que realiza el W3C sobre una muestra de un millón de sitios web) arrojó un resultado alarmante: el 98.1% de los sitios analizados mostraron problemas de Accesibilidad. Peor aún, este porcentaje viene aumentando en los últimos años.

Las herramientas utilizadas en este análisis fueron la Guía de Accesibilidad para Contenido Web WCAG 2.0 y un software de evaluación de uso libre llamado Wave. Si bien el análisis no cubre la totalidad de los requerimientos para hacer que un sitio sea accesible, es un buen punto de partida.

Repasemos entonces cuáles son los seis errores más comunes identificados por el estudio del millón (el número corresponde al porcentaje de sitios donde se encontró el error):

• Bajo contraste 86.3%
• Imágenes sin texto alternativo 66%
• Links vacíos 59.9%
• Entradas sin etiqueta label en formularios 53.8%
• Botones vacíos 28.7%
• Documento sin atributo de lenguaje 28%

Existen muchos problemas que exceden las posibilidades del testing automático, ya que requieren un análisis cualitativo o lo que es aún mejor, realizar pruebas con personas usuarias reales. Pero desde nuestro lugar, podemos empezar a contribuir solucionando estos errores que, como veremos a continuación, no requieren un gran esfuerzo técnico, de tiempo o presupuesto.

Bajo contraste (86.3%)

El contraste entre texto y fondo es fundamental para lograr legibilidad. WCAG 2.0 establece para el nivel AA que el contraste mínimo entre el color de texto y el de fondo debería ser mayor o igual a 4,5:1, en una escala dónde 1:1 es blanco sobre blanco y 21:1 negro sobre blanco.

Este ratio puede variar en función al tamaño, estilo y finalidad del texto. Lo bueno es que no necesitamos aprender todos esos números de memoria y tomarnos el tiempo para hacer los cálculos, podemos utilizar esta herramienta online para chequear contraste de colores que hará todo el trabajo por nosotros. Solo debemos ingresar los colores con los que queremos trabajar y nos indicará, en cada caso, si el contraste es adecuado o necesitamos hacer ajustes.

Imágenes sin texto alternativo (66%)

El texto alternativo alt es un atributo de la etiqueta html Imagen <img> y como su nombre lo indica, ofrece una alternativa en formato texto al contenido expresado o representado en la imagen.

<img src="imagen.jpg" alt="Texto alternativo de la imagen" />

El texto que debemos incluir en este atributo varía según la función que cumple la imagen, veamos algunos casos:

Imágenes decorativas

Si se trata de una imagen decorativa, que no transmite información indispensable para comprender el contenido, como por ejemplo un borde, o una textura de fondo, debemos utilizar un atributo alt vacío. Aunque parezca un error, esta es la manera correcta de indicar que una imagen es irrelevante para la comprensión del contenido.

<img src="textura-fondo.png" alt="" />

Íconos y botones gráficos

En un interface de usuario, es común que utilicemos imágenes en forma de íconos que actúan como botones. Aquí podemos distinguir dos situaciones diferentes.

Si no hay texto acompañando a la imagen / ícono, podemos utilizar el atributo  alt  para indicar la función que cumple ese ícono, por ejemplo:

<a href="documento.pdf">
  <img src="icono-descargar.jpg" alt="Descargar documento en formato PDF." />
</a>

En cambio, si la imagen está acompañada de texto, ese texto debería ser suficiente para describir la acción. La imagen, al ser solo un elemento decorativo, debe incluir un atributo  alt  vacío.

<a href="./documento.pdf">
  <img src="icono-descargar.jpg" alt=""/> 
  Descargar documento en formato PDF.
</a>

Imágenes ilustrativas o representativas

Por último, encontramos las imágenes o gráficos que se utilizan para transmitir contenido. En este caso, el texto alternativo debe ser equivalente a esa información que transmite la imagen, teniendo en cuenta el contexto en el que se presenta.

Es importante prestar atención a los siguientes aspectos:

• Tratar de ser conciso y específico al describir el contenido o la acción.
• No excluir información vital para entender el significado de la imagen en relación con el contenido que acompaña y al contexto en el que se presenta.
• No incluir información redundante.
• No es necesario incluir las palabras “Imagen de.. ” o “Imagen que representa.. “. Si el formato de la imagen es relevante para el contenido, puede indicarse al final, por ejemplo alt="Paisaje montañoso y nevado, ilustración digital."  
• Siempre terminar la frase con un punto (.) para que la oración no suene inconclusa.

Links Vacíos (59.9%)

En el punto anterior vimos un ejemplo de este error. Si definimos un enlace con la etiqueta html <a> pero dentro de la etiqueta solo agregamos una imagen, ese link será considerado vacío. Como ya vimos, podemos utilizar el atributo  alt para incluir este texto y permitir que las tecnologías de asistencia puedan leer nuestro enlace.

<a href="index.html">
  <img src="logotipo.png" alt="Ir a la página principal">
</a>

Elementos interactivos sin etiqueta label en formularios (53.8%)

En html disponemos de muchos elementos interactivos que nos permiten ingresar datos en un formulario, como por ejemplo entradas de texto  <input type="text"> o desplegables con opciones para seleccionar  <select>. Estos elementos deben ir siempre acompañados de una etiqueta que describa su propósito. En la mayoría de los casos, usaremos la etiqueta html <label> con un atributo  for que debe apuntar al  id del elemento interactivo, por ejemplo:

<label for="nombre">Ingrese su nombre:</label>

<input type="text" id="nombre"/>

Ahora bien, supongamos que el departamento de diseño determinó que la función del elemento interactivo es obvia y no necesita una descripción textual que sea visible en la pantalla. En este caso tenemos algunas opciones:

• Incluir la etiqueta  <label>  pero ocultarla utilizando CSS
• Utilizar el atributo  aria-label  

<input type="text" aria-label="Ingrese su nombre."/>

• Utilizar el atributo  aria-labelledby apuntando al id de otro elemento que describa esa funcionalidad:  

<h3 id="titulo">Ingrese su nombre</h3>

<input type="text" aria-labelledby="titulo"/>

Botones vacíos 28.7%

En el caso de los botones, vemos el mismo patrón que en las imágenes. Si un botón no contiene texto en su interior, necesitamos incluirlo de alguna manera. Si tenemos una imagen en el interior, podemos usar el atributo alt como vimos antes.

<button>
  <img src="cerrar.png" alt="Cerrar ventana." />
</button>

Si el botón está completamente vacío, porque la imagen es un fondo o pseudo elemento css, también podemos utilizar el atributo  aria-label  

<button aria-label="Cerrar ventana."></button>

Documento sin atributo de lenguaje 28%

La regla verifica que al menos el elemento raíz de una página HTML incluya un atributo lang con un valor de idioma conocido, por ejemplo es (español) o en (inglés):

<html lang="es">
  <head>...</head>
  <body>
    <!-- Contenido en español -->
  </body>
</html>

También podemos agregar el atributo lang en un elemento interior, que contenga contenido en otro idioma:

<html lang="es">
  <head>...</head>
  <body>
    <!-- Contenido en español -->
      
    <section lang="en">
      <!-- Contenido en inglés -->
    </section>
  </body>
</html>

Como podemos imaginar, esta información será de gran utilidad para que el contenido pueda ser transmitido adecuadamente por los lectores de pantalla, pero también supone beneficios a la hora de traducir e indexar ese contenido.

¡Buen trabajo!

Logramos solucionar al menos algunos de los errores más comunes en el desarrollo de sitios web accesibles.  Como ya mencionamos, este análisis solo cubre los errores que pueden ser detectados con herramientas automáticas, pero sirven como punto de partida para empezar a prestar atención y contribuir a transformar obstáculos en herramientas de inclusión.  

Esta propiedad establece o devuelve la cantidad de elementos en un arreglo. Por lo tanto nos permite saber si está vacío o no. Un arreglo vacío tendrá 0 elementos dentro.

Veamos algunos ejemplos.

Ejemplos de la sintaxis al utilizar .length

Const miArreglo = [‘Free’, ‘Code’, ‘Camp’];

Aquí hemos creado una variable y asignamos como valor un arreglo que contiene tres elementos.

Utilizando la propiedad length podemos comprobar esta cantidad:

miArreglo.length

Esto devuelve  3  porque hay tres elementos dentro del arreglo.

Ahora veamos tres alternativas a la hora de usar la propiedad length:

Ejemplo 1

Primero creamos un arreglo sin elementos:

const arr = [];

Ahora vamos a comprobar si el arreglo está vacío llamando a la propiedad length

arr.length

Esto devuelve 0 porque no hay elementos dentro de arr

Ejemplo 2

También podemos ser aún más específicos y comprobar si el valor de length es igual a cero:

if (arr.length === 0) { console.log("Está vacío!") }

Si nuestro arreglo está vacío, el mensaje se registrará en la consola. Si el arreglo contiene al menos un elemento, el código dentro del bloque condicional if no se ejecutará.

Veamos una tercer forma de utilizar la propiedad length.

Ejemplo 3

Combinando el uso de la propiedad length con el operador lógico "not" de Javascript, el símbolo !, podemos preguntar si un arreglo está vacío.

El operador ! niega la expresión que precede. Es decir que podemos utilizarlo para reemplazar el resultado de un dato booleano por su opuesto. Y por es en este caso podemos devolver true si el arreglo está vacío.

Para este ejemplo podemos a usar la consola Javascript. En Chrome podemos encontrarla en Inpsect -> Console.

Primero, vamos a crear un arreglo sin elementos:

const arr = []
// undefined

A continuación, vamos a usar el operador ! (not) junto a la propiedad length para comprobar que está vacío:

const arr = []
// undefined

!arr.length
// true

Sin usar el operador "not" arr.length devolvería 0 que en Javascript es equivalente a false. Al utilizar el operador ! lo que ocurre primero es que Javascript convierte a  0  en un valor booleano, por lo tanto 0  se convierte en su equivalente false para que luego el operador pueda transformarlo en su opuesto, es decir true.

A continuación vamos a preguntar si el arreglo está vacío, utilizando un condicional if para imprimir un mensaje con la respuesta:

const arr = []
// undefined

!arr.length
// true

if(!arr.length) {console.log("El array está vacío!")}
// El arreglo está vacío!

Ya que estamos trabajando con arreglos, veamos también cómo comprobar que un dato es en efecto del tipo arreglos.

Cómo usar el método Array.isArray()

Supongamos que recibimos un dato y esperamos que sea un arreglo, por ejemplo  ["free", "code", "camp"] pero en realidad recibimos esa misma información transformada en una cadena de texto "free, code, camp"

En este caso, el valor de length sera diferente para cada tipo de dato:

const miArreglo = [‘Free’, ‘Code’, ‘Camp’];
miArreglo.length; // 3

const myString = ‘Free, Code, Camp’;
myString.length; // 16

Este error es mas común de lo que podría parecer, por eso es una buena idea utilizar el método Array.isArray() para asegurarnos de que estamos trabajando con el tipo esperado. Este método determina si el dato que le estamos pasando es realmente un arreglo y en ese caso, devuelve true.

Vamos a agregarlo a nuestro ejemplo anterior:

const arr = []
// undefined

!arr.length
// true

if(Array.isArray(arr) && !arr.length) {console.log("Es un arreglo y está vacío!")}
// Es un arreglo y está vacío!

En resumen

En este artículo aprendimos como usar la propiedad length en JavaScript, siguiendo distintas alternativas para comprobar si un arreglo está vacío o no. Esta propiedad length devuelve el número de elementos que un arreglo contiene.

También aprendimos que es recomendable usar el método Array.isArray antes de consultar la propiedad length de un dato, para asegurarnos que es del tipo arreglo como esperamos.

Traducido del artículo de Madison Kanna - How to Check if a JavaScript Array is Empty or Not with .length

Sabías que una cadena de texto puede ser dividida y transformada en un arreglo de multiples cadenas de texto? En Javascript podemos hacer esto utilizando el método  split.  Veamos como funciona con algunos ejemplos.

TL;DR

Si sólo estas buscando el código, aquí va:

const editor = 'free code camp'
editor.split(' ') // [ 'free', 'code', 'camp' ]

Sintaxis

De acuerdo con MDN, la sintaxis que necesitamos para dividir una cadena de texto es str.split([separador [, limite ]]). Si lo aplicamos al ejemplo anterior:

• str es nuestra cadena de texto, la constante editor
• separador es ' ' y será el valor tomado como punto de referencia para dividir las partes.
• No existe un limite por lo tanto el arreglo tendrá tantos elementos como partes puedan resultar de la división (en este caso tres).

¿Cuándo necesitamos dividir una cadena de texto de esta manera?

Ejemplo 1: obteniendo una parte de la cadena de texto.

Aquí tenemos un ejemplo común que implica obtener un token desde un encabezado auth que es parte de un sistema de autenticación basado en token.

Si no tienes idea que significa eso, no hay problema.  Todo lo que necesitas saber es que existe una cadena de texto con el valor bearer token, pero sólo necesitamos token (porque es la parte que identifica al usuario):

const authHeader = 'bearer token'
const split = authHeader.split(' ') // (1) [ 'bearer', 'token' ]
const token = split[1] // (2) token

Repasemos lo que ocurre en el código anterior:

1. La cadena de texto es dividida utilizando ' ' como separador y las partes resultantes son almacenadas en un arreglo.
2. Accedemos a la segunda entrada de ese arreglo.

Ejemplo 2: aplicar métodos de arreglo a una cadena de texto

Muchas veces el dato que estamos manejando es del tipo cadena de texto, pero necesitamos aplicarle métodos de arreglo (por ejemplo map, filter, or reduce).

Supongamos que tenemos una cadena de texto en código morse y queremos traducirlo:

const morse = '-.-. --- -.. .'
// (1)
const morseToChar = {
  '-.-.': 'c',
  '-..': 'd',
  '.': 'e',
  '---': 'o',
}

const ArregloMorse = morse.split(' ') // (2) [ '-.-.', '---', '-..', '.' ]
const arregloTexto = arregloMorse.map((char) => morseToChar[char]) // (3) [ 'c', 'o', 'd', 'e' ]
const texto = arregloTexto.join(") // (4)

Veamos que pasa con este código:

1. Creamos un objeto literal para asignar los caracteres morse al alfabeto
2. El código morse es dividido y transformado en un arreglo utilizando ' ' como separador.. (Sin ' ' como argumento, terminaríamos con un arreglo conteniendo entradas separadas para cada . y - .)
3. El arreglo de código morse se asigna/ transforma en un arreglo de texto.
4. Utilizamos el método join() para crear y devolver una nueva cadena de texto del arreglo, utilizando '' como separador. (Sin '' como argumento el resultado sería c,o,d,e.)

Cómo añadir un límite al split

Como podemos ver en MDN, el método split también puede recibir limite como argumento limitando al número de elementos creados dentro del arreglo resultante. Nunca he necesitado hacer esto, pero veamos como aplicarlo:

const editor = 'free code camp'
editor.split(' ', 1) // [ 'free' ]

En este ejemplo el arreglo resultante sólo contiene el elemento  'free' porque establecimos el límite de un elemento. Sin el argumento, el resultado del arreglo hubiese sido [ 'free', 'code', 'camp' ].

Antes de que te vayas…

Gracias por leer este artículo! Escribo sobre mis experiencias profesionales y educativas como desarrollador de software autodidacta, así que no dudes en visitar mi sitio web o suscribirse a mi boletín para obtener más contenido.

Traducido del artículo de David - JavaScript Split String Example – How to Split a String into an Array in JS