Mr. X FlameWolf

One way is to use double backticks to wrap your code.

Example:

To display alert(`The sum is ${a + b}`);, type ``alert(`The sum is ${a + b}`);``.

But the double-tick approach will not work if you want to wrap an entire template string inside them, like this: `Sum: ${a + b}`.

The trick here is to use triple backticks and a Zero-Width Space (ZWS) character. Example: ``[ZWS]`Sum: ${a + b}`[ZWS]``.

~~Element.prototype.insertAdjacentHTML can be up to 4 times slower than Node.prototype.appendChild. So use the latter wherever possible for best performance.~~ (See comment from @frankbakulov below!)

The power of Object.assign

Let's say you have an array like this:

let y = [{"a": { "id": 1 } }, { "b": { "id": 2 } }, { "c": { "id": 3 } }];

You can see that this is a very inefficient way to store data. It would be so much better to have these three distinct JSON objects as properties of a single JSON object like this:

{ "a": { "id": 1 }, "b": { "id": 2 }, "c": { "id": 3 } }

Let's say you want to add a method to all the elements in your HTML document. Normally, to do this, you will use Element.prototype as below:

Element.prototype.foo = function() {
	return "foo";
};

Let's say now you want to include a library called bar.js in your document. But unbeknownst to to you, there is a piece of code in bar.js that overwrites the foo() method of Element.prototype as below:

	Object.defineProperty(String.prototype, "format", {
	"value": function(...args) {
	const replacer = function(match, index) {
	return (args[parseInt(index)] \|\| "");
	};
	return this.replace(/\${(\d*?)\}/g, replacer);
	}
	});
	/***********************************************************************************************************/
	/******************************************** Usage ********************************************/

	const server = fastify();
	server.addHook("onRequest", async (request, reply) => {
	reply.header("Access-Control-Allow-Origin", process.env.ALLOW_ORIGIN);
	reply.header("Access-Control-Allow-Credentials", true);
	reply.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Slug, X-UID");
	reply.header("Access-Control-Allow-Methods", "OPTIONS, POST, PUT, PATCH, GET, DELETE");
	if (request.method === "OPTIONS") {
	reply.send();
	}
	});

	const app = express();
	app.use(async (req, res, next) => {
	res.setHeader("Access-Control-Allow-Origin", process.env.ALLOW_ORIGIN);
	res.setHeader("Access-Control-Allow-Credentials", true);
	res.setHeader("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Slug, X-UID");
	res.setHeader("Access-Control-Allow-Methods", "OPTIONS, POST, PUT, PATCH, GET, DELETE");
	next();
	});

	const getMaxZIndex = function () {
	const elements = [...document.querySelectorAll("body *")];
	return Math.max(...elements.map(x => parseInt(getComputedStyle(x, null).zIndex) \|\| 0));
	};

	globalThis.setImmediate = globalThis.setImmediate \|\| function (callback) {
	return setTimeout(callback, 0, ...Array.prototype.slice.apply(arguments, [1]));
	};