Object preventExtension vs seal vs freeze

Agustin N. R. Ramirez — Fri, 11 Oct 2019 15:02:28 +0000

ECMAScript 5 introduced new Object methods to Javascript. Among them preventExtensions, seal, freeze methods will be compared to each other.

`preventExtensions`

An object called by this method can't have any new properties being added.

Example

let person = {
  name: "Agustin",
  age: 27,
};
Object.preventExtensions(person);
Object.isExtensible(person); // return false
person.surname = "Ramirez";
console.log(person.surname); // return undefined
person.name = "Maria";
console.log(person); // return { name: "Maria", age: 27 }
delete person.age;
console.log(person); // return { name: "Maria" }

`seal`

An object called by this method can not have any new properties being added or current properties deleted.

Example

let person = {
  name: "Agustin",
  age: 27,
};
Object.seal(person);
Object.isSealed(person); // return true
// In strict mode this will throw a `TypeError`
person.foo = "something";
console.log(person.foo); // return undefined
person.name = "Maria";
console.log(person); // return { name: "Maria", age: 27 }
delete person.age;
console.log(person); // return { name: "Maria", age: 27 }
Object.defineProperty(person, "name", {
  get: () => "Juan",
}); // Throw TypeError
console.log(person); // return { name: "Maria", age: 27 }

`freeze`

An object called by this method can not have any further changes done to it.

Example

let person = {
  name: "Agustin",
  age: 27,
};
Object.freeze(person);
Object.isFrozen(person); // return true
person.name = "Maria";
console.log(person); // return { name: "Agustin", age: 27 }

shallow only

All of these methods only work on object properties shallowly, meaning that just work with the direct property references.

let person = {
  name: "Agustin", // Prevented, Sealed and Frozen
  age: 27, // Prevented, Sealed and Frozen
  address: {
    // Un-prevented, un-sealed and un-frozen
    country: "Argentina", // Un-prevented, un-sealed and un-frozen
    city: "Corrientes", // Un-prevented, un-sealed and un-frozen
  },
};

Feature matrix

Feature	default	preventExtensions	seal
add new properties	✓
remove existing properties	✓	✓
change existing property values	✓	✓	✓

Link: Today I Learned | Cybertec

Next.js & Typescript

Agustin N. R. Ramirez — Mon, 06 May 2019 23:38:05 +0000

Gente querida hablahispana, voy a compartir con ustedes la manera de integrar Next.js con Typescript.

Estoy empezando a utilizar este framework que promete mucho, en el cúal ya nos da un tooling de React bastante completo.

Server rendering
Static exporting
CSS-in-JS
SEO friendly, y más...

Entonces, decidí inclinarme por usar este súper Framework en conjunto con Typescript, el súper set de Javascript, dónde podemos manejar tipados, interfaces, clases, etc.

Genial!

Si bien en la documentación oficial de Next.js podemos encontrar, quisiera ahorrarlos con este post.

Lo primero que debemos hacer es iniciar un proyecto web, creando la carpeta de nuestro proyecto y posicionarnos en él:

mkdir NewProject && cd $_

Luego iniciamos nuestro package.json para definir nuestras dependencias (estos son los pasos iniciales para cualquier projecto de Next.js)

yarn init

Si no poseen yarn, que es el manejador de dependencias de Node que utilizo yo, lo pueden descargar aquí

Una vez ingresado y ejecutado el comando en la consola, completamos las informaciones que nos solicita yarn para crear nuestro package.json, que es donde se encuentran toda la información de nuestro proyecto, dependencias y scripts.

Creamos la estructura mínima e inicial de Next.js

mkdir pages

touch pages/index.tsx

Abrimos con un editor de código index.tsx, en mi caso uso VS Code, y creamos nuestra página principal index.

import React from "react"

class Index extends React.Component {
    public render() {
        return (<div>Next.js & Typescript boilerplate</div>)
    }
}

export default Index;

Ahora sólo nos queda decirle a Next.js que vamos a utilizalo con Typescript.

Y para eso debemos crear dos archivos en el root del proyecto, paralelo a package.json.

Creamos primero el archivo next.config.js:

touch next.config.js

Y completamos con lo siguiente:

// Configuramos para que Next.js pueda trabajar con Typescript

const withTypescript = require("@zeit/next-typescript");

module.exports = withTypescript();

Luego creamos el último archivo que es .babelrc.js:

touch .babelrc.js

Y escribimos lo siguiente:

// Definimos los presets para que nos transpile de TS a JS.
module.exports = {
    presets: ['next/babel', '@zeit/next-typescript/babel']
}

Conclusion

Manejar este genial React framework que es Next.js con Typescript, nos da una base muy sólida para empezar nuestro proyecto web.

Cualquier cosa, les dejo el link al repo dónde estan todos los archivos del proyecto que fuimos detallando en este post.

Next.js & Typescript

Cualquier consulta o dudas que tengan, pueden dejar sus comentarios y estaré ahí para ayudarlos

Saludos cordiales,

Happy coding.

DEV Community: Agustin N. R. Ramirez

Object preventExtension vs seal vs freeze

preventExtensions

Example

seal

Example

freeze

Example

shallow only

Feature matrix

Next.js & Typescript

Conclusion

`preventExtensions`

`seal`

`freeze`