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

Поделиться
HTML-код
  • Опубликовано: 22 дек 2024

Комментарии • 79

  • @montebont
    @montebont 2 года назад +2

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

  • @rickyrayrosenberg420
    @rickyrayrosenberg420 2 года назад +23

    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.

    • @JamesQQuick
      @JamesQQuick  2 года назад +4

      Ah interesting. Yeah I still didn't quite get that while I was reading through the docs in the video lol

    • @blankcheckguy69
      @blankcheckguy69 2 года назад +1

      thus typescript

    • @rickyrayrosenberg420
      @rickyrayrosenberg420 2 года назад

      @@blankcheckguy69 yeah - but I think he was trying to rely on vanilla js

    • @blockfather1375
      @blockfather1375 2 года назад

      such a small universe literally came across this definition in an intro to python course yesterday lol.

    • @JamesQQuick
      @JamesQQuick  2 года назад +2

      @@blockfather1375 That's one of the cool things about learning difference languages and frameworks. There's a lot of overlap!

  • @Boy_genivs
    @Boy_genivs 2 года назад +1

    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

  • @tying_wolf
    @tying_wolf 2 года назад +2

    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

    • @JamesQQuick
      @JamesQQuick  2 года назад +2

      Damn, that's a lot of work. Thank you!

  • @smashed5826
    @smashed5826 2 года назад

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

  • @kingwoodbudo
    @kingwoodbudo 2 года назад +1

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

  • @delalva2751
    @delalva2751 2 года назад +1

    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!

  • @tinmancode
    @tinmancode 2 года назад +1

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

  • @BobFrTube
    @BobFrTube 2 года назад

    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.

  • @sccur
    @sccur 10 месяцев назад

    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.

  • @MrREALball
    @MrREALball 2 года назад +4

    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.

    • @TesterAnimal1
      @TesterAnimal1 2 года назад

      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.

    • @pablom2274
      @pablom2274 2 года назад

      ~~ for an unsigned number/variable :P

  • @ayecab
    @ayecab 2 года назад

    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
    @fmaximus 2 года назад

    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.

  • @jpgarcia90
    @jpgarcia90 2 года назад +1

    james are you still involved in auth0? what about an sdk for svelte?

  • @sccur
    @sccur 10 месяцев назад

    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.

  • @PhilWrightcmd
    @PhilWrightcmd 2 года назад +1

    Such a great resource. Thanks for sharing, James.

  • @mtwata
    @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

  • @suelingsusu1339
    @suelingsusu1339 2 года назад +1

    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.

  • @sarahwbs
    @sarahwbs 2 года назад +6

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

  • @nica1
    @nica1 2 года назад +1

    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.

    • @capslock3250
      @capslock3250 Год назад

      JSON.parse(JSON.stringify(obj));

  • @danieltkach2330
    @danieltkach2330 2 года назад +1

    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.

  • @echobucket
    @echobucket 2 года назад

    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.

  • @stefanfrei6199
    @stefanfrei6199 2 года назад

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

  • @lucadifazio2735
    @lucadifazio2735 2 года назад

    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

  • @MuratKeremOzcan
    @MuratKeremOzcan 2 года назад

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

  • @marsrocks247
    @marsrocks247 2 года назад

    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!

  • @echobucket
    @echobucket 2 года назад

    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.

  • @TheProfessorsClass
    @TheProfessorsClass 2 года назад +2

    If it walks like a Duck, and Quacks like a Duck, it is a Duck.

  • @universecode1101
    @universecode1101 2 года назад

    I don't know all of these too 😂Thanks James, you're always positive person 👏🏻

  • @SebastianPerezG
    @SebastianPerezG 2 года назад +2

    Are you learning spanish ?? because i saw many words highlighted and translated to spanish

    • @JamesQQuick
      @JamesQQuick  2 года назад +2

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

    • @erickheredia8910
      @erickheredia8910 2 года назад

      @@JamesQQuick Nice.

    • @Zeeker125
      @Zeeker125 2 года назад

      @@JamesQQuick what's the name of the extension?

    • @Niweera
      @Niweera 2 года назад

      The name is Toucan.

  • @TesterAnimal1
    @TesterAnimal1 2 года назад +2

    How do you avoid recursion in real life without sticking to trivial problems?

    • @CompiledGabriel
      @CompiledGabriel 2 года назад

      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

  • @demarcjohnson
    @demarcjohnson 2 года назад +1

    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)

    • @tinmancode
      @tinmancode 2 года назад

      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

    • @taragnor
      @taragnor 2 года назад

      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.

  • @kunalpandey3782
    @kunalpandey3782 2 года назад

    How much JavaScript one should know before jumping on to the frameworks ?

    • @tinmancode
      @tinmancode 2 года назад

      fall a few times and pick up your self, plus you will learn while figuring things out,
      you can start anywhere

    • @dineshd9118
      @dineshd9118 2 года назад

      @@tinmancode Thanks dude,,That's how I do learn,,,

  • @DanEllis
    @DanEllis 2 года назад

    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.

  • @_boris
    @_boris 2 года назад

    thanks for sharing, very handy

  • @ofskittlez
    @ofskittlez 2 года назад +1

    Ah so JavaScript stack is like Magic: The Gathering stack.

  • @Salah-YT
    @Salah-YT 2 года назад +1

    thx bro

  • @codeaperture
    @codeaperture 2 года назад

    Just lacked timestamps!

  • @andrewrico8321
    @andrewrico8321 2 года назад

    When you realized you "know" more Javascript than you could think.

  • @AndreiNedelus
    @AndreiNedelus 2 года назад +1

    I don't get it why people ask me questions about object prototype, call vs apply for a React position.

  • @lovelytingy
    @lovelytingy 2 года назад +1

    best as always

  • @soniablanche5672
    @soniablanche5672 2 года назад

    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)

    • @harleyspeedthrust4013
      @harleyspeedthrust4013 2 года назад

      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.

  • @arcadeduo7101
    @arcadeduo7101 2 года назад +1

    As all humans do, no one knows everything.

  • @wolfgangdelaine5284
    @wolfgangdelaine5284 2 года назад

    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.

    • @Drakan21
      @Drakan21 2 года назад

      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.

    • @wolfgangdelaine5284
      @wolfgangdelaine5284 2 года назад

      @@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.

  • @mageprometheus
    @mageprometheus 2 года назад

    Recursion? You obviously haven't spent enough time learning erlang 😄

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-0314}

  • @cauxxx2454
    @cauxxx2454 2 года назад

    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

    • @rdow
      @rdow 2 года назад

      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.

  • @TesterAnimal1
    @TesterAnimal1 2 года назад +2

    Oh dear. It seems you don’t understand what a prototype is.

    • @SubliemeSiem
      @SubliemeSiem 2 года назад

      This guy doesn't seem to understand a lot of things.

  • @larsthomasdenstad9082
    @larsthomasdenstad9082 2 года назад

    You should really revisit the Call Stack, because this is not correct.

    • @JamesQQuick
      @JamesQQuick  2 года назад +1

      Feel free to add any clarifications. I'm sure the explanation wasn't 100% correct in every way in an impromptu reaction video

    • @larsthomasdenstad9082
      @larsthomasdenstad9082 2 года назад

      @@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.

    • @larsthomasdenstad9082
      @larsthomasdenstad9082 2 года назад +2

      @@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.

    • @harleyspeedthrust4013
      @harleyspeedthrust4013 2 года назад

      @@larsthomasdenstad9082 lol still waiting for that rebuttal to your incorrect knowledge

    • @larsthomasdenstad9082
      @larsthomasdenstad9082 2 года назад

      @@harleyspeedthrust4013 If you are reading impaired we can do it on a Zoom-call. Are you reading impaired?