33 Concepts JavaScript Developers "SHOULD Know" (I don't know all of them...)
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- A list of 33 concepts that every JavaScript developer should know according to this Github repository. In this video, I'll walk through the entire list and either explain it or admit I don't know.
Github Repository - github.com/leonardomso/33-js-...
01:10 - Call Stack
01:50 - Primitive Types
02:08 - Value Types and Reference Types
03:02 - Implicit, Explicit, Nominal, Structuring and Duck Typing
06:04 - == vs === vs typeof
04:51 - Function Scope, Block Scope and Lexical Scope
06:28 - Expression vs Statement
07:15 - IIFE, Modules and Namespaces
08:23 - Message Queue and Event Loop
09:20 - JavaScript Engines
10:18 - Bitwise Operators, Type Arrays and Array Buffers
11:14 - DOM and Layout Trees
11:30 - Factories and Classes
12:25 - this, call, apply and bind
13:08 - new, Constructor, instanceof and Instances
13:51 - Prototype Inheritance and Prototype Chain
14:37 - Object.create and Object.assign
16:31 - map, reduce, filter
16:51 - Pure Functions, Side Effects, State Mutation and Event Propagation
18:05 - Closures
18:41 - High Order Functions
19:08 - Recursion
19:43 - Collections and Generators
19:58 - Promises
20:20 - async/await
20:38 - Data Structures and Algorithms
21:23 - Expensive Operation and Big O Notation
21:39 - Inheritance, Polymorphism and Code Reuse
22:58 - Design Patterns
23:19 - Partial Applications, Currying, Compose and Pipe
24:42 - Clean Code
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquick.com/newsletter
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquick.com/uses
Learn Web Development 📖 - www.jamesqquick.com/courses
I just liked how you explain things and google the ones you don't know and also being honest to tell us that there are somethings you don't know....thanks great video
Nice one James. Just a few "FYI" remarks from an old-timer who wrote his first programs on a TRs-80 in the late 1970's.
LIFO stacks are a very old and efficient concept from the days of assembly language programming. Under the hood, whenever you call a function, the program counter is saved on the stack. When you return the program counter is "popped" from the stack and increment to the next instruction of the "caller" and your code continues.
Try/catch blocks work in the same way. Whenever you throw an exception the program counter is reset to the first statement in the catch block.
At he end of the day they are like GOTO statements - which we try to (better: should) avoid in high level languages.
There even are some postfix languages like Forth and some Smalltalk implementations which are stack based. They work like pocket calculators. Enter 2 , 3, 17 and + and the result is 22 - which is now the latest entry on the stack while the inputs and operator were removed.
In case you ever wondered about the usefulness of XOR: in machine language it is the fastest way (4 clock ticks on a Z80) to set a register to zero ;-)
Such a great resource. Thanks for sharing, James.
Dude, you've led me down a rabbit hole, lol!! So much good info to know!
Duck typing means if it looks like a duck and quacks like a duck then it's a duck.
For JavaScript the important thing is that the structures are there that you would expect to have in an object for instance. Since there are no explicit types in JavaScript, you only have to create a structure that looks like a thing ( has matching fields and functions ) and you can assume it will work in any function that accepts something that looks that way.
This is different in other languages that are more strongly typed like Java. For Java you would need to have an interface that defines the contract of a function parameter for instance. You could also assume inheritance - such that object A which is a descendant of object B can fit into any function that specifies object B as a parameter.
Ah interesting. Yeah I still didn't quite get that while I was reading through the docs in the video lol
thus typescript
@@jmula1963 yeah - but I think he was trying to rely on vanilla js
such a small universe literally came across this definition in an intro to python course yesterday lol.
@@blockfather1375 That's one of the cool things about learning difference languages and frameworks. There's a lot of overlap!
throttling and debouncing functions, web components and lifecycle hooks could be also be added in the list. This is a very handy list. Nice and informative video!
Thanks for your sharing, great video! Your status of the unsure concepts reminded me how I performed in some awkward interviews... lol
I know this video is one year old, but to anyone watching it, you can now read documentation and ask Chatgpt to explain and give you examples. You can also give it a piece of code and ask it to rewrite using x or write it in the cleanest way possible. And it's pretty useful
You really should use chapters man. Here I did it for you:
01:10 - Call Stack
01:50 - Primitive Types
02:08 - Value Types and Reference Types
03:02 - Implicit, Explicit, Nominal, Structuring and Duck Typing
06:04 - == vs === vs typeof
04:51 - Function Scope, Block Scope and Lexical Scope
06:28 - Expression vs Statement
07:15 - IIFE, Modules and Namespaces
08:23 - Message Queue and Event Loop
skipped - setTimeout, setInterval and requestAnimationFrame
09:20 - JavaScript Engines
10:18 - Bitwise Operators, Type Arrays and Array Buffers
11:14 - DOM and Layout Trees
11:30 - Factories and Classes
12:25 - this, call, apply and bind
13:08 - new, Constructor, instanceof and Instances
13:51 - Prototype Inheritance and Prototype Chain
14:37 - Object.create and Object.assign
16:31 - map, reduce, filter
16:51 - Pure Functions, Side Effects, State Mutation and Event Propagation
18:05 - Closures
18:41 - High Order Functions
19:08 - Recursion
19:43 - Collections and Generators
19:58 - Promises
20:20 - async/await
20:38 - Data Structures and Algorithms
21:23 - Expensive Operation and Big O Notation
21:39 - Inheritance, Polymorphism and Code Reuse
22:58 - Design Patterns
23:19 - Partial Applications, Currying, Compose and Pipe
24:42 - Clean Code
Damn, that's a lot of work. Thank you!
For anyone using the Class syntax, it's just syntax sugar. Under the hood it's all the prototype. It's not the same kind of inheritance as other C syntax languages. And if you don't understand the difference in how prototypical inheritance works, you can get in some trouble with different behaviors.
Knowing generator functions comes in handy once you start using some async frameworks like Redux-saga. They basically use yield on places of asynchronous calls to imitate multi threading in a single thread. Also generator functions have tail-recursion, so if the last statement calls the generator itself, it will not create a new stack frame.
I don't know all of these too 😂Thanks James, you're always positive person 👏🏻
thanks for sharing, very handy
recently run into using curried functions because i refactored some array functions operations for map reduce and filters, the refactoring meant i no longer have access to some variables so now i need a map function maker for example, the
say you want to filter cities by some country_state and in different parts of you code, you have different country states(regions)
you can make a
cityFilterMaker = (country_state) => (city) => city.country_state_id == country_state.id
or written as
function cityFilterMaker (country_state) {
//return the function that will perform the filtering
return function (some_city) {
//does some city belong to the country_state
return some_city.country_state_id == country_state.id
}
}
how it to call it
/**
*@type []
*/
let some_cities
some_cities_array.filter( cityFilterMaker(country_state) )
or
some_cities_array.filter( one_city =>
cityFilterMaker(country_state) (one_city)
)
I'm the author of the article this repo is based off of. I appreciate the community effort to build out this study repo! But some of the items on the list the community did misinterpret.
Double equals compares two variables based on an algorithm that will determine how to convert them to the same type then check if they're the same value. Depending on what's being compared, the algorithm converts the values to different types.
Subtle but important point. Strings are passed by reference just like any other value. If I pass the string as "a" and then say "a='x'" I don't change the string but I replace the passed-reference. It is the same as a structure - "a={}" replaces the reference. But the content of the object or string is passed by reference. We don't copy the string. Objects though may have operations that allow us to get to update itself as when we say "a.b=7". The content is modified but its reference "a" is intact. String just doesn't have update-in-place but you can build such a string-like object if you wanted to.
Great video! Thanks for sharing! Some things I think would be good to add to that list are the spread operator, since a lot of people get tripped up on that, and also the various short hands for expressions and statements such as using the ternary operator and other variations of that that go outside of the standard if, else, else if, switch structure. :)
I think these are great additions!
I was about the same as you. I've been a developer for 22 years.
Very simply said, new X is Object.create(X.prototype) with additionally running the constructor function. (And giving the constructor the chance to return the actual object that should be the result of the expression instead of this.)
That’s it. :)
Generators are useful for handling very big amounts of data (like processing a 500.000-rows csv) without overloading the RAM of the server. Not something I've really used in JS, but I would use them if I had to do that in Node.js
Duck Typing is a term most used in the Python community because Python's built in dunder functions ("__len__" as an example) are an example of duck typing.
10:40 the only time I ever used the bitwise operators is when I wanted to check if a number is odd (number & 1), have no idea it it was faster than the simple number % 2 check or if there is some kind of optimization happening already, but hey, at least I've found a use for them.
I use a bit flag to determine what changed in a date.
I write time management software and date and date changes fly around. We need to react and re render only what we have to , when we have to.
Date ingestion analyses what has changed. 1 means the date, 2 means the week, 4 means the month and 8 means the year.
Thank about how to set up a result like that then test and branch off it with beginner coding concepts.
~~ for an unsigned number/variable :P
thx bro
james are you still involved in auth0? what about an sdk for svelte?
Logical operators are for CONDITIONALS i.e. If and While etc and the result is true or false ... bitwise operators are BIT mathematics that perform Base2 operations on the bits of numbers... and the result is a number... so for instance you want to set some bits in a number you OR it with a particular number ....e.g. the number 9 ... is 1001 in base 2.... if you OR it with 6 ie. 0110... then the result is 15 i.e. 1111.... notice how the 2nd and 3rd bits are now set on .... this stuff can be useful doing machine level stuff e.g. interfacing to electronics and turning lights on and off or reading transducers etc.
It's kind of nuts having to know this just to pass code challenges at interviews, since half the stuff in here we'll never use.
32 is gold
To get that, you gotta get most of the others
The Lexical scope is compared with dynamic scope (which almost no modern programming languages use) almost every instance of scope you've ever used is lexical scope.
One of the differences between assign and create for objects has to do with creating shallow and deep copies of the object. Object.assign creates a shallow copy of the object whereas Object.create produces a deep copy.
JSON.parse(JSON.stringify(obj));
Heckin honest.
The #1 advice I can give is to keep a rubber duck under your monitor and talk to it. Rubber-ducky method.
If you can't explain whatever it is to that duck, then you don't know what you're talking about!
I think with object.create (somebody can correct me if I'm wrong) you create a new instance when you use it.
In classical OOP it would look like this: var obj = new ClassName(parameters)
Object the create. I run into that when I wanted to create a clone of an object and prevent changes of the clone from being applied on the parent. Say you had one form that you use for editing and creating a new swimmer profile. You could edit the swimmer profile by passing it to the form (think of react but plain js) if you just. The passing is almost like by refrenece but which means any changes in the update form are applied on the original swimmer but we would only want to update the original swimmer only when we have clicked save or the update button
Well the only difference is that Object.create doesn't run the constructor. When you run new X, it creates an object with prototype of the class and then runs the class constructor function. Object.create essentially lets you create the object without running the constructor, so it gains all the methods and basic universal properties stored on the prototype, but without the initialization function getting run.
If it walks like a Duck, and Quacks like a Duck, it is a Duck.
I think a lot of people get confused about call-by-value and call-by-reference. Everything in JavaScript is call-by-value. Some of those values are references.
best as always
How do you avoid recursion in real life without sticking to trivial problems?
most recursive problems can be solved iteratively in a slightly less efficient way. As long as you are not dealing with trees you could probable solve any simple recursive problem with regular loops and brute force xD
How much JavaScript one should know before jumping on to the frameworks ?
fall a few times and pick up your self, plus you will learn while figuring things out,
you can start anywhere
@@tinmancode Thanks dude,,That's how I do learn,,,
Are you learning spanish ?? because i saw many words highlighted and translated to spanish
haha it's a plugin that I use. I know Spanish fairly well, but the extension throws in some extra words occassionally to keep me on my toes :)
@@JamesQQuick Nice.
@@JamesQQuick what's the name of the extension?
The name is Toucan.
Ah so JavaScript stack is like Magic: The Gathering stack.
Just lacked timestamps!
When you realized you "know" more Javascript than you could think.
I don't get it why people ask me questions about object prototype, call vs apply for a React position.
bit operators are not really useful in Javascript, they are typically used by low level languages to optimize code on the binary level. A lot of these optimization should be done by the javascript engine or even the processor. Most known example: multiplying by a power of 2 is the same as doing a shift left (this is the same thing in base 10, when you multiply by a power of 10 you are adding zeros at the end of the number or moving the dot to the right)
I wouldn't say that they aren't useful in JS because they're not used only for optimizations. They are very useful when working with binary data, for example if you're building a JS package to load your custom binary format you may use bitwise operations to extract data from bitfields. As James said they're also very useful when working with color formats, which is just an example of binary data.
As all humans do, no one knows everything.
{2022-0314}
You should read and study the list before doing a video, to many "I don't know".
Not an attack just trying to improve it, thanks for your time
I think the point of the video is to show that people who get paid to write code don't actually know as much as you might expect.
Recursion? You obviously haven't spent enough time learning erlang 😄
Concepts missing in your process :
- 34 : youtube timecode
- 35 : visual examples
- 36 : not talk about something you don't know (or change the tittle of the video)
Congratulations for the half job done.
It's almost as if there's a link to that exact repository in the video description - with all the gathered topics, and resources, with examples and in depth articles that explain all the concepts. It would take the man hours to work through everything for you. Try to take some initiative and learn something on your own, eh? 😂
He's simply trying to spread awareness of the resource, and highlight the importance of some of the listed concepts and how relative they may be (as someone who works in the field). If you want to know more, go read up.
@@Drakan21 the repository is very cool, but I talk about timecode (wich is far less effort than the repo).
At some points, the guy tells that he doesn't know the topics, so why advice theese points ? It would have be more honnest to make the video after mastering all points. Just an opinion.
Oh dear. It seems you don’t understand what a prototype is.
This guy doesn't seem to understand a lot of things.
You should really revisit the Call Stack, because this is not correct.
Feel free to add any clarifications. I'm sure the explanation wasn't 100% correct in every way in an impromptu reaction video
@@JamesQQuick The CALL STACK is what you explore in the debugger what happens when you make a call to a function and put parameters and return values on the stack. Stack based languages have those (JavaScript, C#, etc). Very helpful to know how it works. This is why a "stack trace" is called a stack trace and it can be dumped when your code fails.
@@nethsarasandeepaelvitigala135 Hello, dear sir.
I never said that it was "just a debugging thing". I might have phrased myself badly, but my main implication was that the explanation from the video author is incorrect (which it is), and he should revisit the concept, ideally by just CLICKING THE LINK and read about it.
I literally wrote "what happens when you make a call to a function and put parameters and return values on the stack" which is factually correct and not limited to what you can see in a debugger. I can see how you would confuse this, because it would have you read rather than write, and that seems somewhat difficult for you.
I didn't do this to "win points on the internet by being right", I did it because the viewership and the author probably needs a better explanation because understanding the call stack is actually important. It is probably first on the list for a reason. Everything I wrote was literally designed to disambiguate the data structure "stack" from the "call stack", and looking back at my post I sort of fail to see the audacity.
On to some of your points, that are factually incorrect rambling at best:
Assembly language generally doesn't have a concept called "functions". Yes, you can push and pop from a stack. Yes, you can set registers and jump around. Yes, you can push a return value to the stack so it goes back from whence it came. You can look this up for yourself, just google "function assembly language". You're welcome. Although you only get to type three words and you have to read a few more.
Also, C/C++ when optimized will extremely likely erase, unroll, inline functions, so the call stack is often lost. I am not sure why you are talking about the main function, it is literally just an entry point to the process. It is just syntax. Nothing in the C-spec dictates code layout like you indicate, that is just dubious. You can see this by C# introducing top level statements in C# 10. It is literally just syntax.
Now, for the meat of this comment, and I think you will enjoy these the most:
If you think the best way of explaining what a call stack is is to show the whole internet that you understand recursion, you should consider becoming a teacher! Not.
Also, when interacting with people as a result of actually not reading a post, I suggest not starting a post with "lol" and continuing with "incorrect knowledge". For then to go on with, well, incorrect knowledge.
See, I started with "dear sir".
In spirit of true comraderie on the web, I will end with a fun pun: Func off. And have a great weekend. Look forward to your rebuttal, I will be here all day.
@@larsthomasdenstad9082 lol still waiting for that rebuttal to your incorrect knowledge
@@harleyspeedthrust4013 If you are reading impaired we can do it on a Zoom-call. Are you reading impaired?