JavaScript
31.3K subscribers
1.21K photos
10 videos
33 files
877 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 obj = {
name: "Quantum",
regular: function () {
return this.name;
},
arrow: () => {
return this?.name;
},
nested: function () {
const inner = () => this.name;
return inner();
},
};

console.log(obj.regular());
console.log(obj.arrow());
console.log(obj.nested());
👍4❀3🔥3
CHALLENGE

const flags = {
READ: 0b0001,
WRITE: 0b0010,
EXECUTE: 0b0100,
DELETE: 0b1000,
};

const userPermissions = flags.READ | flags.WRITE | flags.EXECUTE;
const adminPermissions = userPermissions | flags.DELETE;

const canDelete = (adminPermissions & flags.DELETE) !== 0;
const readOnly = userPermissions & ~flags.WRITE;

const toggled = userPermissions ^ flags.EXECUTE;
const shifted = (flags.DELETE << 2) | (flags.READ >> 0);

console.log(canDelete, readOnly, toggled, shifted);
❀2👍2🔥1
🀔3❀1
CHALLENGE


function createUser(
name,
role = "viewer",
permissions = { read: true, write: false },
level = permissions.write ? 2 : 1
) {
return { name, role, permissions, level };
}

const user1 = createUser("Carlos");
const user2 = createUser("Diana", "editor", { read: true, write: true });
const user3 = createUser("Eve", "admin", undefined, 5);

console.log(user1.role, user1.level);
console.log(user2.role, user2.level);
console.log(user3.role, user3.level);
🔥5🀩2👍1
CHALLENGE

const user = {
profile: {
name: "Marcus",
address: {
city: "Berlin",
zip: "10115"
}
},
getSubscription: () => ({
plan: "pro",
features: ["analytics", "exports"]
})
};

const city = user?.profile?.address?.city;
const country = user?.profile?.address?.country?.toUpperCase();
const firstFeature = user?.getSubscription?.()?.features?.[0];
const adminRole = user?.roles?.[0]?.name ?? "guest";

console.log(city, country, firstFeature, adminRole);
🔥4👍3🀩2❀1
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🀣9🔥6👍1🀔1
CHALLENGE

const tag = (strings, ...values) => {
return strings.reduce((result, str, i) => {
const value = values[i - 1];
const transformed =
typeof value === "number" ? value * 2 : value?.toUpperCase();
return result + transformed + str;
});
};

const name = "carlos";
const score = 42;
const bonus = null;

const output = tag`Player: ${name}, Score: ${score}, Bonus: ${bonus}`;
console.log(output);
❀1
CHALLENGE


const p1 = new Promise((resolve) => {
console.log("A");
resolve("B");
});

const p2 = p1.then((val) => {
console.log(val);
return "C";
});

p2.then((val) => {
console.log(val);
});

console.log("D");
🔥5❀2👍1
❀3🔥1
CHALLENGE

function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i - 1];
const transformed =
typeof value === "number"
? `[${value * 2}]`
: `(${String(value).toUpperCase()})`;
return result + transformed + str;
});
}

const product = "widget";
const qty = 4;
const price = 12.5;

const output = highlight`Order: ${product} x${qty} @ $${price}`;
console.log(output);
❀5👍3🀣1
CHALLENGE

function* pipeline(...fns) {
let value = yield;
for (const fn of fns) {
value = yield fn(value);
}
return value;
}

const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x * x;

const gen = pipeline(double, addTen, square);

gen.next(); // prime the generator
const r1 = gen.next(3);
const r2 = gen.next(r1.value);
const r3 = gen.next(r2.value);

console.log(r1.value, r2.value, r3.value);
❀4👍2
What is the output?
Anonymous Quiz
25%
6 16 196
28%
3 13 169
41%
6 16 256
5%
3 16 256
🔥3
😃 Framework Benchmarks: Compare Frontend Frameworks

An experienced developer built and benchmarked the same app across numerous frameworks (e.g. Angular, Solid, React, Alpine.js
). Here are the results, covering bundle size, build time, UX metrics, and more.

Alicia Sykes
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❀2