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
โค3๐ฅ2
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"));๐4โค3
What is the output?
Anonymous Quiz
14%
true
31%
Balance: 175 | Txns: +50, +25, -30 false
33%
Balance: 145 | Txns: +50, +25, -30
22%
Balance: 145 | Txns: +50, +25, -30 false
๐ฅ5
Please open Telegram to view this post
VIEW IN TELEGRAM
โค9
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);
โค8๐2๐ฅ1๐คฉ1
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
โค5๐2๐ฅ1
โค9
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);โค7๐ฅ2
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(", "));
โค10๐ค1
CHALLENGE
class Session {
#id;
constructor(id) {
this.#id = id;
}
getId() {
return this.#id;
}
}
const activeSessions = new WeakSet();
const s1 = new Session("alpha");
const s2 = new Session("beta");
let s3 = new Session("gamma");
activeSessions.add(s1);
activeSessions.add(s2);
activeSessions.add(s3);
console.log(activeSessions.has(s1));
console.log(activeSessions.has(s3));
activeSessions.delete(s2);
console.log(activeSessions.has(s2));
try {
activeSessions.add("invalid");
} catch (e) {
console.log(e instanceof TypeError);
}
console.log(activeSessions.has(s1));
โค6๐ฅ6
What is the output?
Anonymous Quiz
16%
true false false true true
49%
true true false true true
24%
true true true false true
10%
true true false false true
โค5๐ฅ3
CHALLENGE
const tag = (strings, ...values) => {
return strings.reduce((result, str, i) => {
const val = values[i - 1];
const transformed =
typeof val === "number" ? `[${val ** 2}]` : `{${val?.toUpperCase()}}`;
return result + transformed + str;
});
};
const name = "nova";
const level = 3;
const score = 97;
const output = tag`Player: ${name} | Level: ${level} | Score: ${score}`;
console.log(output);
CHALLENGE
const handler = {
get(target, prop, receiver) {
if (prop in target) {
return Reflect.get(target, prop, receiver) * 2;
}
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
if (typeof value !== "number") return false;
return Reflect.set(target, prop, value * 3, receiver);
},
has(target, prop) {
return prop.startsWith("x") && Reflect.has(target, prop);
},
};
const obj = new Proxy({ x1: 10, y1: 20 }, handler);
obj.x2 = 15;
obj.y2 = 40;
console.log(obj.x1);
console.log(obj.x2);
console.log("x1" in obj);
console.log("y1" in obj);
console.log(obj.y2);โค1๐ฅ1
What is the output?
Anonymous Quiz
29%
20 90 true false 240
41%
10 15 true true 40
17%
20 45 false true 80
13%
20 30 true false 120
Flow is Meta's mature typed dialect of JavaScript, and over the years its syntax has converged closely with TypeScript's. This post walks through where the two now differ: Flow's stricter defaults reject several crash-prone patterns TypeScript's strict mode accepts, and it adds features of its own, like exhaustive match expressions.
George Zahariev (Meta)
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐ฅ2