JavaScript
31.3K subscribers
1.2K photos
10 videos
33 files
871 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 inventory = [
{ name: "sword", type: "weapon", power: 85 },
{ name: "shield", type: "armor", power: 60 },
{ name: "bow", type: "weapon", power: 72 },
{ name: "helmet", type: "armor", power: 45 },
{ name: "dagger", type: "weapon", power: 91 },
];

const result = inventory
.filter(item => item.type === "weapon")
.map(item => ({ ...item, power: item.power * 1.1 }))
.sort((a, b) => b.power - a.power)
.reduce((acc, item, index) => {
acc[index === 0 ? "best" : "rest"] ??= [];
if (index === 0) acc.best = item.name;
else acc.rest.push(item.name);
return acc;
}, {});

console.log(result.best, result.rest);
โค2
๐Ÿ˜‚
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿคฃ14โค4๐Ÿ‘3๐Ÿ”ฅ2
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");
}
return Reflect.set(target, prop, value * 10);
},
has(target, prop) {
return prop.startsWith("x") ? false : prop in target;
},
};

const store = new Proxy({ xRay: 5, score: 3 }, handler);

store.level = 4;

console.log(store.xRay);
console.log(store.score);
console.log(store.level);
console.log("xRay" in store);
console.log("score" in store);
console.log(store.missing);
๐Ÿ‘3โค2๐Ÿ”ฅ1
๐Ÿ˜†
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿคฃ11๐Ÿคฉ5โค4
CHALLENGE

const inventory = {
warehouse: {
shelves: [
{ id: 'A1', items: ['bolts', 'nuts', 'washers'] },
{ id: 'B2', items: ['hammers', 'wrenches'] },
],
manager: { name: 'Carlos', shift: 'night' },
},
};

const {
warehouse: {
shelves: [{ items: [firstItem, , thirdItem] }, { id: shelfId }],
manager: { name, shift = 'day' },
},
} = inventory;

console.log(`${name} | ${shift} | ${shelfId} | ${firstItem} | ${thirdItem}`);
๐Ÿคฃ4โค2๐Ÿ‘1
CHALLENGE

async function fetchData(id) {
if (id <= 0) throw new Error("Invalid ID");
return { id, value: id * 10 };
}

async function process() {
const results = await Promise.allSettled([
fetchData(1),
fetchData(-1),
fetchData(3),
]);

results.forEach(({ status, value, reason }) => {
if (status === "fulfilled") {
console.log(`โœ… ${value.id}: ${value.value}`);
} else {
console.log(`โŒ ${reason.message}`);
}
});
}

process();
โค5๐Ÿ”ฅ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 * x;
const negate = x => -x;

const transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(negate, square, addTen, double);

console.log(transform1(3));
console.log(transform2(3));
โค3๐Ÿ”ฅ2๐Ÿ‘1
What is the output?
Anonymous Quiz
23%
-256 -256
52%
-256 38
17%
256 -256
8%
-256 32
๐Ÿค”2๐Ÿ‘1๐Ÿ”ฅ1
CHALLENGE


const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([3, 4, 5, 6, 7]);

const union = new Set([...setA, ...setB]);

const intersection = new Set([...setA].filter(x => setB.has(x)));

const differenceAB = new Set([...setA].filter(x => !setB.has(x)));

const symmetricDiff = new Set(
[...setA, ...setB].filter(x => !(setA.has(x) && setB.has(x)))
);

console.log([...union].join(','));
console.log([...intersection].join(','));
console.log([...differenceAB].join(','));
console.log([...symmetricDiff].join(','));
๐Ÿ”ฅ3โค2๐Ÿ‘1
๐Ÿ˜ฎ Vite+ Beta: A Web Dev Toolchain Behind One Command

Vite+ is the Vite teamโ€™s โ€˜unified toolchainโ€™ that brings Vite, Vitest, Oxlint, and similar tools together under a single vp command, whether for running a dev server, tests, formatting, or bundling.

VoidZero

๐Ÿ’ก Vite+ was originally intended to be a commercial project to fund work on Vite and related projects, but was open sourced under the MIT license earlier this year.
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘4โค3๐Ÿ”ฅ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 transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(negate, square, addTen, double);

console.log(transform1(3));
console.log(transform2(3));
โค1๐Ÿ”ฅ1๐Ÿคฉ1
What is the output?
Anonymous Quiz
19%
-1024 38
45%
-256 28
30%
-256 38
6%
-256 38
๐Ÿ‘3โค1๐Ÿคฉ1๐Ÿคฃ1
๐Ÿ˜ƒ Wordgard: A New Rich Text Editor Library from ProseMirror's Creator

With Eloquent JavaScript and ProseMirror under his belt, not many people know more about JavaScript and making good editor controls than Marijn. Modular, supports collaborative editing, and thoughtfully built. Live demo and how to get started.

Marijn Haverbeke
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐Ÿ”ฅ2
๐ŸคŸ Node.js 26.4 Adds Package Maps

A minor release whose headline feature is the (experimental) implementation of package maps (which let Node resolve packages from a static JSON file rather than walking node_modules). Matteo Collinaโ€™s node:vfs subsystem also begins to make an appearance.

Antoine du Hamel
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘5โค3๐Ÿ”ฅ1
CHALLENGE

class Pipeline {
#value;
#steps = [];

constructor(value) {
this.#value = value;
}

map(fn) {
this.#steps.push({ type: 'map', fn });
return this;
}

filter(fn) {
this.#steps.push({ type: 'filter', fn });
return this;
}

execute() {
return this.#steps.reduce((acc, step) => {
if (step.type === 'map') return acc.map(step.fn);
if (step.type === 'filter') return acc.filter(step.fn);
return acc;
}, this.#value);
}
}

const result = new Pipeline([1, 2, 3, 4, 5, 6])
.filter(x => x % 2 === 0)
.map(x => x ** 2)
.filter(x => x > 10)
.map(x => x - 1)
.execute();

console.log(result);
๐Ÿ‘3โค1๐Ÿ”ฅ1