JavaScript
31.9K subscribers
1.01K photos
9 videos
33 files
692 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

function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] ? `<span>${values[i]}</span>` : '';
return result + str + value;
}, '');
}

const language = 'JavaScript';
const years = 10;

const result = highlight`I have been coding in ${language} for ${years} years`;
console.log(result);
❀9πŸ‘6
CHALLENGE

function createCounter() {
let count = 0;

return {
increment() {
count++;
return count;
},
decrement() {
count--;
return count;
},
getValue() {
return count;
}
};
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1.increment();
counter1.increment();
counter2.increment();
counter1.decrement();

console.log(counter1.getValue() + counter2.getValue());
πŸ‘6❀5🀣3πŸ”₯1
What is the output?
Anonymous Quiz
19%
1
24%
undefined
16%
NaN
42%
2
πŸ‘9πŸ€”1
πŸ“– Exploring JavaScript (ES2025 Edition)

Dr. Axel is back with his latest book covering all things relating to modern JavaScript at the language level (think built-in data types, modularity, how objects, classes and promises work, etc.). As with all of Axel's books, it’s available to buy but also to read online in HTML form for free. He’s also produced a set of flashcards to help you learn language features in both HTML and Anki forms.

Dr. Axel Rauschmayer
πŸ”₯4❀3πŸ‘2
CHALLENGE

class ShoppingCart {
constructor() {
if (ShoppingCart.instance) {
return ShoppingCart.instance;
}

this.items = [];
ShoppingCart.instance = this;
}

addItem(item) {
this.items.push(item);
}

getItems() {
return [...this.items];
}
}

const cart1 = new ShoppingCart();
const cart2 = new ShoppingCart();

cart1.addItem('Book');
cart2.addItem('Laptop');

console.log(cart1.getItems());
πŸ‘6πŸ€”2❀1πŸ”₯1
πŸ˜‰ Compiling JavaScript Ahead-of-Time

The creator of the Porffor JavaScript compiler talks about the various ways to make JavaScript faster to execute, before digging into Porffor’s approach.

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

const templateFn = (strings, ...values) => {
return strings.reduce((result, str, i) => {
const value = values[i] !== undefined ?
(typeof values[i] === 'number' ? values[i] * 2 : values[i]) : '';
return result + str + value;
}, '');
};

const num = 5;
const str = 'world';

const result = templateFn`Hello ${str}, ${num} times ${'!'}`;
console.log(result);
πŸ‘5❀2
πŸ€” <syntax-highlight>: A Custom Element for Syntax Highlighting

A custom element that uses the CSS Custom Highlight API (supported by most modern browsers) for syntax highlighting so you don’t need to retreat to the age-old method of wrapping every token in spans.

AndrΓ© Ruffert
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5❀3πŸ”₯1
CHALLENGE

function processConfig(config) {
const settings = {
timeout: config.timeout ?? 1000,
retries: config.retries ?? 3,
logging: config.logging ?? false,
debug: config.debug || true
};

return settings;
}

const userConfig = {
timeout: 0,
retries: null,
logging: false,
debug: false
};

console.log(processConfig(userConfig));
πŸ‘8❀1
CHALLENGE

const createMathOps = (base) => {
return {
add: (x) => base + x,
multiply: (x) => base * x
};
};

const createAdvancedMathOps = (base) => {
const basicOps = createMathOps(base);
return {
...basicOps,
square: () => basicOps.multiply(base),
addThenSquare: (x) => {
const added = basicOps.add(x);
return added * added;
}
};
};

const calculator = createAdvancedMathOps(5);
console.log(calculator.addThenSquare(3));
πŸ‘7❀1
What is the output?
Anonymous Quiz
38%
64
18%
8
31%
64
13%
25
🀣21πŸ€”17❀4
CHALLENGE

const obj = { name: 'Alice', age: 30 };  
const handler = {
get(target, prop) {
return prop in target ? target[prop] : `Property '${prop}' doesn't exist`;
}
};

const proxy = new Proxy(obj, handler);

const descriptors = Object.getOwnPropertyDescriptors(obj);
Reflect.defineProperty(obj, 'city', {
value: 'New York',
enumerable: false
});

console.log(proxy.city, proxy.country);
❀3πŸ”₯2
πŸ€” The Roadmap to AdonisJS 7

Adonis is a popular TypeScript-first 'batteries included' web framework with a rich set of features, and its developers say they’re β€œshifting gears” and stepping up with more frequent major releases. v7 promises a lot, including Node.js diagnostic channel support, a type-safe URL builder, a new encryption layer, first-class support for notifications and TanStack Query, plus more. You’re encouraged to give your feedback here.

Romain Lanz
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ”₯3πŸ‘2
CHALLENGE

const text = 'Today is 2023-12-31 and tomorrow is 2024-01-01';
const dateRegex = /(\d{4})-(\d{2})-(\d{2})/g;

let result = '';
let match;

while ((match = dateRegex.exec(text)) !== null) {
const [fullMatch, year, month, day] = match;
result += `${day}/${month}/${year.slice(2)} `;
}

console.log(result.trim());
❀5πŸ‘2
❀4πŸ€”4πŸ‘1