CHALLENGE
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
const keys = Object.keys(obj);
const values = Object.values(obj);
const result = {
entriesLength: entries.length,
keysJoined: keys.join('-'),
valuesSum: values.reduce((sum, val) => sum + val, 0),
firstEntry: entries[0]
};
console.log(result.entriesLength);
console.log(result.keysJoined);
console.log(result.valuesSum);
console.log(result.firstEntry);โค1๐ฅ1
What is the output?
Anonymous Quiz
18%
3 a,b,c 6 [ 'a', 1 ]
35%
3 a-b-c 6 [ 'a', 1 ]
37%
3 'a-b-c' 6 [ 'a', 1 ]
10%
3 a-b-c 6 ['a', 1]
๐8๐ค4โค3๐คฃ2๐ฅ1
At the start of each year, Michael rounds up the projects in the JavaScript ecosystem that gained the most popularity on GitHub in the prior year. After a two-year run of topping the chart, shadcn/ui has been pushed down to #3 by n8n and React Bits. This is a fantastic roundup, now in its tenth(!) year, and features commentary from a few industry experts too.
Michael Rambeau et al.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค6๐3๐ฅ3
CHALLENGE
const config = { api: 'v1', timeout: 5000 };
Object.seal(config);
const settings = { theme: 'dark', lang: 'en' };
Object.freeze(settings);
config.api = 'v2';
config.retries = 3;
settings.theme = 'light';
settings.debug = true;
console.log(config.api);
console.log(config.retries);
console.log(settings.theme);
console.log(settings.debug);๐4๐ฅ2
What is the output?
Anonymous Quiz
40%
v2 undefined dark undefined
29%
v1 undefined light true
22%
v2 3 dark undefined
10%
v1 3 light true
๐5๐ฅ3โค2
Available in the form of React/Preact, Vue, Svelte, Angular, or plain JS components. Open source but with a premium version with extra features. GitHub repo.
Tom รsterlund
Please open Telegram to view this post
VIEW IN TELEGRAM
โค8๐ฅ3๐1
CHALLENGE
console.log(typeof myVar);
console.log(typeof myFunc);
console.log(typeof myArrow);
var myVar = 'initialized';
function myFunc() {
return 'function declaration';
}
var myArrow = () => 'arrow function';
console.log(typeof myVar);
console.log(typeof myFunc);
console.log(typeof myArrow);
โค3๐2๐ฅ1
Please open Telegram to view this post
VIEW IN TELEGRAM
โค5๐3๐ฅ3
CHALLENGE
const data = [
{ type: 'income', amount: 1000, category: 'salary' },
{ type: 'expense', amount: 200, category: 'food' },
{ type: 'income', amount: 500, category: 'freelance' },
{ type: 'expense', amount: 150, category: 'transport' }
];
const result = data.reduce((acc, item) => {
const key = item.type;
acc[key] = (acc[key] || 0) + item.amount;
return acc;
}, {});
console.log(result.income - result.expense);
๐4โค3๐ฅ1
๐ฅ6โค5๐1
CHALLENGE
async function processData() {
const promise1 = Promise.resolve('first');
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve('third');
try {
const result = await Promise.allSettled([promise1, promise2, promise3]);
console.log(result[0].status);
console.log(result[1].reason);
console.log(result[2].value);
} catch (error) {
console.log('caught:', error);
}
}
processData();โค8๐ฅ2
What is the output?
Anonymous Quiz
35%
fulfilled error third
30%
caught: error
20%
first error third
14%
fulfilled undefined third
โค4๐3๐ฅ3
CHALLENGE
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] ? `<em>${values[i]}</em>` : '';
return result + str + value;
}, '');
}
const name = 'Sarah';
const score = 95;
const message = highlight`Hello ${name}, your score is ${score}!`;
console.log(message);๐ฅ4๐2
What is the output?
Anonymous Quiz
39%
Hello <em>Sarah</em>, your score is <em>95</em>!
40%
Hello Sarah, your score is 95!
14%
Hello <em>Sarah, your score is </em>95!
7%
<em>Hello Sarah, your score is 95!</em>
โค5๐5
CHALLENGE
class Counter {
#value = 0;
get count() {
console.log('Getting count');
return this.#value;
}
set count(val) {
console.log('Setting count to', val);
this.#value = Math.max(0, val);
}
}
const counter = new Counter();
counter.count = -5;
console.log(counter.count);๐4โค3๐ฅ2
What is the output?
Anonymous Quiz
24%
Setting count to -5 Getting count -5
26%
Getting count Setting count to -5 -5
19%
Getting count Setting count to -5 0
30%
Setting count to -5 Getting count 0
๐ฅ4โค3๐3
CHALLENGE
const pipe = (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value);
const add = (x) => (y) => x + y;
const multiply = (x) => (y) => x * y;
const subtract = (x) => (y) => y - x;
const transform = pipe(
add(5),
multiply(3),
subtract(2)
);
console.log(transform(4));
console.log(transform(0));
๐ฅ6๐3โค2
๐ฅ7โค5๐2
Lea, who has worked at the heart of Web Standards for years, delivers a compelling (and educational) call to action about a problem every JavaScript developer has encountered: why is managing dependencies and introducing them into code so unnecessarily messy and what could we do about it?
Lea Verou
Please open Telegram to view this post
VIEW IN TELEGRAM
โค7๐5
CHALLENGE
const user = { name: 'Sarah', age: 0 };
const config = { theme: '', debug: false };
const result1 = user.age || 25;
const result2 = user.name && user.name.toUpperCase();
const result3 = config.theme || 'light';
const result4 = config.debug && console.log('Debug mode') || 'disabled';
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);๐6โค4๐ฅ3๐ค3