/
Gists
/
JavaScript
Gists - JavaScript
On gists
Do you know JS array methods?
•
JavaScript
data.js #
const employees = [
{
id: 1,
first_name: 'Jan',
lastname: 'Novák',
age: 45,
salary: 85000,
role: 'CEO',
},
{
id: 2,
first_name: 'Marie',
lastname: 'Svobodová',
age: 32,
salary: 45000,
role: 'Developer',
},
{
id: 3,
first_name: 'Petr',
lastname: 'Dvořák',
age: 28,
salary: 65000,
role: 'Developer',
},
{
id: 4,
first_name: 'Lucie',
lastname: 'Černá',
age: 24,
salary: 35000,
role: 'Developer',
},
{
id: 5,
first_name: 'Tomáš',
lastname: 'Procházka',
age: 38,
salary: 55000,
role: 'Manager',
},
{
id: 6,
first_name: 'Eva',
lastname: 'Marková',
age: 29,
salary: 42000,
role: 'Designer',
},
{
id: 7,
first_name: 'Martin',
lastname: 'Kučera',
age: 35,
salary: 48000,
role: 'Manager',
},
{
id: 8,
first_name: 'Anna',
lastname: 'Veselá',
age: 26,
salary: 35000,
role: 'Support',
},
{
id: 9,
first_name: 'Jakub',
lastname: 'Horák',
age: 31,
salary: 65000,
role: 'Developer',
},
{
id: 10,
first_name: 'Tereza',
lastname: 'Pokorná',
age: 27,
salary: 38000,
role: 'Accountant',
},
{
id: 11,
first_name: 'David',
lastname: 'Král',
age: 33,
salary: 45000,
role: 'Developer',
},
{
id: 12,
first_name: 'Barbora',
lastname: 'Němcová',
age: 30,
salary: 42000,
role: 'Designer',
},
{
id: 13,
first_name: 'Milan',
lastname: 'Urban',
age: 42,
salary: 55000,
role: 'Manager',
},
{
id: 14,
first_name: 'Veronika',
lastname: 'Machová',
age: 25,
salary: 38000,
role: 'Designer',
},
{
id: 15,
first_name: 'Filip',
lastname: 'Sedláček',
age: 34,
salary: 48000,
role: 'Manager',
},
{
id: 16,
first_name: 'Kristýna',
lastname: 'Vacková',
age: 28,
salary: 42000,
role: 'HR',
},
{
id: 17,
first_name: 'Josef',
lastname: 'Malý',
age: 39,
salary: 55000,
role: 'Manager',
},
{
id: 18,
first_name: 'Kateřina',
lastname: 'Šimková',
age: 31,
salary: 45000,
role: 'Analyst',
},
{
id: 19,
first_name: 'Ondřej',
lastname: 'Beneš',
age: 36,
salary: 65000,
role: 'Developer',
},
{
id: 20,
first_name: 'Michaela',
lastname: 'Fialová',
age: 29,
salary: 42000,
role: 'Designer',
},
{
id: 21,
first_name: 'Pavel',
lastname: 'Bartoš',
age: 44,
salary: 55000,
role: 'Manager',
},
{
id: 22,
first_name: 'Lenka',
lastname: 'Kolářová',
age: 27,
salary: 38000,
role: 'Designer',
},
{
id: 23,
first_name: 'Roman',
lastname: 'Kovář',
age: 33,
salary: 45000,
role: 'Developer',
},
{
id: 24,
first_name: 'Martina',
lastname: 'Říhová',
age: 30,
salary: 48000,
role: 'Manager',
},
{
id: 25,
first_name: 'Lukáš',
lastname: 'Vlček',
age: 35,
salary: 65000,
role: 'Developer',
},
{
id: 26,
first_name: 'Adéla',
lastname: 'Tichá',
age: 26,
salary: 35000,
role: 'Support',
},
{
id: 27,
first_name: 'Vojtěch',
lastname: 'Havel',
age: 40,
salary: 55000,
role: 'Manager',
},
{
id: 28,
first_name: 'Simona',
lastname: 'Hrubá',
age: 32,
salary: 45000,
role: 'HR',
},
{
id: 29,
first_name: 'Robert',
lastname: 'Krátký',
age: 37,
salary: 65000,
role: 'Developer',
},
{
id: 30,
first_name: 'Monika',
lastname: 'Zelená',
age: 28,
salary: 45000,
role: 'Developer',
},
{
id: 31,
first_name: 'Karel',
lastname: 'Marek',
age: 41,
salary: 48000,
role: 'Analyst',
},
{
id: 32,
first_name: 'Petra',
lastname: 'Vávrová',
age: 29,
salary: 42000,
role: 'Support',
},
{
id: 33,
first_name: 'Adam',
lastname: 'Řezáč',
age: 34,
salary: 65000,
role: 'Developer',
},
{
id: 34,
first_name: 'Jana',
lastname: 'Holubová',
age: 31,
salary: 42000,
role: 'HR',
},
{
id: 35,
first_name: 'Miroslav',
lastname: 'Jelínek',
age: 43,
salary: 55000,
role: 'Manager',
},
{
id: 36,
first_name: 'Klára',
lastname: 'Štěpánková',
age: 27,
salary: 38000,
role: 'Support',
},
{
id: 37,
first_name: 'Daniel',
lastname: 'Doležal',
age: 36,
salary: 65000,
role: 'Developer',
},
{
id: 38,
first_name: 'Nikola',
lastname: 'Urbanová',
age: 30,
salary: 42000,
role: 'Designer',
},
{
id: 39,
first_name: 'Marek',
lastname: 'Šťastný',
age: 38,
salary: 48000,
role: 'Analyst',
},
{
id: 40,
first_name: 'Zuzana',
lastname: 'Kadlecová',
age: 29,
salary: 35000,
role: 'Support',
},
{
id: 41,
first_name: 'Jiří',
lastname: 'Moravec',
age: 45,
salary: 55000,
role: 'Manager',
},
{
id: 42,
first_name: 'Hana',
lastname: 'Beranová',
age: 33,
salary: 45000,
role: 'HR',
},
{
id: 43,
first_name: 'Michal',
lastname: 'Růžička',
age: 32,
salary: 65000,
role: 'Developer',
},
{
id: 44,
first_name: 'Andrea',
lastname: 'Kopecká',
age: 28,
salary: 38000,
role: 'Designer',
},
{
id: 45,
first_name: 'Radek',
lastname: 'Bureš',
age: 37,
salary: 48000,
role: 'Manager',
},
{
id: 46,
first_name: 'Denisa',
lastname: 'Havlíčková',
age: 26,
salary: 35000,
role: 'Support',
},
{
id: 47,
first_name: 'Patrik',
lastname: 'Pospíšil',
age: 34,
salary: 45000,
role: 'Developer',
},
{
id: 48,
first_name: 'Iveta',
lastname: 'Kratochvílová',
age: 31,
salary: 42000,
role: 'Designer',
},
{
id: 49,
first_name: 'Štěpán',
lastname: 'Janda',
age: 39,
salary: 65000,
role: 'Developer',
},
{
id: 50,
first_name: 'Gabriela',
lastname: 'Součková',
age: 30,
salary: 42000,
role: 'HR',
},
];
On gists
WeakMap / WeakSet
•
JavaScript
examples.js #
// https://javascript.plainenglish.io/memory-magic-in-javascript-why-weakmaps-and-weaksets-are-your-secret-weapon-for-high-performance-62562cc24dc5
// 1. Private Data Storage Inside Classes
const privateData = new WeakMap();
class BankAccount {
constructor(balance) {
privateData.set(this, { balance });
}
getBalance() {
return privateData.get(this).balance;
}
}
// 2. Caching Expensive Computations
const cache = new WeakMap();
function compute(obj) {
if (!cache.has(obj)) {
cache.set(obj, expensiveCalculation(obj));
}
return cache.get(obj);
}
// 3. Avoiding Memory Leaks in DOM-based Apps
const elementData = new WeakMap();
function attachData(el, data) {
elementData.set(el, data);
}
function getData(el) {
return elementData.get(el);
}
// 1. Tracking Objects Without Overhead
const processedItems = new WeakSet();
function process(item) {
if (processedItems.has(item)) return;
// Process the item
processedItems.add(item);
}
On gists
JavaScript
Optimize Complex Conditionals in JavaScript
index.js #
// https://blog.stackademic.com/how-to-optimize-complex-conditionals-in-javascript-0fcaf0add82a
const onButtonClick = (status) => {
if (status == 1) {
jumpTo('Index Page');
} else if (status == 2 || status == 3) {
jumpTo('Failure Page');
} else if (status == 4) {
jumpTo('Success Page');
} else if (status == 5) {
jumpTo('Cancel Page');
} else {
jumpTo('Other Actions');
}
};
// 1
// if => switch
const onButtonClick = (status) => {
switch (status) {
case 1:
jumpTo('Index Page');
break;
case 2:
case 3:
jumpTo('Failure Page');
break;
case 4:
jumpTo('Success Page');
break;
case 5:
jumpTo('Cancel Page');
break;
default:
jumpTo('Other Actions');
}
};
// ------------------------------------------
const onButtonClick = (status, identity) => {
if (identity == 'guest') {
if (status == 1) {
// logic for guest status 1
} else if (status == 2) {
// logic for guest status 2
}
// Additional logic for other statuses...
} else if (identity == 'master') {
if (status == 1) {
// logic for master status 1
}
// Additional logic for other statuses...
}
};
// 2
// interesting solution ;)
// nested if to map with keys where key mean concaten ifs..
const actions = new Map([
['guest_1', () => { /* logic for guest status 1 */ }],
['guest_2', () => { /* logic for guest status 2 */ }],
['master_1', () => { /* logic for master status 1 */ }],
['master_2', () => { /* logic for master status 2 */ }],
['default', () => { /* default logic */ }],
]);
const onButtonClick = (identity, status) => {
const action = actions.get(`${identity}_${status}`) || actions.get('default');
action();
};
// 3
// object with keys instead of use of ifs
const actions = {
'1': 'Index Page',
'2': 'Failure Page',
'3': 'Failure Page',
'4': 'Success Page',
'5': 'Cancel Page',
'default': 'Other Actions',
};
const onButtonClick = (status) => {
const action = actions[status] || actions['default'];
jumpTo(action);
};
On gists
Promise / Promise.withResolvers
•
JavaScript
example.js #
const { promise, resolve, reject } = Promise.withResolvers();
setTimeout(() => resolve('Done!'), 1000);
promise.then(console.log); // 'Done!'
function foo()
{
const {promise, resolve, reject} = Promise.withResolvers()
setTimeout(() => {
resolve('DONE')
}, 2000)
return promise
}
function foo2()
{
const {promise, resolve, reject} = withResolvers()
setTimeout(() => {
resolve('DONE 2')
}, 2500)
return promise
}
// polyfill
function withResolvers() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { promise, resolve, reject };
}
// Použití:
const { promise: aliasOnlyForTesting, resolve } = withResolvers();
(async() => {
const data = await foo()
console.log(data)
const data2 = await foo2()
console.log(data2)
})()
On gists
JavaScript
Lazy loading with IntersectionObserver
image-lazy-loading.js #
document.addEventListener('DOMContentLoaded', () => {
let lazyImages = document.querySelectorAll('.lazyload');
let observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => {
observer.observe(img);
});
});
On gists
JavaScript
All datatypes in JS for testing
datatypes.js #
// Copied from https://javascript.plainenglish.io/structuredclone-the-easiest-way-to-deep-clone-objects-in-javascript-c503b536266b
const testData = {
number: 123,
string: "test",
undefined: undefined,
null: null,
boolean: true,
object: { a: 1, b: { c: 2 } },
array: [1, 2, { d: 3 }],
function: function() { return "hello"; },
map: new Map([["key1", "value1"], ["key2", "value2"]]),
set: new Set([1, 2, 3]),
date: new Date(),
error: new Error("An error occurred"),
regex: /test/i,
domNode: document.createElement("div")
}
On gists
JavaScript
Enum - JS
enum.js #
enum Direction {
Up,
Down,
Left,
Right
}
const Colors = Object.freeze({
RED: Symbol("red"),
BLUE: Symbol("blue"),
GREEN: Symbol("green")
});
/**
* Enum for common colors.
* @readonly
* @enum {{name: string, hex: string}}
*/
const Colors = Object.freeze({
RED: { name: "red", hex: "#f00" },
BLUE: { name: "blue", hex: "#00f" },
GREEN: { name: "green", hex: "#0f0" }
});
function createEnum(values) {
const enumObject = {};
for (const val of values) {
enumObject[val] = val;
}
return Object.freeze(enumObject);
}
// { Up: 'Up', Down: 'Down', Left: 'Left', Right: 'Right' }
createEnum(['Up', 'Down', 'Left', 'Right']);
class Direction {
static Up = new Direction('Up');
static Down = new Direction('Down');
static Left = new Direction('Left');
static Right = new Direction('Right');
constructor(name) {
this.name = name;
}
toString() {
return `Direction.${this.name}`;
}
}
On gists
JavaScript
Toggle fn - closure in closure (fn returns fn)
toggle.js #
const toggle = (...list) =>
{
// To track the cycle.
let current = -1;
const length = list.length;
return function ()
{
// Increment current and used modulo to cycle back to the start.
current = (current + 1) % length;
// Returing the current element.
return list[current];
};
};
const toggleFunction = toggle("ON","OF");
console.log(toggleFunction()); // Prints "ON"
console.log(toggleFunction()); // Prints "OF"
console.log(toggleFunction()); // Prints "ON"
On gists
JavaScript
StructuredClone + set of all datatypes (@fatfish)
copy.js #
// https://javascript.plainenglish.io/structuredclone-the-easiest-way-to-deep-clone-objects-in-javascript-c503b536266b
const testData = {
number: 123,
string: "test",
undefined: undefined,
null: null,
boolean: true,
object: { a: 1, b: { c: 2 } },
array: [1, 2, { d: 3 }],
// function: function() { return "hello"; },
map: new Map([["key1", "value1"], ["key2", "value2"]]),
set: new Set([1, 2, 3]),
date: new Date(),
error: new Error("An error occurred"),
regex: /test/i,
// domNode: document.createElement("div")
}
const structuredCloneResult = structuredClone(testData)
console.log(structuredCloneResult)
/*
{
number: 123,
string: "test",
undefined: undefined,
null: null,
boolean: true,
object: { a: 1, b: { c: 2 } },
array: [1, 2, { d: 3 }],
function: undefined, // Functions are not cloned
map: Map { 'key1' => 'value1', 'key2' => 'value2' },
set: Set { 1, 2, 3 },
date: 2023-05-23T09:00:00.000Z,
error: Error: An error occurred,
regex: /test/i,
domNode: undefined // DOM nodes are not cloned
}
*/