The Importance of THIS in Javascript

SdĂ­let
VloĆŸit
  • čas pƙidĂĄn 1. 07. 2023
  • Check out my web development courses here đŸ”„
    developedbyed.com
    In this video, we dive into the power of JavaScript's "this" keyword and explore how it can be used to create a simple library for DOM manipulation and animation. With the help of examples and explanations, you'll learn how to leverage "this" in combination with "apply", "call", and "bind" to build your own jQuery-like functionality.
    We start by understanding the concept of "this" and its role in JavaScript. Then, we demonstrate how to create a lightweight library called miniQuery using the "this" keyword. The library allows you to select DOM elements, add classes dynamically, and apply fade-in and fade-out animations.
    Throughout the video, we explain each step in detail and provide clear code examples. By the end, you'll have a solid understanding of "this", apply", "call", and "bind", as well as how to create your own DOM manipulation library.
    Key topics covered in this video:
    - Introduction to "this" keyword in JavaScript
    - Exploring "apply", "call", and "bind"
    - Building a lightweight library using "this"
    - Selecting DOM elements and adding classes dynamically
    - Creating fade-in and fade-out animations
    🛮 Follow me on:
    Twitch: / developedbyed
    Twitter: / developedbyed
    Instagram: / developedbyed
    Github: github.com/developedbyed/
    #programming #javscript
  • Věda a technologie

