3 Questions: You Don't Know JavaScript | Prime Reacts
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Recorded live on twitch, GET IN
/ theprimeagen
frontendmaster....
Reviewed video: • Test Your JavaScript K...
By: Frontend Masters | / @frontendmasters
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact
Kinesis Advantage 360: bit.ly/Prime-K...
Hey I am sponsored by Turso, an edge database. I think they are pretty neet. Give them a try for free and if you want you can get a decent amount off (the free tier is the best (better than planetscale or any other))
turso.tech/dee...
lol the chat ate him alive for getting the first question wrong, meanwhile 80% of JS devs would also get it wrong.... the "senior netflix engineer btw" in the chat was gold lol
I'm glad he got it wrong. I feel better about getting it wrong too.
That question is the equivalent of "you drive a car? Name all the assembly plants where all the parts in your car were manufactured". Obviously you don't need to know that if you just want to drive a car. Unless that's why I still can't pass my driving exam...
The order question is stupid, if your code relies on that this order is maintained in order to work, your code is wrong. No wander not many know it.
80%? lol my bet is more than 95%
I don't think 80% of JS devs understood any of them
Things I learned from this:
- Promise callbacks are microtasks, not tasks
- "return" in generators is valid
return emotionally hurt me
@@ThePrimeTimeagen But ask yourself; why would you ever care about the value _after_ an iterator is already done, unless you manually handled the iteration?
"return" in generators is perfectly ok and I'd say a must: there are ton of problems where you want to early stop a generator. The issue is with "return " which is... odd.. at least.. A generator should yield values, and [eventually] end (return), it's not expected to return values.
(btw, C# "solved" the ambiguity using "yield return " and "yield break" instead of reusing an existing keyword)
@@IMJambyyield break sounds like a nicer syntax than return.
@@IMJamby stop early you say? sounds like an exception to me -- python
I remember the days when EcmaScript didn't even have proper classes. Back in my day, we used functions named in PascalCase and then prefaced calls to them with the "new" keyword.
The so called and sometimes taught nowadays as "factory functions". Dude I had a huge clarifying moment last week when I finally decided to dive deep in understanding prototyping, inheritance and composition. Everything made sense afterwards, it was kinda of a cascade effect in my mind. But now I realize that javascript isn't well designed as some other languages.
@@jmfariasdev the inventor of JavaScript made it in just over a week iirc.
@k98killer people that architects and design programming languages are in another level that's for sure.
@@jmfariasdev It's just another thing that can be done well or poorly. Like anything else, it is a matter of learning from prior examples and then finding new ways to put ideas together.
God, I was laughing so hard when he was wrong in the last question 😂
More of these, that was fun!
Ok thats it! Im taking javascrip proficiency out of my CV. thanks!
Every day I thank the lord for not learning Javascript as my first language (visual basic chads rise up)
Commodore Basic V2
python (normie first language but at least it's not js)
You and me both..!
I hate .js and all the (copy-paste integraded) JS into other New ones.
Creates a web of a
mess and slow af code.
I started with VBS yeah, but after leanring a little bit (which was a lot for a 12yo)
but the first real one was js? but not to well, and the first really learnt was python
same garbage @@ゾカリクゾ
25:49 I think prime is wrong here. I am pretty sure that this is how generator functions work in almost every language. Remember that the end of the function has an implicit empty return. If returned values in generators were also included in the iteration, then this generator
function* whatever() {
for (const elem of ["fist", "second", "last"]) {
yield elem
}
}
would produce "first", "second", "last", undefined and to get the obviously intended results of "first", "second", "last" you would have to do something like
function* whatever() {
for (const elem of ["fist", "second", "last"]) {
if (elem === "last") {
return elem
} else {
yield elem
}
}
}
which is just ridiculously stupid
var ass = new Promise(() => whatever.next()).await //gachiHYPER
Comment above says it all 👌
Lua Coroutines don't do this. You would have to
function whatever()
coroutine.yield(1)
coroutine.yield(2)
return 3
end
or handle the final `nil`.
I actually switched smoothly from watching Anchorman 2 to Prime. The legend continues.
GOTO considered harmful
JS considered deadly and dangerous
This was fun!
IIFE - Immediately invoked function expression. I've heard it pronounced 'iffy' most of the time.
11:49 - I've definitely modified a few built-in prototypes in order to get Vue2 to work in an HTML Application / .hta file. mshta.exe uses an ancient JavaScript engine, so some monkey patching was absolutely required to get things to work at all.
"you don't know javascript"
i know, i wanna keep it that way
Don't hate a language you aren't good at, it's fashionable to hate on JavaScript but it's a very powerful language when used properly
Maybe I should learn Blazor & just run C# in the browser instead.
Bingo
Yes
22:46 prime liking for await makes so much sense when you consider that he used to work with a lot of rxjs
You know what would be interesting? A replay iterator that aside from next, return and throw also has a reset function. That way you don't have to keep a reference around to the original generator function. You can just reuse the current iterator. One that could also have niche usecases would be the caching replay iterator that, when reset, it doesn't have to recompute the original values, since it would have stored those values in a cache. That does defeat the purpose of generators somewhat, since they normally allow for a low memory footprint during iteration, but when caching you do still have that footprint. In such a case the only benefit would be is that you're fetching the values lazily, so you don't have to construct a full list of values before iterating over them.
my_obj.__proto__ = "We're all adults here, I can modify whatever I want"
Senior dev vs junior interview questions
Lydia's slides are beautifully mind-blowing, does anyone know what she uses to make them?
Probably a computer 🤓💻
she use keynote ( i hear her answering your question once)
20:20 javascript does have Option, it's constructor for html element
WHY
Extra info about question 1. The prints for 4, 5 and 6 are sync in the javascript engine while 1 is queued in the engine. 5 is not implemented in the engine (not ecmascript) but still queues on the engines task queue. The setTimeout callback is added to the runtimes event loop and would not work at all in a pure javascript engine evaluation (it is a webAPI that requires a runtime). Writing my own super basic javascript runtime in C was great for learning how javascript runtimes work.
JavaScript is like government bureaucracy: everybody depends on it, but nobody really understands it.
Got the first one right! The first three all delay it by one tick, the second three all do it immediately. As such you get the immediate ones in order, then the delayed ones in order.
Feeling less alone with my skill issues
Javascript has an exponential learning curve
The first one is literally the same question I give to all folks on interviews lol.
Thank god I write C
Finally, a safe language.
wish I could find a job in C
Rust us rusty though!
Because C has no footguns at all
@@spicybaguette7706 it does, but they are much more reasonable
The iterator example has the same behavior in Python. If you return a value from a Python generator that value is part of the StopIteration error.
There's also a similarity in Go's channels; each read from a channel gives back a value and a bool that says whether the channel is still open. When you range a Go channel it returns a 0, false and the false breaks the loop.
1:56 - looking at this, tells me: JS, you're drunk. Go home!
oO i went completly overboardwith the contructor analysis : thinking stuff like: but once its instantiated it may be bound to the new this object or whatever :D
Binding is done on the fly! That allows a lot more memory saving
A coding language is just like a spoken language - go with the flow and learn and use what's necessary and useful in your situation but you don't have to learn complete dictionaries or grammar books which makes you a bit better but it's not worth the effort - you soon forget all that you don't use in real world! That's why you have to repeat vocabulary a lot when you want to learn efficiently. Save yourself time and get started with real problems you want to solve - one after another! That's how you get better in coding!
Man I'm glad I don't have to do JS professionally anymore. My guesses were: 4, 5, 6, 2, 3, 1; A: true, B: false, C: true, D: (hesitated) true, E: true; (so same as prime); I hesitated and picked E
The explanations by Lydia were awesome by the way, I was skeptical at first expecting a wikihow-level video
The worst part about the generator one:
when you have yield 1; yield 2; return 3; you actually get
it.next(); //1
it.next(); //2
it.next(); //3
but when you do
[...it]; //1, 2
it.next() // undefined
Why does one go to 3 and the other one only to 2? Guess it still calls next() again, doesn't yield but returns, so it is done and the 3 disappears into thin air? Weird... either return (different from undefined) should not be allowed or it should behave the same way... 🤷♂
You know it gonna be a nice spicy react when the video is nearly 3x the size of the original video 😩👌🔥
I dont have much JS experience and async will always be my bane in any language possible, therefore i failed the first miserably.
The second was actually simple, just know what points where.
Third I only knew because That's what she said! She already shown it and I'll refuse to accept it as logical.
you pretty much had my thought process on 2 and 3
2 easy
3 i know she said it, but i refuse to believe it
all for loops initialize from outside(where the counter starts) and iterate on the inside, similar to slicing :: ``` include:exclude
```
Regarding the second question - not everything outside of constructor is added to the prototype, only method declarations.
Try defining any property like
class A{
myarrow = () => 1
myprop = {}
myfunc = function(){}
mymethod(){} // this will be on prototype
}
they're gonna be different for each instance. this is pretty obvious for objects and arrow functions especially - would be wild if that object was shared and how would this binding even work on each instance if it's shared?
It just wouldn't have a bound this simple
@24:18 In the example there's an output in the middle with comment on the right "// [1, 2, 3]" without "4" so the return statement is not returning a value (which sounds silly). I heard about generators, never used them, forgot about them but here I was right (because of the example). :-)
Breathable interface ironically killed me XD
I create massive amounts of Node code with async generator functions. Chain them together for cool on cruise control.
the first question. setTimeout with 0 responds differently in every browser when used in combination with promises. Well I can remember it was IE that did it different from the other browsers.
AFAIK there's no setTimeout() of 0 ms, it's rounded up to 50 or something. For security reasons or something.
It's not specified by spec, but some browsers/engines will add additional random time to the timeouts to mitigate Spectre attacks. Though, this can be disabled and it's not an important part of the question itself.
@@dealloc Well, I guess anything >6 will make it last out if those no matter what.
@@bloody_albatross It's not important to the question, because its a general question about the expected behaviour, given that you know the spec; not the internal workings of specific browsers and the random value that determines the timeout.
Even with optionals a generator function could not simply return “nil” when it’s done because generators can yield undefined, null and a hypothetical Optional.nil value.
without strong understanding nature of promises - its pain in the ass) but its not so hard, just 1 day of digging helps me a lot
The last one is weird in the sense that manually calling count() will give you all 3 values. Only when value === 3, done === true. Which is not consistent with using [...it] or for of. It's the inconsistency that is the problem. Manually calling next() respects the return value, while using the other 2 methods does not.
1:35 I work with JS almost daily and I don't know what's the right order
If I was working with a codebase where knowing that order is necessary to maintain or debug it, I'd seriously reconsider my life choices.
Here's a hot take: HOW OFTEN in your day-to-day work do you need to know in which order these will execute? I mean, yes, you need to know there IS an event loop, and that there are certain steps within that loop that execute in a certain order, but how often do you need to KNOW THE EXACT order, or even ALL of the steps that execute within an event loop cycle? I mean, in the rare event that you do need to debug these (and that's when you run into a mix of setTimeout(..., 0) and setImmediate and Promise.resolve()), it shouldn't be that hard to google it out?
Seriously, questions like that remind me of a meme about the Mendeleev's periodic table of elements, which he created specifically so that chemists DIDN'T need to memorize all the data about the elements, and then you get school teachers who FORCE the students to memorize it... -_-
The first question. When she shows the event loop graphic. Is it something prepared by her or is it a tool which i can find online? Who knows?
This Lydia didn't carry my burdens
I barely use promises and async... Glad I got one right for the first task.
"Hi, I'm Lydia"
Prime: ~pause video~ "I really want"
Generators are first class in v8 long before async/await arrived. For several years people were using generators to achieve async/await style code.
I remember the require('bluebird') times, I still failed the test. Somehow, a new stack has emerged (micro/macro) from my POV, with the chat even saying animation queue too ?
I think spending so much time and energy delivering and learning tools, services, devops etc etc... makes us not having time to even learn that much of the language :x
Generator work the same way in PHP except that in PHP you can get the return value if you want by calling a specific method. I don't know how it work in other languages
Haven't been playing with JS for a long, long time... I see it now has generators and a semi-decent event loop, glad it picked up some cues from more competent languages, like Python. *_*hides*_*
I''ve used generators for writing scripts. I needed to fetch all pages from OKTA and on every page perform some actions. Generator was a clean way on performing that. Obviously I could put it inside a loop but c'mon, I am a functional BRO
Ohhh, so when you walk over a Map or Set they use generator functions. I always thought generator functions were kind of weird loops with no use case.
its coming out as we speak
SetTimeout is put on the callback queue
Thought some drum and bass had started after a previous video…
This was pretty fun
it was humiliating
please make more videos like this
Naming my class Prototype
Seeing that js doesn’t include the return value in the generator makes me prefer python’s exception-as-end generator model
Hyenas are actually part of the larger cat family not canines as odd as that seems looking at them.
generators are great memory savers
Not being a JS/Node dev: is the order/behaviour specific to the V8, is it guaranteed that other engines would behave the same way?
Yes. It's by spec. If an engine does it differently, file a bug report!
You are correct, at least in the past. Previously it had different order in different browsers. Need to check how is it now.
I haven't modified the prototype exactly like this, but I just slapped a method onto a Map. Like const myMap = new Map(); myMap.sillyFunction = () => { return "do silly things" };
Everyone: *JS is Awesome for coding!*
Me: *Can I kill it now?*
Here is another test. The key question is "does 3 resolve before 2?". (result in reply):
console.log(1)
setTimeout(() => {
console.log(2)
}, 1);
//SomeLongFunction
let a = 0;
for(let i = 0; i < 1_000_000_000; i++){
a += 1;
}
setTimeout(() => {
console.log(3)
}, 0);
//SomeLongFunction
let b = 0;
for(let i = 0; i < 1_000_000_000; i++){
b += 1;
}
console.log(4)
in chrome I get 1-4-3-2
What's the point of having instance methods on the prototype if there are static methods (on the class). I don't get what's the difference here. I thought like every array would spawn with it's own copy of push().
"why is that valid? I don't know, that's just what happened in the 7-day cocain rage that was javascript's birthing." classic Prime.
I worked on code like q1 for 2 years. I don't understand still.
Lydia is so good at this!
People like her remind me how much I have left to learn
fun fact: the james webb space telescope runs on javascript.
"Fun"
Fcking hell....
How did we end up here.
I am happy that i got answer of question 21 correct & The Primeagen got it wrong, i won XD
Looks like a taxonomic evolutionary hierarchy. If this is the case, Wolf should extend Canine and Dog should extend Wolf. Although I would not build a class hierarchy like this in code. It’s too brittle. What if we discover at some point that dogs don’t descend from Wolves but some other canine ancestor?
Sooo what if we discover dogs aren't canine? In a world of what ifs you won't get anything done
5 minutes in and I already want to give up and go all in on HTMX
As someone who barely knows JavaScript (straight up because I never use it), I learned a few things:
1. There are multiple event queues (microtasks and macrotasks). Why? No idea, but they exists.
2. That you should only use 'return' when using generators in JavaScript because of the way they work.
It’s such a ghastly language. I’ve had to dive into it from time to time over the years, but do the minimum I need and get out.
@@nisonaticthanks for the explanation
and this smells more like a hack than an actual solution
speaking of chat that doesn't work - here's an idea for a webapp: GPT-fed fake chat (100+ users) that responds to microphone input with some delay.
I'm gonna stick to memorizing the ABC's. I"m up to Q and feeling confident.
JavaScript is like English (as a second language) to me. I can use it perfectly fine with what I have learned even if I haven't learned everything there is to learn.
Even more hilarious is that generator "functions" (a terrible name to call an object with shared mutable state) were added to ECMA in 2015. So there is no excuse of this being tossed into JS at its creation as a trivial web scripting language that was never intended to support programming at the scale it is now. Someone thinks this is a cool language feature.
don't get puzzled by the looks of setTimeout( ...whatever, 0) (emphasis on zero)
I think it's a good decision for the value when done to not be handled by the for of loop, but I wished there was syntax to actually handle the done value at the end, something like a finally block with an argument:
```
for (const value of generator()) {
console.log(value);
} finally (finalValue) {
console.log(finalValue)
}
```
Ever wondered how all this would look if IE vbscript won over Netscape javascript instead? :)
The key is in “ value of” count. But this is good 😊! And it was fun 🤩! Who doesn’t love ❤️ pop quizzes and that too in JS! Lol 😂. Thank you Lydia & Prime! It.close() lol 😂!! - Amy
15:02 he became a Believer 💀
Turns out you are always learning JavaScript, the learning is never done.
Modifying the prototype is like dropping acid.
Not for everyone.
How cqn you missed the last one. She literally said only the yield will return
I really don't know JS. But I understand it now
You can't know JavaScript. JavaScript knows you.
Question 2 D, the solution is right but the explanation is wrong. The prototype is Dog not Object, as you have two instances of the prototype Dog.
JS gigabrains flexing they can overcome any handicap. Back to easy C for me
About question 1, we hired a guy once that wrote code like that with resolves, classes, pipes and stuff like that there. I removed all those stupid tools with procedural js and the programm worked 12 times faster. Instead of taking 2 minutes to create the same content it now takes 10 seconds. So I consider using that stuff bad practice and honestly very bad coding. I understand that it should help you with bigger programs. But if you program gets 12 times slower because of crap like that it's a dead end. I come from game developement and crap non game "master" programmers use would never fly on my board,
1/3. Ouch, I'm glad I don't own netflix stock.
Yoooo, is that a Russian River Brewery jacket!?!?!
I'm confused. If you create a promise and do nothing else, the provided function will not run? (5) So, a promise is not lazy/deferred? Wow! And people say Java is bad LOL!
javascript, i love it
It doesn't give up 3 because you didn't tell it to yield.
What's the name of the font she is using?
Anyone?