33 Concepts JavaScript Developers 'SHOULD Know' (I don't know all of them...)

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.

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
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 👋

QUESTIONS...?

[tying_wolf]

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

[Boy_genivs]

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

[montebont]

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 ;-)

[rickyrayrosenberg]

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.

[smashed]

Thanks for your sharing, great video! Your status of the unsure concepts reminded me how I performed in some awkward interviews... lol

[delalva]

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!

[kingwoodbudo]

Dude, you've led me down a rabbit hole, lol!! So much good info to know!

[mtwata]

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

[sccur]

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.

[sccur]

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.

[BobFrTube]

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.

[ayecab]

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.

[fmaximus]

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.

[PhilWrightUK]

Such a great resource. Thanks for sharing, James.

[tinmancode]

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

/**
*/
let some_cities


some_cities_array.filter( )

or

some_cities_array.filter( one_city =>
(one_city)
)

[MrREALball]

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.

[sarahwbs]

I was about the same as you. I've been a developer for 22 years.

[MuratKeremOzcan]

32 is gold
To get that, you gotta get most of the others

[suelingsusu]

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.

[stefanfrei]

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. :)