JavaScript
31.9K subscribers
1.02K photos
9 videos
33 files
699 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
Is there a difference between the previous code (red) and the new one (green) ?

Actually, there is 35second difference 😠

The previous code was, on every loop, creating a new object, always deallocating and reallocating memory, while the second example creates one object (a cache) and save each item into it.

Eduard KrivΓ‘nek
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘10πŸ”₯4❀3
CHALLENGE

class EventBus {
constructor() {
this.events = new Map();
}

on(event, callback) {
if (!this.events.has(event)) {
this.events.set(event, []);
}
this.events.get(event).push(callback);
}

emit(event, data) {
if (this.events.has(event)) {
this.events.get(event).forEach(callback => callback(data));
}
}
}

const bus = new EventBus();
bus.on('user', name => console.log(`Hello ${name}`));
bus.on('user', name => console.log(`Welcome ${name}`));
bus.emit('user', 'Sarah');
bus.emit('admin', 'John');
❀3πŸ€”2
🀟 How We Migrated Our Rush.js Monorepo to Node Type Stripping

Since v23.6 (and in LTS since v22.18.0), Node has supported running (most) TypeScript code by stripping the types out first. The Calm team was excited about the potential for improving productivity and DX, and set a migration in process. Here’s a look at the challenges encountered and what the end results were.

Stuart Dotson (Calm)
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯5❀2πŸ‘1
CHALLENGE

const original = { a: 1, b: { c: 2 } };
const shallow = { ...original };
const deep = JSON.parse(JSON.stringify(original));

shallow.a = 10;
shallow.b.c = 20;

deep.a = 100;
deep.b.c = 200;

const frozen = Object.freeze({ x: 1, y: { z: 2 } });
frozen.x = 99;
frozen.y.z = 99;

console.log(original.a, original.b.c, frozen.x, frozen.y.z);
❀2πŸ”₯2
❀4πŸ‘2
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4πŸ‘2πŸ”₯2πŸ€”2
CHALLENGE

async function fetchData() {
console.log('1');
return Promise.resolve('data');
}

async function processData() {
console.log('2');
const result = await fetchData();
console.log('3');
return result;
}

console.log('4');
processData().then(() => console.log('5'));
console.log('6');
❀6πŸ€”3πŸ‘2
πŸ‘‘ Cronicle: Cron with a Web Front End

Describing itself as β€˜a fancy cron replacement’, Cronicle is a distributed task scheduler and runner, built around a Node app with a web based UI. GitHub repo.

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

const arr = new Array(1000000).fill(0).map((_, i) => i);
const results = [];

function method1() {
return arr.filter(x => x % 2 === 0).map(x => x * 2).slice(0, 3);
}

function method2() {
const result = [];
for (let i = 0; i < arr.length && result.length < 3; i++) {
if (arr[i] % 2 === 0) {
result.push(arr[i] * 2);
}
}
return result;
}

console.log(method1().join(','));
console.log(method2().join(','));
What is the output?
Anonymous Quiz
13%
0,2,4
59%
0,4,8 0,4,8
18%
2,4,6
10%
0,4,8
❀1πŸ‘1πŸ”₯1
😈 Sam Rose has put together a fantastic illustrated introduction to Big O notation, along with JavaScript examples. If you've ever wondered what O(1), O(log n), etc. mean, this is a great primer.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀8πŸ‘4πŸ”₯1
CHALLENGE

const obj = { a: 1, b: { c: 2 } };
const frozen = Object.freeze(obj);
frozen.a = 99;
frozen.b.c = 88;
frozen.d = 77;

const sealed = Object.seal({ x: 10, y: 20 });
sealed.x = 30;
sealed.z = 40;
delete sealed.y;

console.log(obj.a, obj.b.c, obj.d);
console.log(sealed.x, sealed.y, sealed.z);
❀1
CHALLENGE

class StateMachine {
constructor() {
this.state = 'idle';
this.transitions = {
idle: { start: 'running' },
running: { pause: 'paused', stop: 'idle' },
paused: { resume: 'running', stop: 'idle' }
};
}

transition(action) {
const validTransitions = this.transitions[this.state];
if (validTransitions && validTransitions[action]) {
this.state = validTransitions[action];
return true;
}
return false;
}
}

const machine = new StateMachine();
console.log(machine.transition('pause'));
console.log(machine.state);
console.log(machine.transition('start'));
console.log(machine.state);
πŸ‘1🀩1
CHALLENGE

const userInput = "<script>alert('xss')</script>";
const sanitized = userInput.replace(/<script[^>]*>.*?<\/script>/gi, '');

const users = new Map();
users.set('admin', { password: 'secret123', role: 'admin' });
users.set('guest', { password: 'guest', role: 'user' });

function authenticate(username, password) {
const user = users.get(username);
return user && user.password === password ? user.role : null;
}

const role1 = authenticate('admin', 'secret123');
const role2 = authenticate('guest', 'wrong');
const role3 = authenticate('hacker', 'secret123');

console.log(sanitized);
console.log(role1, role2, role3);
❀4πŸ‘3πŸ”₯1
πŸ“Έ The Hidden Costs of Angular Updates.

πŸ“… September 3, 4 PM UTC
πŸŽ™ Host: Armen Vardanyan
🎀 Guest: Gérôme Grignon

We’ll cover:
- What ng update does well
- Where the hidden costs appear in real projects
- Refactoring & dependency pitfalls
- How upgrades affect teams & long-term maintainability

Check the Linkedin post to learn more.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ‘2πŸ”₯1
CHALLENGE

const obj = {
name: 'Sarah',
getName() { return this.name; },
getNameArrow: () => this.name
};

const { getName, getNameArrow } = obj;
const boundGetName = obj.getName.bind(obj);

console.log(getName());
console.log(getNameArrow());
console.log(boundGetName());
console.log(obj.getName());
console.log(obj.getNameArrow());
❀1