JavaScript
30.9K subscribers
1.23K photos
10 videos
33 files
904 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
📍 Maplair: A Batteries-Included, Tree-Shakeable Fork of Leaflet

Still in alpha since last year, one of Leaflet's contributors has forked it, rolling in the 2.0 work plus rotation, fullscreen, search, heatmaps and more – all tree-shakeable.

Simon Legner
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤2👍1🤔1
CHALLENGE

const a = [] + [];
const b = [] + {};
const c = {} + [];
const d = 1 + "1" - 1;
const e = "5" - "2" + "3";
const f = [1, 2] == "1,2";
console.log(a, b, c, d, e, f);
❤2🔥2🤩1
🖼️ JPEG XL: The modern image format is now supported by all major browsers, with Firefox 158 the latest to enable it by default. Jake Archibald pits it against AVIF in this extensive review. What I find amazing is what it's able to render in under 100 bytes.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤2🔥2🤣2
CHALLENGE

const base = { greet() { return 'hi'; } };
const obj = Object.create(base, {
x: { value: 1, enumerable: true },
y: { value: 2, enumerable: false }
});
const spread = { ...obj };
const assigned = Object.assign({}, obj);
console.log(
spread.x,
spread.y,
spread.greet,
assigned.y,
Object.keys(spread).length
);
CHALLENGE

const wm = new WeakMap();
class Counter {
#id;
static #nextId = 0;
constructor() {
this.#id = Counter.#nextId++;
wm.set(this, { count: 0, id: this.#id });
}
inc() {
const data = wm.get(this);
data.count++;
return data.count;
}
}
const a = new Counter();
const b = new Counter();
a.inc(); a.inc();
b.inc();
console.log(`${a.inc()} ${b.inc()} ${wm.has(a)} ${wm.get(a).id} ${wm.get(b).id}`);
❤1👍1
CHALLENGE

const createCounterModule = (() => {
let instances = 0;
return function() {
instances++;
let count = 0;
return {
increment() { count++; return count; },
id: instances
};
};
})();

const a = createCounterModule();
const b = createCounterModule();
console.log(a.increment(), a.increment(), b.increment(), a.id, b.id);

export {};
❤3
CHALLENGE

const base = {
greet() { return `Hello, ${this.name}`; }
};
const mid = Object.create(base);
mid.name = 'Mid';
const child = Object.create(mid);
child.name = 'Child';

console.log(
child.greet(),
mid.greet(),
Object.getPrototypeOf(child) === mid,
child.hasOwnProperty('greet')
);
❤3
CHALLENGE

class StringBuilder {
#parts = [];
append(s) {
this.#parts.push(s);
return this;
}
toString() {
return this.#parts.join('');
}
}

const sb = new StringBuilder().append('a').append('b').append('c');
console.log(`${sb}-${sb.append('d')}`);
❤1👍1
What is the output?
Anonymous Quiz
35%
abc-abcd
30%
abc-abc
29%
abcd-abcd
6%
abc-d
❤2🔥2🤔2👍1
CHALLENGE

function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) return fn.apply(this, args);
return (...more) => curried.apply(this, [...args, ...more]);
};
}

function multiply(a, b, c = 1, ...rest) {
return a * b * c * (rest.reduce((s, n) => s + n, 0) || 1);
}

const curried = curry(multiply);
console.log(curried(2)(3), multiply.length);
👍5❤2🔥1🤔1
What is the output?
Anonymous Quiz
22%
NaN 2
42%
6 3
30%
6 2
6%
7 2
❤1👍1
CHALLENGE

const target = { a: 1, b: 2 };
const handler = {
get(obj, prop, receiver) {
if (prop in obj) {
return Reflect.get(obj, prop, receiver);
}
return `missing:${String(prop)}`;
},
set(obj, prop, value, receiver) {
if (typeof value === 'number') {
return Reflect.set(obj, prop, value * 2, receiver);
}
return Reflect.set(obj, prop, value, receiver);
}
};
const p = new Proxy(target, handler);
p.c = 5;
p.d = 'hello';
console.log(p.a, p.c, p.d, p.z);
❤3👍1🤔1
CHALLENGE

const sym = Symbol('id');
const target = { a: 1, [sym]: 2 };
Reflect.defineProperty(target, 'b', { value: 3, enumerable: false });

const handler = {
get(obj, prop, receiver) {
if (prop === 'a') return Reflect.get(obj, prop, receiver) * 10;
return Reflect.get(obj, prop, receiver);
}
};

const proxy = new Proxy(target, handler);
console.log(proxy.a, proxy.b, Reflect.ownKeys(target).length, Object.keys(target).length);
👍2🔥1