5 Características de JavaScript en Desuso y sus Alternativas

Nube Colectiva

hace 3 años

En esta página:

Desde su nacimiento hace 26 años, JavaScript ha recorrido un largo camino. En sus inicios se usaba solo para interactuar con los subprogramas de Java y realizar una manipulación DOM simple, ahora se usa para escribir código en el entorno Front-end, Back-end, aplicaciones Desktop y móviles. El ecosistema de JavaScript creció al igual que su comunidad y constantemente esta actualizándose, hay nuevos métodos y características que aparecen y algunas quedan en desuso. En este Post te compartiré 5 características de JavaScript que están en desuso y que alternativas tenemos para reemplazarlas, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify	SoundCloud	Apple Podcasts

Bien ahora continuemos con el Post: 5 Características de JavaScript en Desuso y sus Alternativas.

Algunas características de JavaScript han desaparecido en su mayor parte o por completo, algunas de estas aún de puede usar, pero se desaconseja su uso.

Expresiones let y bloques let

En ECMAScript 6 es introdujeron declaraciones para declarar variables de ámbito de bloque let y const. Durante el breve período de tiempo, hubo extensiones no estándar para la declaración let, estas eran las expresiones let y los bloques let.

Los bloques let proporcionaron una forma de instanciar un bloque donde las variables pueden tener diferentes valores, sin afectar a las del mismo nombre fuera de ese bloque.


var nombrePerro = "Doby";
var edadPerro = 4.5;

let (nombrePerro = "Rufo", edadPerro = 4) {
  console.log(nombrePerro + "(" + edadPerro + " años)"); // Rufo (4 años)
}

console.log(nombrePerro + "(" + perroEdad + " años)"); // Doby (4.5 años)

var nombrePerro = "Doby";

var edadPerro = 4.5;

let (nombrePerro = "Rufo", edadPerro = 4) {

console.log(nombrePerro + "(" + edadPerro + " años)"); // Rufo (4 años)

}

console.log(nombrePerro + "(" + perroEdad + " años)"); // Doby (4.5 años)

Las expresiones let, hicieron algo similar pero en el nivel de expresión.


var nombrePerro = "Doby";

let(nombrePerro = "Rufo") console.log(nombrePerro); // Doby

console.log(nombrePerro); // Rufo

var nombrePerro = "Doby";

let(nombrePerro = "Rufo") console.log(nombrePerro); // Doby

console.log(nombrePerro); // Rufo

Veamos ahora que alternativa podemos usar.

Alternativa

Ya que let tiene un alcance de bloque, puede declarar variables nuevamente dentro del alcance interno y cambiarlas allí.


let nombrePerro = "Doby";
let edadPerro = 4.5;

{
  let nombrePerro = "Rufo", nombrePerro = 4;
  console.log(nombrePerro + "(" + edadPerro + " años)"); // Rufo (4 años)
}

console.log(nombrePerro + "(" + edadPerro + " años)"); // Doby (4.5 años)

let nombrePerro = "Doby";

let edadPerro = 4.5;

{

let nombrePerro = "Rufo", nombrePerro = 4;

console.log(nombrePerro + "(" + edadPerro + " años)"); // Rufo (4 años)

}

console.log(nombrePerro + "(" + edadPerro + " años)"); // Doby (4.5 años)

Pasemos a la siguiente característica en deshuso.

Métodos Object.observe y Object.unobserve

En tiempos anteriores, también existía una manera fácil de obtener información sobre cualquier cambio en un objeto.


var perro = {
  nombre: "Doby"
};

Object.observe(perro, function(changes) {
  console.log(changes);
});

perro.nombre = "Rufo";
// [{ nombre: 'nombre', object: <obj>, type: 'update', valorAnterior: 'Doby' }]

Object.unobserve(perro);

perro.nombre = "Tomas";

var perro = {

nombre: "Doby"

};

Object.observe(perro, function(changes) {

console.log(changes);

});

perro.nombre = "Rufo";

// [{ nombre: 'nombre', object: <obj>, type: 'update', valorAnterior: 'Doby' }]

Object.unobserve(perro);

perro.nombre = "Tomas";

También existían métodos similares para arrays: Array.observe y Array.unobserve

Veamos ahora que alternativa podemos usar.

Alternativa


const perro = new Proxy({ perro: "Doby" }, {
  get: (target, prop) => {
    console.log({ type: "get", target, prop });
    return Reflect.get(target, prop);
  },
  set: (target, prop, value) => {
    console.log({ type: "set", target, prop, value });
    return Reflect.set(target, prop, value);
  }
});

perro.nombre = "Rufo";
// { type: 'set', target: <obj>, prop: 'nombre', value: 'Rufo' }

perro.nombre;
// { type: 'get', target: <obj>, prop: 'nombre'

