7 Cosas que no sabías de JavaScript

En este post aprenderas algunas de las caracteristicas mas interesantes de JavaScript, nuestro lenguaje favorito y aquel que utilizamos dia a dia para crear el futuro con aplicaciones muy diversas.

7 Cosas que no sabías de JavaScript

¿Cuál es la diferencia entre un arrow function y una función declarada con function?

Un arrow function no tiene su propio this, ni puede ser llamada con new para crear una nueva instancia de una clase.

Recuerda que con function es perfectamente posible crear una clase, en realidad la palabra class es solamente sugar sintax que apareció en ES5, antes de eso, las clases se usaban así:

function User(name) {
  this.name = name;
}

User.prototype.getName = function() {
  return this.name;
};

const leonidas = new User('Leonidas')

leonidas.getName()
'Leonidas'

Otra gran diferencia es que no puedes usar arguments en un arrow function para obtener un array de los parámetros de la función:

const f = function() {
  return arguments
}

f('a')
// ['a']

const arrow = () => arguments

arrow('a') // Reference Error: arguments is not defined

Estas son las dos cosas que debes tener en cuenta al momento de declarar una clase.

Optional Chaining

En React todos hemos tenido alguna vez el famoso error de Cannot read property 'map' of undefined al tratar de iterar sobre un array inexistente.

Sin embargo puedes evitarlo utilizando el ? antes de tratar de acceder al array.

const MiguelSegura = {
  name: "Miguel",
  age: 19,
  dogs: null,
}

MiguelSegura.dogs.map((dog) => console.log(dog))
// Error: Cannot read property 'map' of null`

// Itera sobre el array dogs si y solo si este existe
MiguelSegura.dogs?.map((dog) => console.log(dog))
//

.map con strings

Los strings pueden utilizar los métodos de los arrays siempre y cuando estos devuelvan un nuevo array y no modifiquen el array original.

const a = 'noTeRindas'
const b = Array.prototype.map.call(
            a,
            letter => letter.toUpperCase() + '.'
          ).join('')
// N.O.T.E.R.I.N.D.A.S,

De strings a numbers utilizando la coerción

Todos estamos acostumbrados a convertir un string '2' a number 2 usando cosas como:

const n = '22'

Number(n)
parseInt(n, 10)
parseFloat(n)
//  Todos devuelven 22

Sin embargo también podemos aprovechar la coerción que es la que nos hace tener errores como '2' + 2 === '22' para esto:

const n = '22'

+n
1*n
~~n
// Todos devuelven 22

Este tipo de implementación es realmente útil cuando estás resolviendo retos o puzzles de algoritmia donde debes utilizar la menor cantidad de caracteres posibles.

Accediendo a las propiedades de Number

¿Sabías que puedes acceder a los métodos numéricos como toFixed() sin necesidad de una variable?

Sin embargo Js siempre tratará de tomar el punto como parte del número y no como un operador para ingresar a la propiedad de un objeto.

42.toFixed( 3 );
// SyntaxError: Invalid or unexpected token

Genera un error de sintaxis por que el punto es tomado como parte del decimal del número y no como un operador para acceder a la la propiedad toFixed() de number.

Sin embargo este trucazo si nos funciona si lo ejecutamos de alguna de las siguientes formas:

(42).toFixed( 3 );
// "42.000"
0.42.toFixed( 3 );
// "0.420"
42..toFixed( 3 );
// "42.000" Es primer punto es el decimal,
// el segundo el de acceso a un objeto

¿Cuál es la diferencia entre null y undefined?

Aunque muchas veces undefined y null son tomados como si fueran valores equivalentes, en realidad hay una gran diferencia:

• undefined es un valor inexistente, jamás ha tenido un valor
• null es un valor inexistente, tuvo un valor pero ya no está ahí

Una gran diferencia entre null y undefined que null es una palabra reservada mientras que undefined es un identificador y sorprendentemente es una variable a la que le puede asignar un valor.

function foo() {
  var undefined = 2;
  console.log(undefined + 2); // Esto devuelve 4
}

foo();

Esto es algo muy tonto y jamas, jamas debe de hacerse. Las buenas personas no dejan que otras sobrescriban undefined jamás!

¿Qué es 'strict mode'?

Ejecutar un programa o una función en modo estricto significa que JavaScript convertirá las prácticas negativas pero que normalmente son permitidas en verdaderos errores, esto nos ayuda a evitar cosas como crear variables globales sin querer al usar una variable no declarada, cambiar el valor de undefined etc.

"use strict"

function foo(a){
  b = 4
  console.log(a + b)
  return a + b
}

// b is not defined

Para comenzar a usarlo solo debes añadir 'use strict' al principio de una función o de un archivo, aunque en la actualidad suele ser innecesario.

Sígueme en mis redes sociales para que te siga contando todo lo que he aprendido como el Fronted Developer del #noTeRindas Team.