Examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. Available in eighteen other written languages too.
Oleksii Trekhleb et al.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
CHALLENGE
const original = {
name: 'Sarah',
hobbies: ['reading', 'coding'],
address: { city: 'Portland', zip: 97201 }
};
const shallow = { ...original };
const deep = JSON.parse(JSON.stringify(original));
shallow.name = 'Emma';
shallow.hobbies.push('hiking');
shallow.address.city = 'Seattle';
deep.hobbies.push('swimming');
deep.address.zip = 98101;
console.log(original.hobbies.length, original.address.city);❤7🤔1
❤2
Esteemed browser and Web standards expert Alex Russell looks at the state of client-side Web performance, what sort of bandwidth you should be taking into account, what devices people are using, and warns against ever-growing JavaScript bundle sizes. A lot of data here.
Alex Russell
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🤔1
CHALLENGE
class SimpleObservable {
constructor(subscribeFn) {
this.subscribeFn = subscribeFn;
}
subscribe(observer) {
return this.subscribeFn(observer);
}
}
const obs = new SimpleObservable(observer => {
observer.next('first');
observer.next('second');
observer.complete();
});
const results = [];
obs.subscribe({
next: val => results.push(val),
complete: () => results.push('done')
});
console.log(results.join('-'));❤4👍1🤔1
What is the output?
Anonymous Quiz
47%
first-second-done
38%
first-second-complete
11%
first-done-second
4%
done-first-second
Get a Google Calendar-style experience in your own apps. Has connectors for React, Vue and Angular, but can be used with plain JavaScript too. The base version is MIT licensed, but there’s a commercial version too with extra features.
Adam Shaw
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10🤩1
CHALLENGE
const arr = [1, 2, 3];
const obj = { valueOf: () => 4, toString: () => '5' };
const result1 = arr + obj;
const result2 = +obj;
const result3 = String(obj);
const result4 = obj == 4;
const result5 = obj === 4;
console.log(`${result1}|${result2}|${result3}|${result4}|${result5}`);
const weird = [] + [] + 'hello';
const weirder = [] + {} + [];
const weirdest = {} + [] + {};
console.log(`${weird}|${weirder}|${weirdest}`);
const final = !!'0' + !!'' + !!null + !!undefined;
console.log(final);
❤1
❤4
Draft diagrams quickly with TypeScript. Define your data models through top-level type aliases and interfaces and it automatically lays out the nodes in an efficient way. GitHub repo.
Andrei Neculaesei
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍2
CHALLENGE
const data = '{"users": [{"name": "Sarah", "age": 25}, {"name": "Mike", "age": null}]}';
try {
const parsed = JSON.parse(data);
const result = parsed.users.map(user => {
return user.age ?? 'unknown';
});
console.log(result.join(' - '));
} catch (error) {
console.log('Parse error occurred');
}
const invalidJson = '{"name": "John", age: 30}';
try {
JSON.parse(invalidJson);
console.log('Success');
} catch {
console.log('Invalid');
}❤9
What is the output?
Anonymous Quiz
29%
Parse error occurred, Invalid
36%
25 - null, Success
10%
25 - unknown
25%
25 - unknown, Invalid
👍7🤔2❤1
CHALLENGE
class Logger {
log(msg) {
return `[LOG]: ${msg}`;
}
}
class Formatter {
format(text) {
return text.toUpperCase();
}
}
class Service {
constructor(logger, formatter) {
this.logger = logger;
this.formatter = formatter;
}
process(data) {
const formatted = this.formatter.format(data);
return this.logger.log(formatted);
}
}
const service = new Service(new Logger(), new Formatter());
console.log(service.process('hello world'));❤4👍3🤔2
What is the output?
Anonymous Quiz
50%
[LOG]: HELLO WORLD
29%
HELLO WORLD
13%
hello world
8%
[LOG]: hello world
❤2
CHALLENGE
let obj1 = { name: 'Sarah' };
let obj2 = { name: 'Mike' };
obj1.ref = obj2;
obj2.ref = obj1;
let weakRef = new WeakRef(obj1);
let registry = new FinalizationRegistry((value) => {
console.log(`Cleanup: ${value}`);
});
registry.register(obj1, 'obj1-cleaned');
obj1 = null;
obj2 = null;
console.log(weakRef.deref()?.name || 'undefined');
console.log('Script completed');What is the output?
Anonymous Quiz
31%
Sarah Script completed
41%
undefined Script completed Cleanup: obj1-cleaned
19%
Sarah Script completed Cleanup: obj1-cleaned
9%
undefined Script completed
🔥4🤔3❤1
CHALLENGE
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
this.events[event] = this.events[event] || [];
this.events[event].push(callback);
return this;
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(data));
}
return this;
}
}
const emitter = new EventEmitter();
emitter.on('test', x => console.log(x * 2))
.on('test', x => console.log(x + 5))
.emit('test', 10);❤7
Back in May 1995, a 33 year old Brendan Eich built the first prototype of JavaScript in just ten days, originally codenamed Mocha (and then LiveScript). On December 4, 1995, Netscape and Sun Microsystems officially announced 'JavaScript' in a press release as "an easy-to-use object scripting language designed for creating live online applications that link together objects and resources on both clients and servers."
Over thirty years, JavaScript has cemented its place at the heart of the Web platform, and more broadly in desktop apps, operating systems (e.g. Windows' use of React Native), mobile apps, and even on microcontrollers.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍4🤔1
CHALLENGE
const map = new Map([
['a', 1],
['b', 2],
['c', 3]
]);
const key = { id: 'key' };
map.set(key, 4);
map.set(key, 5);
const result = [];
result.push(map.get('a'));
result.push(map.get(key));
result.push(map.size);
result.push(map.has({ id: 'key' }));
console.log(result);