const perro = new Proxy({ perro: "Doby" }, {

get: (target, prop) => {

console.log({ type: "get", target, prop });

return Reflect.get(target, prop);

set: (target, prop, value) => {

console.log({ type: "set", target, prop, value });

return Reflect.set(target, prop, value);

}

});

perro.nombre = "Rufo";

// { type: 'set', target: <obj>, prop: 'nombre', value: 'Rufo' }

perro.nombre;

// { type: 'get', target: <obj>, prop: 'nombre'

Pasemos a la siguiente característica en deshuso.

Cierres de Expresión

Antes de que las funciones de flecha (arrow) estuvieran incluso en un plan, hubo cierres de expresiones. Estas permitieron omitir las llaves y devolver declaraciones de las definiciones del método por completo.


var perro = function() "Rufo";

var favoritos = {
  comida: function() "Croqueta"
};

var perro = function() "Rufo";

var favoritos = {

comida: function() "Croqueta"

};

Veamos ahora que alternativa podemos usar.

Alternativa

Lo anterior se ha eliminado en favor del uso de la sintaxis de ECMAScript.


var nombre = function() { return "Rufo"; }

var favoritos = {
  comida: function() { return "Croqueta"; }
};

var nombre = function() { return "Rufo"; }

var favoritos = {

comida: function() { return "Croqueta"; }

};

Hoy en día también se puede utilizar funciones de flecha (arrow) y definiciones de métodos (ambas introducidas en ES6).


const perro = () => "Rufo";

const favoritos = {
  get comida() { return "Croqueta"; }
};

const perro = () => "Rufo";

const favoritos = {

get comida() { return "Croqueta"; }

};

Pasemos a la siguiente característica en deshuso.

Declaración with

Todos sabemos lo horrible que puede ser trabajar con una larga cadena de propiedades. Afortunadamente, hay una forma de evitarlo, pero desafortunadamente no deberías usarlo.


const usuario = {
  detalles: {
    pasaporte: {
      ubicacion: {
        ciudad: 'Lima'
      }
    }
  }
};

with (usuario.detalles.pasaporte.ubicacion) {
  ciudad = 'Cusco';
}

const usuario = {

detalles: {

pasaporte: {

ubicacion: {

ciudad: 'Lima'

}

};

with (usuario.detalles.pasaporte.ubicacion) {

ciudad = 'Cusco';

}

Hay 2 razones importantes por las que no deberías usar la declaración with:

No hay lugar para la optimización dentro de ella, ya que no se puede predecir si la variable se referirá a una propiedad o a una variable externa.
Viola el alcance léxico, haciendo que el análisis de los programas sean muy difíciles o incluso inviables.

Además, será imposible que lo uses en ECMAScript 6 o en ECMAScript 5 con el modo estricto activado. El modo estricto prohíbe su uso.

Veamos ahora que alternativa podemos usar.

Alternativa

Lo mejor que puedes hacer es declarar una variable que contendrá la cadena de propiedades.


const usuario = {
  detalles: {
    pasaporte: {
      ubicacion: {
        ciudad: 'Lima'
      }
    }
  }
};

const usuarioUbicacion = usuario.detalles.pasaporte.ubicacion;
usuarioUbicacion.ciudad = 'Cusco';

const usuario = {

detalles: {

pasaporte: {

ubicacion: {

ciudad: 'Lima'

}

};

const usuarioUbicacion = usuario.detalles.pasaporte.ubicacion;

usuarioUbicacion.ciudad = 'Cusco';

Pasemos a la última característica en deshuso.

Métodos Object.prototype.watch y Object.prototype.unwatch

Hace tiempo existía una manera fácil de observar los cambios de propiedad en un objeto.


var perro = {};
perro.watch("nombre", function (propertyName, previousValue, newValue) {
  return "lindo: " + newValue;
});

perro.nombre = "Doby";
console.log("Hola " + perro.nombre + "!"); // Hola lindo Doby!

perro.unwatch("nombre");

perro.nombre = "Doby";
console.log("Hola " + perro.nombre + "!"); // Hola Doby!

var perro = {};

perro.watch("nombre", function (propertyName, previousValue, newValue) {

return "lindo: " + newValue;

});

perro.nombre = "Doby";

console.log("Hola " + perro.nombre + "!"); // Hola lindo Doby!

perro.unwatch("nombre");

perro.nombre = "Doby";

console.log("Hola " + perro.nombre + "!"); // Hola Doby!

Veamos ahora que alternativa tenemos.

Hoy en día se puede utilizar Proxy para este fin.


const handler = {
  set: (obj, prop, value) => {
    if (prop === 'nombre') {
      obj[prop] = `lindo ${value}`;
    }
  }
};

let perro = new Proxy({}, handler);

perro.nombre = "Doby";
console.log("Hola " + perro.nombre + "!"); // Hola lindo Doby!

perro = { ..perro }; // esto eliminará el comportamiento impuesto por Proxy

perro.nombre = "Rufo";
console.log("Hola " + perro.nombre + "!"); // Hola Rufo!

const handler = {

set: (obj, prop, value) => {

if (prop === 'nombre') {

obj[prop] = `lindo ${value}`;

}

};

let perro = new Proxy({}, handler);

perro.nombre = "Doby";

console.log("Hola " + perro.nombre + "!"); // Hola lindo Doby!

perro = { ..perro }; // esto eliminará el comportamiento impuesto por Proxy

perro.nombre = "Rufo";

console.log("Hola " + perro.nombre + "!"); // Hola Rufo!

Con esto terminamos con 5 características de JavaScript que estás en desuso y su alternativas que podemos usar.

Conclusión

Es genial ver cuanto ha crecido JavaScript durante los últimos 26 años. Creo que nos ayuda a saber como funcionaban las cosas años atrás, para no volver a repetir los mismos errores. No puedo esperar lo que vendrá en los próximos años.

Nota (s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.