JavaScript
31.3K subscribers
1.21K photos
10 videos
33 files
884 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 config = { retries: 0, timeout: null, name: '' };
const a = config.retries || 5;
const b = config.timeout ?? 10;
const c = config.name || 'default';
const d = config.missing?.value ?? 'fallback';
let calls = 0;
const sideEffect = () => { calls++; return true; };
const e = config.retries && sideEffect();
console.log(a, b, c, d, e, calls);
4👍2🔥2
CHALLENGE

function tag(strings, ...values) {
return strings.raw.join('|') + '=' + values.reduce((sum, v) => sum + v, 0);
}
const x = 5;
const y = 10;
console.log(tag`Sum\n${x}and${y}end`);
4👍1
🔥43👍2
CHALLENGE

const order = [];
const log = (s) => order.push(s);

log('start');

Promise.resolve().then(() => {
log('p1');
return Promise.resolve();
}).then(() => log('p1-2'));

async function foo() {
log('foo-start');
await null;
log('foo-end');
}

foo();

Promise.resolve().then(() => log('p2'));

log('end');

setTimeout(() => console.log(order.join(' ')), 0);
4🔥1
CHALLENGE

const a = [] + {};
const b = {} + [];
const c = 1 + '1' - 1;
const d = '5' + 3 - 2;
const e = true + true;
console.log(a, b, c, d, e);
👍5🤣32🔥1
CHALLENGE

let arr = [];
for (let i = 0; i < 3; i++) {
if (i === 1) {
let i = 10;
arr.push(i);
continue;
}
arr.push(i);
}
console.log(arr.join('-'));
4🔥4👍2
What is the output?
Anonymous Quiz
19%
0-10-3
60%
0-10-2
12%
0-1-2
10%
0-1-1
5🤔3
CHALLENGE

class Config {
constructor(options = {}) {
this.retries = options.retries ?? 3;
this.timeout = options.timeout ?? 1000;
}
}
const cfg1 = new Config({ retries: 0, timeout: null });
const cfg2 = new Config({ retries: undefined, timeout: false });
cfg1.retries ??= 99;
cfg2.timeout ??= 99;
console.log(cfg1.retries, cfg1.timeout, cfg2.retries, cfg2.timeout);
2🔥1
👍1
CHALLENGE

const Loggable = {
log() { return `[${this.constructor.name}] ${this.toString()}`; }
};

class Base {
toString() { return 'Base instance'; }
}

Object.setPrototypeOf(Base.prototype, Loggable);

class Derived extends Base {
toString() { return 'Derived instance'; }
}

const b = new Base();
const d = new Derived();

console.log(b.log(), d.log(), Object.getPrototypeOf(Derived.prototype) === Base.prototype);
5🔥1
CHALLENGE

function 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 calls = 0;
const add = memoize((a, b) => { calls++; return a + b; });

const r1 = add(1, 2);
const r2 = add(2, 1);
const r3 = add(1, 2);
console.log(r1, r2, r3, calls);
2
What is the output?
Anonymous Quiz
30%
3 3 3 2
29%
3 3 3 1
25%
3 3 3 3
16%
3 3 3 0
🔥21
👀 Next.js 16.3 Released

The newly expanded Next.js team (now including Dan Abramov and 𝕏 Pete Hunt!) has dropped the latest version of the popular React framework, complete with faster builds, optional TypeScript 7 type checking, faster SSR, Instant Navigations, AI improvements, and more.

The Next.js Team
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔31
CHALLENGE

const str = "2024-01-15";
const result = str.replace(/(\d+)-(\d+)-(\d+)/, "$3/$2/$1");
const s2 = "abc".padStart(6, "12");
const s3 = [..."hello"].reverse().join("");
console.log(result, s2, s3);
👍41
↗️ TanStack Charts: A New Chart Grammar Option

In the past few weeks, TanStack has been rapidly iterating on a new, framework-neutral way to declaratively specify a large number of chart-related visualizations in JavaScript. Output renders to SVG or canvas and can be styled as you wish. Here's a comparison against other established options.

TanStack
Please open Telegram to view this post
VIEW IN TELEGRAM
7👍2
CHALLENGE

class Money {
#amount;
constructor(amount) { this.#amount = amount; }
[Symbol.toPrimitive](hint) {
if (hint === 'number') return this.#amount;
if (hint === 'string') return `$${this.#amount}`;
return `Money(${this.#amount})`;
}
}
const m = new Money(42);
console.log(`${m}`, m + 8, m == 42);
5🤩3