JavaScript
32.2K subscribers
1.07K photos
10 videos
33 files
748 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
πŸ‡―πŸ‡΅ Fancy writing JavaScript in Japanese (above)? Say こんにけは to KokoScript.
🀣9❀5πŸ‘2πŸ”₯1
CHALLENGE

const user = { name: 'Sarah', age: 28 };
const greeting = 'Hello';
const template = `${greeting}, ${user.name}! You are ${user.age} years old.`;

function createMessage(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] ? `[${values[i]}]` : '');
}, '');
}

const tagged = createMessage`Welcome ${user.name}, age: ${user.age}!`;
console.log(template);
console.log(tagged);
❀4πŸ”₯1
🀩 The Inner Workings of JavaScript Source Maps

Ever wondered how devtools can magically turn mangled, minified JavaScript back into readable source while debugging? Zero magic; that’s a source map doing its job. But how do source maps actually work under the hood?

Manoj Vivek
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3πŸ‘3πŸ”₯1
CHALLENGE

const wm = new WeakMap();
const obj1 = { name: 'first' };
const obj2 = { name: 'second' };

wm.set(obj1, 'value1');
wm.set(obj2, 'value2');

const keys = [];
for (let key of wm) {
keys.push(key);
}

console.log(keys.length);
console.log(wm.has(obj1));
console.log(wm.get(obj2));
🀣4❀2πŸ‘1
πŸ˜‰ The Talk Videos from CascadiaJS 2025

CascadiaJS took place a month ago and the talk videos have been gradually rolling out onto YouTube. You can learn more about TanStack with Jack Herrington, the origin story of JavaScript with Annie Sexton, the Web Monetization API with Ioana Chiorean, and more.

CascadiaJS
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘3❀1πŸ”₯1
CHALLENGE

const target = { name: 'Sarah', age: 25 };
const handler = {
get(obj, prop) {
if (prop === 'info') {
return `${obj.name} is ${obj.age}`;
}
return Reflect.get(obj, prop);
},
has(obj, prop) {
return prop !== 'age' && Reflect.has(obj, prop);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.info);
console.log('age' in proxy);
console.log('name' in proxy);
🎹 Perspective 4.0: High Performance Analytics and Data Visualization Component

Originally built by JP Morgan, this data visualization component, built in C++ and compiled to WebAssembly, is well-suited for large and real-time streaming datasets. The demo on the homepage lets you try visualization types at up to 1000 changes per second. v4.0 sees the project move to the OpenJS Foundation.

OpenJS Foundation
Please open Telegram to view this post
VIEW IN TELEGRAM
❀1πŸ‘1
CHALLENGE

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

queueMicrotask(() => console.log('4'));

setTimeout(() => {
console.log('5');
Promise.resolve().then(() => console.log('6'));
}, 0);

console.log('7');
❀1
❀6πŸ‘1πŸ”₯1
πŸ‘€ In Your URL is Your State, Ahmad Alfy looks at the 'overlooked power' and elegance of using the URL's various components for representing state.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯6
CHALLENGE

const target = { name: 'Sarah', age: 25 };

const handler = {
get(obj, prop) {
if (prop in obj) {
return obj[prop];
}
return `Property '${prop}' not found`;
},
set(obj, prop, value) {
obj[prop] = value.toString().toUpperCase();
return true;
}
};

const proxy = new Proxy(target, handler);
proxy.city = 'boston';
console.log(proxy.name);
console.log(proxy.city);
console.log(proxy.country);
πŸ‘€ Vibe Coding β‰  AI-Assisted Coding

Most people don't know the difference...

Laszlo Horvath
Please open Telegram to view this post
VIEW IN TELEGRAM
🀣17❀4πŸ‘4
CHALLENGE

const Flyable = {
fly() { return 'flying'; }
};

const Swimmable = {
swim() { return 'swimming'; }
};

function applyMixins(target, ...mixins) {
mixins.forEach(mixin => {
Object.assign(target.prototype, mixin);
});
}

class Bird {}
class Fish {}

applyMixins(Bird, Flyable, Swimmable);
applyMixins(Fish, Swimmable);

const eagle = new Bird();
const shark = new Fish();

console.log(eagle.swim());
console.log(shark.fly?.() || 'undefined method');
❀2πŸ”₯1
❀4πŸ€”3πŸ‘1🀣1
✌️ JavaScript Engines Zoo: Learn About Over 100 JS Engines

I’m a sucker for a big table of data and this is about as big as it gets when it comes to JavaScript engines. See how various engines compare, sort them by performance, or click on an engine’s name to learn more about its development, history, and end users. The project’s repo also has Dockerfiles for trying each of them out.

Ivan Krasilnikov
Please open Telegram to view this post
VIEW IN TELEGRAM
❀6πŸ‘3
✌️ This week's TC39 meeting: The Ecma TC39 committee (the group behind the design of ECMAScript / JavaScript) met up for the 111th time this week (seen above) to discuss language proposals. The meeting notes won't be published for a few weeks, but several proposals did see some progress:

- Iterator Sequencing progressed to stage 4.

- Joint Iteration, Iterator Join, and Await dictionary of Promises go stage 2.7.

- The Intl Unit Protocol also reached stage 1 to provide a way to annotate quantities with the units being measured.

- Typed Array Find Within progressed to stage 1. Think a native indexOf-type method for TypedArrays.

Note: Learn more about what the TC39 stages mean here.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4πŸ‘2πŸ”₯2