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
36%
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
27%
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
What is the output?
Anonymous Quiz
47%
25 SARAH light disabled
25%
0 SARAH disabled
12%
0 undefined light disabled
16%
25 SARAH light undefined
β€10π2
CHALLENGE
const obj = {
name: 'Calculator',
values: [1, 2, 3, 4, 5],
regular: function() {
return this.values.filter(function(x) {
return x > 2;
}).length;
},
arrow: function() {
return this.values.filter(x => x > 2).length;
},
broken: () => {
return this.values.filter(x => x > 2).length;
}
};
console.log(obj.regular());
console.log(obj.arrow());
try {
console.log(obj.broken());
} catch(e) {
console.log('Error');
}π6β€3π₯2
What is the output?
Anonymous Quiz
18%
undefined undefined undefined
28%
Error Error Error
34%
3 3 Error
20%
3 3 3
β€5π4
Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.
Mat βWiltoβ Marquis
Please open Telegram to view this post
VIEW IN TELEGRAM
β€9π₯4π3
CHALLENGE
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers
.map(x => x * 2)
.filter(x => x > 6)
.reduce((acc, x) => {
console.log(`Processing ${x}, acc: ${acc}`);
return acc + x;
}, 0);
console.log(`Final result: ${result}`);
π7β€3
What is the output?
Anonymous Quiz
17%
Processing 10, acc: 8 Processing 12, acc: 18 Final result: 30
25%
Processing 8, acc: 0 Processing 10, acc: 8 Final result: 18
15%
Processing 4, acc: 0 Processing 5, acc: 4 Processing 6, acc: 9 Final result: 15
43%
Processing 8, acc: 0 Processing 10, acc: 8 Processing 12, acc: 18 Final result: 30
π6β€5
A year ago, developer Dimitri Mitropoulos got Doom to run inside TypeScript's type system. Now, he's joined Dillon Mulroy (above) π to walk through the entirety of how it works (in a mere six hours!)
Please open Telegram to view this post
VIEW IN TELEGRAM
π₯5β€4π3π€£3