Diferencia entre const y Object.freeze() en JavaScript

Este artículo describe las mejores prácticas para establecer constantes y valores de configuración en JavaScript usando const y Object.freeze() y la diferencia entre ellos.

Cuando definimos constantes y valores de configuración en nuestras aplicaciones JavaScript. Deben tener las siguientes características:-

  1. Accesible a través de la aplicación
  2. El valor de la variable debe ser inmutable.
  3. La referencia de variable debe ser inmutable.

Ahora intentaremos implementar estas características...

Índice
  1. Usar dejar
  2. Usar constante
  3. Utilice Object.freeze()
  4. Usa const y Object.freeze() juntos

Usar dejar

Definamos la variable usando let y ver,

let APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App";
  return APP_NAME;
}

getApplicationName(); // Unkown App

En el ejemplo anterior, la función getApplicationName() cambió el valor de APP_NAME. ¿Cómo evitar la modificación del valor de una variable global?

Usar constante

Nosotros podemos usar const para definir una variable constante en lugar de let para evitar que cambie de valor.

const APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App"; // This will throw TypeError
  return APP_NAME;
}

Tratando de cambiar el valor de una variable definida usando const resultando en este error:

“TypeError: Assignment to constant variable.”

Entonces, ¿es eso? Vamos a averiguar

const fruits = ['mango', 'apple'];
fruits.push('banana');
console.log(fruits); // ['mango', 'apple', 'banana']
const constants = {
  APP_NAME : "Coding N Concepts"
};
constants.APP_NAME = "Unknown App";
console.log(constants.APP_NAME); // "Unknown App"

Puede ver en los dos ejemplos anteriores que puede cambiar el valor de un array o un object incluso si usas const porque:

const no lo hagas evaluar variable inmutable sino mas bien hazlo obligatorio variable inmutable.

Todos los tipos primitivos como integer, boolean y string obligatorio Los datos por valor mientras que tipos como array y object obligatorio Los datos por referencia.

Ahora sabemos que en caso de array y objectno puede cambiar la referencia, pero puede cambiar el valor.

Entonces, ¿cómo podemos evitar el cambio en el valor de array y object?

Utilice Object.freeze()

Aquí es donde Object.freeze() Unirse al juego. Object.freeze ignorar el cambio de valor de object y array.

let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App";

console.log(constants.APP_NAME); // "Coding N Concepts"

Puede ver en el ejemplo que no arroja ningún error si intenta cambiar el valor, pero no afectará el estado del objeto.

Object.freeze() impide cambiar el valor de un object pero siempre podemos cambiar la referencia de la siguiente manera: -

let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants = { 
  APP_NAME : "Unknown App"
};

console.log(constants.APP_NAME); // "Unknown App"

Si resumimos: -

const no permite cambiar la referencia de object Donde array aunque puedes cambiar el valor.

Object.freeze() ignora el cambio de valor de object Donde array

Combinarlos evitará cambios en ambos reference y value de uno object Donde array

Usa const y Object.freeze() juntos

const constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App"; // This is ignored

constants = { 
  APP_NAME : "Unknown App" 
}; // This will throw TypeError

El ejemplo anterior muestra que la combinación de los dos const y Object.freeze() es muy útil para definir constantes y configuración en JavaScript.

Si quieres conocer otros artículos parecidos a Diferencia entre const y Object.freeze() en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas