JavaScript
31.9K subscribers
1.01K photos
9 videos
33 files
693 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 handler = {
get: (target, prop) => {
if (prop in target) {
return target[prop] * 2;
}
return 100;
}
};

const nums = new Proxy({ a: 5, b: 10 }, handler);
console.log(nums.a, nums.b, nums.c);
πŸ”₯12
πŸ”₯7πŸ‘3❀2
✌️ JavaScript Fatigue Strikes Back

A developer with β€˜a decade away’ from writing JavaScript returns to find that one thing hasn’t changed: β€œChoosing the right JavaScript framework is hard, man.”

Allen Pike
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘9🀩3πŸ”₯2🀣1
CHALLENGE

async function fetchData() {
const promise = new Promise(resolve => {
setTimeout(() => resolve('first'), 2000);
});

console.log('start');
const result = await promise;
console.log(result);
console.log('end');
}

fetchData();
const x = 'after';
console.log(x);
❀4πŸ‘2
❀4πŸ”₯4πŸ‘2
πŸ€” TanStack Form v1.0: Headless, Type-Safe Form State Management

A type-safe, framework agnostic (React, Vue, Angular, Solid and Lit are all supported out of the box), headless and isomorphic way to create and work with forms, with this v1.0 release over two years in the making. If you already use things like Formik or React Hook Form and are wondering how it differs, here’s a comparison table.

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

function* counter() {
let count = 1;
while (true) {
const reset = yield count;
count = reset ? 1 : count + 1;
}
}

const gen = counter();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next(true).value);
console.log(gen.next().value);
πŸ‘8πŸ”₯4❀1
πŸ”₯4❀3πŸ‘1
✌️ A Report on How the Web is Really Using JavaScript

Each year, the HTTP Archive puts together the Web Almanac, a report on the β€˜state of the Web’. The JavaScript section has just gone live and goes into depth on how much JS we’re using (or failing to use!), the popularity of TypeScript, loading methods, Web Worker use, and, yes, jQuery still leads the way!

HTTP Archive
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5❀4πŸ€”2πŸ”₯1
CHALLENGE

const user = {
profile: {
name: "Alice",
settings: null
},
getPreferences() {
return this.profile.settings?.theme || "default";
}
};

const admin = {
profile: {
name: "Admin"
},
getPreferences() {
return this.profile.settings?.theme || "default";
}
};

console.log(user.getPreferences());
console.log(admin.getPreferences());
console.log(user.profile.extra?.id?.toString());
πŸ‘7❀5
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘9❀7πŸ”₯1
CHALLENGE

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
return `${this.name} makes a noise`;
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
return `${this.name} barks`;
};

const animal = new Animal('Animal');
const dog = new Dog('Rex');

console.log(dog instanceof Animal);
πŸ”₯5πŸ‘1
What is the output?
Anonymous Quiz
19%
ReferenceError: Animal is not defined
18%
false
39%
true
πŸ‘6❀2πŸ”₯2
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ€”6πŸ”₯3❀2πŸ‘2
CHALLENGE

const company = {
name: 'TechCorp',
departments: {
engineering: {
head: { name: 'Alice', contact: null },
staff: 50
},
marketing: null
}
};

const engineeringContact = company.departments.engineering.head.contact;
const marketingHead = company.departments.marketing?.head?.name;
const financeStaff = company?.departments?.finance?.staff ?? 'Not available';

console.log(`${engineeringContact} - ${marketingHead} - ${financeStaff}`);
πŸ‘10🀩2❀1
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ”₯4🀣3πŸ‘1πŸ€”1
CHALLENGE

const userMap = new WeakMap();

const user1 = { name: 'Alice' };
const user2 = { name: 'Bob' };

userMap.set(user1, { visits: 10 });
userMap.set(user2, { visits: 5 });

// Later in the code...
const entries = [];
for (const obj of [user1, null, user2]) {
if (obj !== null && userMap.has(obj)) {
entries.push(userMap.get(obj).visits);
}
}

console.log(entries.reduce((sum, visits) => sum + visits, 0));
❀4πŸ”₯3πŸ‘2
πŸ‘3❀2πŸ”₯2