1// JS Tip of the Day
2// How to set entire document editable
3
4document.designMode = 'on'; // use it with Developer Tools Console.

1// JS Tip of the Day
2// Set the primitive value of an object - easy way
3
4class Hero {
5	constructor(hero = 'Batman') {
6      this.hero = hero;
7    }
8
9    valueOf() {
10		return `I'm ${this.hero}`;
11	}
12}
13
14console.log(new Hero()); // { hero: 'Batman' }
15console.log(`${new Hero()}!!!!`); // I'm Batman!

1// JS Tip of the Day
2// Import and parse JSON with modules (Chrome 91+)
3
4/* heroes.json
5{
6  "heroes": [
7    { "name": "Batman", "weapon": "Batarang" },
8    { "name": "Superman", "weapon": "himself" }
9  ]
10}
11*/
12
13import heroes from './heroes.json' assert { type: "json" };
14console.log(heroes); // { heroes: Array(2) } 
15// or
16const heroesModule = await import('../db.json', { assert: { type: 'json' } });
17console.log(heroesModule.default); // { heroes: Array(2) }
18
19
20/*
21  NB: The new import assertions feature allows module import statements 
22  to include additional information.
23  For instance, if you use the assertions, it fails if responds with 
24  a non-JSON MIME type.
25*/

1// JS Tip of the Day
2// Get the last item in an array (reloaded)
3
4const heroes = ['Batman', 'Superman', 'Wonder Woman'];
5// Use Array length
6console.log(heroes[heroes.length - 1]); // ['Wonder Woman']
7// Array.prototype.slice method
8console.log(heroes.slice(-1)[0]); // ['Wonder Woman']
9// Array.prototype.pop method
10console.log([...heroes].pop()); // ['Wonder Woman']
11/*
12  Array.prototype.at new method
13  but check the browser compatibility (Chrome 92 / Firefox 90)!
14*/
15console.log(heroes.at(-1)); 

1// JS Tip of the Day
2// Different methods to manage the immutability of the objects
3
4// Object.preventExtensions
5const heroPreventExt = { name: 'Batman', weapon: 'Batarang' };
6Object.preventExtensions(heroPreventExt);
7heroPreventExt.weapon = 'Grapple Gun'; // Allowed!
8Object.defineProperty( heroPreventExt, 'weapon', { 
9    writable: false,
10});
11delete heroPreventExt.weapon; // Allowed!
12heroPreventExt.vehicle = 'Batmobile'; // Not Allowed!
13console.log(heroPreventExt.vehicle); 
14/* undefined 
15   or in Strict Mode
16   TypeError: Cannot add property vehicle, object is not extensible
17*/ 
18Object.isExtensible(heroPreventExt) //false
19
20
21// Object.seal
22const heroSeal = { name: 'Batman', weapon: 'Batarang' };
23Object.seal(heroSeal);
24heroSeal.weapon = 'Grapple Gun'; // Allowed!
25Object.defineProperty( heroSeal, 'weapon', { 
26    writable: false,
27}); // Not Allowed!
28delete heroSeal.weapon; // Not Allowed!
29/* false 
30   or in Strict Mode
31   TypeError: Cannot delete property 'weapon' of #<Object>
32*/
33heroSeal.vehicle = 'Batmobile'; // Not Allowed!
34console.log(heroSeal.vehicle); 
35/* undefined 
36   or in Strict Mode
37   TypeError: Cannot add property vehicle, object is not extensible
38*/ 
39Object.isSealed(heroSeal) // true
40
41
42// Object.freeze
43const heroFreeze = { name: 'Batman', weapon: 'Batarang' };
44Object.freeze(heroFreeze);
45heroFreeze.weapon = 'Grapple Gun'; // Allowed!
46/* 
47  In Strict Mode
48  TypeError: Cannot assign to read only property 'weapon' of object '#<Object>'
49*/
50Object.defineProperty( heroFreeze, 'weapon', { 
51    writable: false,
52}); // Not Allowed!
53delete heroFreeze.weapon;
54/* undefined 
55   or in Strict Mode
56   TypeError: Cannot add property vehicle, object is not extensible
57*/ 
58heroFreeze.vehicle = 'Batmobile'; // Not Allowed!
59console.log(heroFreeze.vehicle); 
60/* undefined 
61   or in Strict Mode
62   TypeError: Cannot add property vehicle, object is not extensible
63*/ 
64Object.isFrozen(heroFreeze) // true