JavaScript
31.4K subscribers
1.18K photos
10 videos
33 files
858 links
A resourceful newsletter featuring the latest and most important news, articles, books and updates in the world of #javascript ๐Ÿš€ Don't miss our Quizzes!

Let's chat: @nairihar
Download Telegram
CHALLENGE


const memoize = (fn) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn(...args);
cache.set(key, result);
return result;
};
};

let callCount = 0;

const expensiveMultiply = memoize((a, b) => {
callCount++;
return a * b;
});

console.log(expensiveMultiply(4, 5));
console.log(expensiveMultiply(4, 5));
console.log(expensiveMultiply(3, 7));
console.log(expensiveMultiply(4, 5));
console.log(`calls: ${callCount}`);
1โค3๐Ÿ‘2๐Ÿ”ฅ1
โค4๐Ÿ‘1๐Ÿ”ฅ1
CHALLENGE

class Registry {
static #instances = new Map();
static #count = 0;
static defaultTTL;
static maxSize;

static {
Registry.defaultTTL = 3600;
Registry.maxSize = 100;
Registry.#instances.set("__init__", { ts: 0 });
Registry.#count = Registry.#instances.size;
}

static register(key) {
if (Registry.#count >= Registry.maxSize) return false;
Registry.#instances.set(key, { ts: Registry.defaultTTL });
Registry.#count++;
return true;
}

static info() {
return `count=${Registry.#count}, ttl=${Registry.defaultTTL}, max=${Registry.maxSize}`;
}
}

Registry.register("service-a");
Registry.register("service-b");
console.log(Registry.info());
๐Ÿค”3โค1๐Ÿ”ฅ1
๐Ÿ‘€ VoidZero is Joining Cloudflare

One of the yearโ€™s big moves in JS tooling, as told by Evan himself. The company he founded to build Vite, Vitest, Rolldown, Oxc, etc. is joining Cloudflare. Heโ€™s candid about why (monetization is hard). Good news: all projects stay MIT-licensed, and Evan and co remain in charge.

Evan You
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ”ฅ2โค1๐Ÿ‘1
CHALLENGE

const handler = {
get(target, prop, receiver) {
if (prop in target) {
return Reflect.get(target, prop, receiver) * 2;
}
return `missing:${prop}`;
},
set(target, prop, value) {
if (typeof value !== "number") {
throw new TypeError("Only numbers allowed");
}
Reflect.set(target, prop, value + 10);
return true;
},
has(target, prop) {
return prop.startsWith("x") ? false : prop in target;
},
};

const store = new Proxy({ xray: 5, zoom: 8 }, handler);

store.nova = 3;
console.log(store.xray);
console.log(store.nova);
console.log(store.ghost);
console.log("zoom" in store);
console.log("xray" in store);
โค1
๐Ÿ˜ฎ Geometric.js: A Library for Doing Geometry

Created by someone who works on graphics for the NYT, this elegant library lets you work with polygons, bounding boxes, reflection, interpolation, rotation, and the like (examples). Does one polygon intersect with another? Thereโ€™s a function for that.

Harry Stevens (The New York Times)
Please open Telegram to view this post
VIEW IN TELEGRAM
โค1๐Ÿ”ฅ1
CHALLENGE

class BankAccount {
#balance;
#transactionLog = [];

constructor(initialBalance) {
this.#balance = initialBalance;
}

deposit(amount) {
this.#balance += amount;
this.#transactionLog.push(`+${amount}`);
return this;
}

withdraw(amount) {
if (amount > this.#balance) throw new Error("Insufficient funds");
this.#balance -= amount;
this.#transactionLog.push(`-${amount}`);
return this;
}

get summary() {
return `Balance: ${this.#balance} | Txns: ${this.#transactionLog.join(", ")}`;
}
}

const account = new BankAccount(100);
account.deposit(50).deposit(25).withdraw(30);
console.log(account.summary);
console.log(account.hasOwnProperty("#balance"));
โค2๐Ÿ‘1
๐Ÿค” Oxide Computer Company's Mitos ASCII Tool (above) converts images into ASCII text illustrations and animations, by way of a built-in livecoding environment (built upon the fantastic play.core).
Please open Telegram to view this post
VIEW IN TELEGRAM
โค7
CHALLENGE


class Vehicle {
#speed = 0;

constructor(type, maxSpeed) {
this.type = type;
this.maxSpeed = maxSpeed;
}

accelerate(amount) {
this.#speed = Math.min(this.#speed + amount, this.maxSpeed);
return this;
}

getStatus() {
return `${this.type} going ${this.#speed}/${this.maxSpeed} km/h`;
}
}

class ElectricVehicle extends Vehicle {
#battery;

constructor(type, maxSpeed, battery) {
super(type, maxSpeed);
this.#battery = battery;
}

accelerate(amount) {
this.#battery -= amount * 0.5;
return super.accelerate(amount);
}

getStatus() {
return `${super.getStatus()} | Battery: ${this.#battery}%`;
}
}

const ev = new ElectricVehicle("Tesla", 250, 100);
ev.accelerate(80).accelerate(200);
console.log(ev.getStatus());
console.log(ev instanceof Vehicle);
console.log(ev.constructor === ElectricVehicle);
โค6๐Ÿ‘1๐Ÿ”ฅ1๐Ÿคฉ1
๐Ÿ˜ฑ
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿค”7๐Ÿ‘4
CHALLENGE


const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x ** 2;
const negate = x => -x;

const composed = compose(negate, square, addTen, double);
const piped = pipe(negate, square, addTen, double);

const val = 3;

console.log(composed(val)); // compose: right-to-left
console.log(piped(val)); // pipe: left-to-right
โค2๐Ÿ‘2
โค8
CHALLENGE

const company = {
name: "TechCorp",
ceo: {
name: "Morgan",
address: {
city: "Berlin"
}
},
getRevenue: () => 5_000_000
};

const cfoCity = company?.cfo?.address?.city ?? "Unknown";
const ceoCity = company?.ceo?.address?.city ?? "Unknown";
const ceoCountry = company?.ceo?.address?.country ?? "N/A";
const revenue = company?.getRevenue?.() ?? 0;
const employees = company?.getEmployees?.() ?? "No data";

console.log(cfoCity, ceoCity, ceoCountry, revenue, employees);
โค1
CHALLENGE

const data = [
{ name: "Zara", score: 88 },
{ name: "Liam", score: 95 },
{ name: "Maya", score: 88 },
{ name: "Omar", score: 72 },
{ name: "Nina", score: 95 },
];

const sorted = [...data].sort((a, b) =>
b.score !== a.score
? b.score - a.score
: a.name.localeCompare(b.name)
);

console.log(sorted.map(p => `${p.name}:${p.score}`).join(", "));
โค5๐Ÿค”1