Komentáƙe • 72

  • @shubhamrasal8930
    @shubhamrasal8930 Pƙed rokem +22

    Please continue with this format. It's really fun and gooood đŸ”„

  • @developedbyed
    @developedbyed  Pƙed rokem +36

    Let's take a break from all these frameworks and focus on what actually matters... Javascript

    • @maherylala2153
      @maherylala2153 Pƙed rokem +4

      Yes, a lot of people only know how to code with certain framework and not vanilla js which is totally weird

    • @avikroy1236
      @avikroy1236 Pƙed rokem +1

      Nice one! "this" always becomes a headache

  • @zhanezar
    @zhanezar Pƙed rokem +2

    please do more of these , thsi was really great

  • @danmaina9731
    @danmaina9731 Pƙed rokem

    I have never wrap my head around the this keyword until this video. Short and concise. Thanks very much.

  • @itsnerd404
    @itsnerd404 Pƙed rokem +2

    Thanks ED Really Appreciate Your Hard Work

  • @melvinwelton3528
    @melvinwelton3528 Pƙed rokem

    I love these! I've been coding for a few years and your videos are super helpful. So thank you 🙏

  • @dauda-dev5554
    @dauda-dev5554 Pƙed rokem

    These small tips, explanations of plain javascript are excellent :)

  • @ahad1031
    @ahad1031 Pƙed rokem +2

    Very helpful thanks😍

  • @karlstenator
    @karlstenator Pƙed rokem

    I've recently built m first Javascript class for input validation, and it works brilliantly. đŸ„ł So much easier to maintain and manage.

  • @BMikel
    @BMikel Pƙed rokem +3

    Great! Please keep up the series! Greetings from Ukraine, Buccha

  • @wisdomelue
    @wisdomelue Pƙed rokem

    this was a spectacular videođŸ”„

  • @danielhultcodes
    @danielhultcodes Pƙed rokem

    I really appreciate these vanilla JS videos!

  • @baahbernard4183
    @baahbernard4183 Pƙed 5 měsĂ­ci

    You are amazing. đŸ’«
    I learnt a lot.

  • @prasanthmoolethodi3152
    @prasanthmoolethodi3152 Pƙed rokem +3

    Thanks a lot bro

  • @user-gp6si9vw3j
    @user-gp6si9vw3j Pƙed 8 měsĂ­ci

    Thanks alot Ed, you're a gift to any aspiring or pro programmer and i enjoy this, much more i really do learn alot from your videos even though i cant comment on all of them or likes but worry not...opportunity will present itself at its time. keep up the good work!

  • @juliensavary
    @juliensavary Pƙed 11 měsĂ­ci

    great work im learning right by you ed! typescript is a yes for me

  • @taylortoast2
    @taylortoast2 Pƙed rokem

    Very good, Ed!

  • @naranyala_dev
    @naranyala_dev Pƙed rokem

    the pure web, awesome series

  • @RVAraghav
    @RVAraghav Pƙed rokem

    I love this video series! Thank you! Btw what’s your camera?

  • @thegrumpydeveloper
    @thegrumpydeveloper Pƙed rokem +4

    Once I mastered “this”, I spent the rest of my js career actively trying to avoid its complexity and have not missed it.

  • @icoderdev
    @icoderdev Pƙed rokem +3

    Thanks for always creating contents like these... ❀❀❀❀❀❀❀❀

  • @kickflipz
    @kickflipz Pƙed rokem

    Love this type of content, and yeah I agree I love learning what's happening under the hood all of these JavaScript frameworks. And I love and need to learn about typescript so yes please!!! 😍

  • @cypher0166
    @cypher0166 Pƙed rokem +1

    My favorite Dev

  • @joshcool
    @joshcool Pƙed rokem

    Love this!

  • @huseynfy
    @huseynfy Pƙed 11 měsĂ­ci

    Thank you!

  • @louptreize
    @louptreize Pƙed rokem

    Amazing đŸ˜Č

  • @francocrovo8394
    @francocrovo8394 Pƙed 9 měsĂ­ci

    This is great, and I guess that by saying "this" right now, I'm talking about the video...
    For some reason some hours ago I was wondering about how jQuery was made, all those chain functions, I didn't expect to get the answer here.

  • @alfiartya23
    @alfiartya23 Pƙed 11 měsĂ­ci

    I've been learning JS in 1 year, but this concept of Call, Apply and Bind really made me confuse everytime. Thanks Ed for this explanation video!

  • @salmanfarshisajib6512
    @salmanfarshisajib6512 Pƙed rokem +2

    I think focusing in javaScript is a great decision. ❀✌

  • @Seven77tw
    @Seven77tw Pƙed 4 měsĂ­ci

    thank you♄

  • @deepumon.d3148
    @deepumon.d3148 Pƙed rokem +1

    Great đŸ„°

  • @CodeOnBlocks
    @CodeOnBlocks Pƙed rokem

    What VS Code theme are you using? It's the best I've ever seen.

  • @cobrax707
    @cobrax707 Pƙed rokem +1

    20:28 you little svelty boyyy

  • @joshmorgantech
    @joshmorgantech Pƙed rokem +1

    Bro you're on the level where someone breathes Code 😀😀😀😂 Thanks so much for the service we appreciate your tutorials🙏🙏

  • @ilkou
    @ilkou Pƙed rokem +5

    We can also do a 'return this' instead of 'return library' âœŒđŸŒ

  • @Jorgeee
    @Jorgeee Pƙed rokem

    Why would we want to use bind instead of just taking a parameter with an object and accessing the object properties from inside the function? Is there any advantage?

  • @kasiawu
    @kasiawu Pƙed 11 měsĂ­ci

    I love watching you. :D

  • @volavidinspiredclothing8984

    @developedbyed. Can you share your Gadget setups pls?

  • @Darkfault
    @Darkfault Pƙed 7 měsĂ­ci

    Hey, do you use your drawing tablet as a second screen when coding?

  • @j-0-n-e-z
    @j-0-n-e-z Pƙed rokem +1

    Why do we need document.querySelectorAll.call(document, selector)? Isn't it just complicated version of document.querySelectorAll(selector)? I don't get it

  • @samnmeje3486
    @samnmeje3486 Pƙed rokem +1

    What is your vscode theme

  • @user-in2gp8zr4i
    @user-in2gp8zr4i Pƙed rokem

    Hi and thank you. Where do I can find console in edge browser?

  • @ValleyDigitalMarketing
    @ValleyDigitalMarketing Pƙed rokem

    A breath of fresh air dudes got the formula down.

  • @aljehammuaadh9079
    @aljehammuaadh9079 Pƙed rokem

    Its a nice video but which i didn't get is : when you call the call back function after querySelectorAll . Does call back function (call) take more than 1 parameter ???

  • @DeepLook1
    @DeepLook1 Pƙed rokem

    Pleaae make js videos that most use in javascript frameworks.

  • @n3uron_bloom938
    @n3uron_bloom938 Pƙed rokem +1

    What theme do you use for VScode? I like it :)

    • @CodeOnBlocks
      @CodeOnBlocks Pƙed rokem

      Did you find out what the theme was called? I'm trying to figure it out as well.

    • @annisfun1993
      @annisfun1993 Pƙed 11 měsĂ­ci

      i think its Atom one dark

  • @41ex
    @41ex Pƙed rokem +1

    no one's ever called me a sexy sausage before.... i like it....

  • @waleedsharif618
    @waleedsharif618 Pƙed rokem

    In ReactJs we dont have “this”, right?

  • @jxs489
    @jxs489 Pƙed 3 měsĂ­ci

    Hello Ed, i cannot find subtitle switcher like i watch your video on youtube. I want to buy this course but i'm not good at listening English, I need subtitle when watch video. Can you add subtitle on your website's course video.

  • @naranyala_dev
    @naranyala_dev Pƙed rokem

    but with tailwind css

  • @aps69
    @aps69 Pƙed rokem

    Add chapters ed

  • @ahmedsiddiqui2083
    @ahmedsiddiqui2083 Pƙed rokem

    Waiting for your redux full beginning to advance video 😱😱

  • @pepumarius2006
    @pepumarius2006 Pƙed rokem +1

    there is no magic to these frameworks. They are just JS with some compiler magic :)))

  • @samarnagar9699
    @samarnagar9699 Pƙed 11 měsĂ­ci

    discord where????

  • @deepakbhange5715
    @deepakbhange5715 Pƙed rokem

    Isn't jQuery also do that

  • @ilkou
    @ilkou Pƙed rokem

    use this comment replies to argue about next and svelte đŸ”„đŸ”„

  • @millennia
    @millennia Pƙed rokem

    This could be a course đŸ„łđŸ„č

  • @craizytech9056
    @craizytech9056 Pƙed rokem +1

    😂bruh not the sausage

  • @samnmeje3486
    @samnmeje3486 Pƙed rokem

    You didn't mention nuxt and Vue js 😂😂😂

  • @omarkraidie
    @omarkraidie Pƙed rokem

    Get outta here! :D

  • @harmonreiner7992
    @harmonreiner7992 Pƙed 2 měsĂ­ci

    your playlist is a mess...you have vids that are repeats of other vids...24,25,26,30,31,43,45

  • @kurdm1482
    @kurdm1482 Pƙed rokem

    what theme is that, please