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๐4
What is the output?
Anonymous Quiz
14%
true
30%
Balance: 175 | Txns: +50, +25, -30 false
33%
Balance: 145 | Txns: +50, +25, -30
23%
Balance: 145 | Txns: +50, +25, -30 false
๐ฅ6
Please open Telegram to view this post
VIEW IN TELEGRAM
โค10
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);โค8๐ฅ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
18%
true false false true true
48%
true true false true true
24%
true true true false true
11%
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);
๐ฅ1
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
31%
20 90 true false 240
40%
10 15 true true 40
16%
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