JavaScript, ES6 y más allá.

Hola, En este primer post les hablare un poco sobre JavaScript y lo mas reciente en este mundillo.
Para empezar solo se necesita un poco de conocimientos previos de JavaScript. Iremos desde lo
mas básico hasta lo más complejo. sin más que decir, Empecemos!

Hablaremos primero de las variables.

Anteriormente en JavaScript para declarar una variable usábamos var

var x = 5;

Ahora a partir de ES6, Podemos usar const y let.
Básicamente lo que nos brinda const es poder escribir variables únicas e irrepetibles.
y let lo usamos cuando necesitamos sobrescribir el valor de una variable.

ES se refiere a EcmaScript. básicamente
se refiere al estándar de JavaScript y son las personas detrás del desarrollo de este.

Ejemplo:

constkey = 'abc123';
constkey = 'xyz321';

// Nos dará un error porque ya la variable ha sido declarada.

La diferencia entre let y const es:

• Let: Permite actualizar el valor de la variable.
• Const: NO permite actualizar el valor de la variable.

Lo que nos permite esto es tener nuestro código más organizado que es a lo que me lleva al siguiente punto.

Scopes

Un scope se refiere al alcance de una variable. ¿Como así? Podemos ver el scope más bien como “bloques”. Cada vez que veas esto { } se refiere a un bloque, Ejemplo.

functionhello() {
  var hey = "saludo";
  console.log(hey)
}
hello()
console.log(hey);

// saludo// Uncaught ReferenceError: hey is not defined
    at <anonymous>:6:13

Esto es debido a que la variable está dentro de la function y su alcance esta solo dentro de ella. No puede ser accedida fuera de ella.

Aunque con var tengo que aclarar que solo es función scope. Es decir, Su alcance funciona solo dentro de funciones.
Si usamos un if o cualquier otra cosa su scope será global. ejemplo:

var edad = 100;
if(edad > 12) {
  var edadCanina = edad * 7;
  console.log(`Tienes ${edadCanina} años perros`)
}

console.log(edadCanina)

// Tienes 700 años perros// 700

Lo que hace var es que tiene un alcance global lo cual resulta un poco confuso y complicado a la hora de desarrollo.
Esto lo soluciona let y const.

const edad = 100;
if(edad > 12) {
  let edadCanina = edad * 7;
  console.log(`Tienes ${edadCanina} años perros`)
}

console.log(edadCanina)

// Tienes 700 años perros// Uncaught ReferenceError: edadCanina is not defined
    at <anonymous>:1:1

Usando let y const su alcance no es function scope ahora es block scope.

Un bloque se refiere a corchetes { }

TIP: Si usamos la variable antes de declararla, el resultado será undefined.
Esto es conocido como la Temporal Dead Zona o Zona Temporal Muerta.

¿Ahora la pregunta del siglo, es var deprecada?

Todo depende de la persona, Hay muchas opiniones y depende de cómo te gusta escribir código a ti.
Algunos recomiendan usar const por defecto es decir cada vez que necesitemos declarar una variable usar const
y usar solamente let cuando necesitaremos actualizar el valor. y var no debería ser usado en ES6+. Esta es la que uso yo.

Otros recomiendan usar var solamente cuando necesitemos crear variables a nivel global(window).

Arrow functions

las arrows functions o funciones flechas tienen algunas ventajas y desventajas. estas NO deberían usarse para reemplazar las funciones tradicionales.

Una de las ventajas de estas es que nos brinda la opción de implicit return o un retorno implícito y nos permite simplificar un poco.

const names = ['jesus', 'aspen', 'pepe'];
const fullNames = names.map(name => return`${name} sandrea`);

¿Ven como no utilice corchetes, paréntesis ni función? Esto es porque lo puedo hacer en una sola línea usando implicit return.
Usamos corchetes solo en el caso que necesitemos hacer múltiples tareas dentro de la función y paréntesis si vamos a pasarle varios parámetros.

Como desventaja, No podemos usarla cuando necesitemos usar this dentro de la función.
debido a que no hace un rebind y nos saldrá window.

Para utilizarla usando name functions debemos colocarla dentro de una variable.

const say = () => { alert('hello') }
say()

Template Strings

Otra de las maravillas de ES6 son los template strings.
Anteriormente si queríamos concadenar variables o textos teníamos que usar esto:

var name = 'jesus';
var apellido = 'sandrea';

console.log(name + ' ' + apellido);

Lo cual si incluso queríamos crear un poco de HTML dinámico dentro de JavaScript sería un
verdadero dolor de cabeza. Ahora que tenemos template strings sería algo así:

const name = 'jesus';
const apellido = 'sandrea';

console.log(`${name} {apellido}`);

Incluso podemos crear template strings dentro de template strings.
Ejemplo:

const dogs = [
  { name: 'Blacky', age: 2 },
  { name: 'Aspen', age: 2 },
  { name: 'Bailey', age: 8 }
];

const markup = `
  <ul class="dogs">
    ${dogs.map(dog => `
      <li>
        ${dog.name}
        is
        ${dog.age * 7}
      </li>`).join('')}
  </ul>
`;
document.body.innerHTML = markup;

También existe algo muy útil llamado tagged templates literals prácticamente podemos
pasar el string a una función. Esto funciona creando una named function y luego ese nombre
lo colocamos antes del template string. Ejemplo:

functionname() { return'cool' }
const dog = 'Aspen'const sentence = name`Mi perro se llama ${dog}`

Esto permite modificar el string, variables, etc. También a la función podemos pasarle como parámetros las variables y todo lo demás. Acá hay un dato curioso, para pasar todo lo demás existe algo llamado rest que traducido sería algo así como el resto y si queremos tener ciertos parámetros y luego añadir lo demás usamos …rest

Veamos otro ejemplo:

functionhighlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += `${string} <span contenteditable class="hl">${values[i] || ''}</span>`;
  });
  return str;
}

const name = 'Snickers';
const age = 100;

const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;
document.body.innerHTML = sentence;
console.log(sentence);

Este es un pequeño script en donde simplemente resaltamos las variables. pero si ven como
usamos los spread and rest operators? Así como también literal strings dentro de literal strings.
Otra cosa interesante es que se usamos JavaScript común dentro de literals strings. Lo cual simplica y nos hace mucho más fácil la vida como desarrolladores.

…Spread and …Rest operators

Un Spread Operator toma todos los elementos de un iterable y aplicarlo al elemento donde se invoca.

Que es un iterable? Un iterable es algo en lo que podemos hacer un loop o ciclo si usar for loop
Pueden ser Arrays, Strings, DomNodes, ArgumentsObjects, Maps.

Ejemplo de …Spread Operator

digamos que tengo varios arrays que quiero combinarlos y crear uno nuevo

constrandom = ['word', 'worlds', 'wide'];
const fun = ['disney', 'food', 'code']

const combine = [...random, 'elon musk', ...fun]

También podemos usar spread para pasar parámetros a una función.
Ejemplo:

const name = ['jesus', 'sandrea'];

functionsayHi(nombre, apellido) {
  alert(`Hey there ${nombre}${apellido}`)
}

sayHi(...name)

Ahora si hablamos de Rest es como explique anteriormente pasara el resto. Veamos un claro ejemplo:

digamos que queremos pasarle varios parámetros a la función, pero no sabemos cuántos serán. para eso podemos usar …rest

functionconversor(precio, ...cantidades){
  console.log(precio, cantidades)
}

conversor(1,2,34,768,7443,22)
// 1, [2,34,768,7443,22]

Promises

Ahora hablaremos de promesas. Las promesas son usadas frecuentemente cuando hacemos fetch a una API o algún trabajo con AJAX.
Para este ejemplo usaremos fetch.

Una promesa es algo que pasara en el futuro, pero probablemente no de forma inmediata. Lo cual aquí es donde está el santo grial. Ya que JavaScript es casi del todo asíncrono. lo cual significa que todo ocurre al mismo tiempo por asi decirlo.
Ejemplo

const postsPromise = fetch(url)
postPromise
  .then(data => data.json())
  .then(data => { console.log(data) })

Esto lo que hace es que espera que la información venga de la API. y luego cuando llegue lo muestra. Lo podemos ver que es algo así como un te debo, espera que yo te dejare saber cuándo tenga los resultados, pero mientras tanto podemos continuar con otras tareas sin bloquear JavaScript.

lo que hace el .then es que cuando sea exitosa y los resultados vuelvan. hacer un console.log. Pero siempre tenemos que tener en cuenta
si algo falla. para eso usamos .catch

const postsPromise = fetch(url)
postPromise
  .then(data => data.json())
  .then(data => { console.log(data) })
  .catch(err => {
    return console.log(err)
  })

También podríamos usar nuestra propia promesa. Ejemplo:

const p = new Promise((resolve, reject)) {
  resolve('Cool')
}

p
  .then(data => {
    console.log(data)
  })

Tendrá 2 condiciones (resolve, reject). Lo cual el ejemplo no es muy útil pero tal vez si alguna vez necesitas hacer un proceso “intenso” lo puedes implementar.

Acá le decimos a JavaScript que ejecute la promesa pero que no pare de ejecutar lo demás, Cuando los resultados vengan devueltos encárgate de manejarlos.

Async Await

¿Primero tenemos que tener claro que es asíncrono y síncrono?

Básicamente síncrono es esperar por las otras tareas antes de continuar mientras que
asíncrono ejecutas la tarea, pero inmediatamente sigue con la otra.

Lo cual la mayoría de las cosas en JavaScript no esperan a nadie. Por eso cuando anteriormente vimos el ejemplo de fetch. Si lo hacemos con un console.log

const res = fetch('https://github.com');
console.log(res)

Ejecutara el fetch, pero no va a parar nada esperando a que vuelva. Esto es lo que se conoce como “blocking” en la cual bloqueas el resto del código mientras esperas por los resultados. Un ejemplo de esto es un alert.
Esto es genial, pero se convierte en un problema cuando queremos un control fluido. Lo que queremos es que lo ejecute pero que tampoco bloquee el resto del código. más bien que continúe pero que sepa que todavía tiene alguna tarea pendiente. exactamente esto es lo que logramos con async await. Un ejemplo claro es:

Se llama async await. Porque creamos una función asíncrona (async) pero dentro de ella esperamos por algún resultado (await).

functionbreathe(amount) {
  returnnewPromise((resolve, reject) => {
    if (amount < 500) {
      reject('That is too small of a value');
    }
    setTimeout(() => resolve(`Done for ${amount} ms`), amount);
  });
}

asyncfunctiongo() {
  console.log(`Starting`);
  const res = await breathe(1000);
  console.log(res);
  const res2 = await breathe(300);
  console.log(res2);
  const res3 = await breathe(750);
  console.log(res3);
  const res4 = await breathe(900);
  console.log(res4);
  console.log('end');
}

Algo que quiero aclarar es que async await está construido sobre las promesas. No es algo alternativo a las promesas. Para crear algo asíncrono debe tener una función que esté basada en promesas.

Como comenté anteriormente, Creamos una promesa. Luego para que se asíncrona colocamos antes de la función async y luego dentro colocamos await al resultado que queremos esperar en este caso const res = await breathe(1000);

ES7 (EcmaScript 7)

En ES7 se introduce nuevas cosas como el operador exponencial 3 ** 3 = 27, padEnd, padStart, Que es practicamente como un padding al comienzo y al final.
Así como también la trailing comma. Ejemplo:

const people = {
  word: 'Cool',
  other: 'Coolest',
  super: 'Great',
}

¿Ven como en la ultima tenemos una coma demas? esto es porque anteriormente teníamos un problema con Git porque teníamos que editar la línea anterior.
Ahora podemos colocar una coma demás pensando siempre en la próxima persona. Funciona igual con las funciones y arrays.

Esto es un pequeño resumen en general. Todavía falta mucho de lo que no hable, aunque el mejor consejo es practicar y hacer pequeños proyectos. también ser curioso e investigar un poco más. Si de verdad quieren mejorar sus habilidades en JavaScript les recomiendo hacer el desafío de los 30 días en la cual consiste en crear una pequeña aplicación en JavaScript por 30 días. Esto me ayudo muchísimo.

¡Espero que les haya gustado, Saludos y hasta la próxima!