The Importance of THIS in Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ก.ย. 2024
  • 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/dev...
    #programming #javscript

ความคิดเห็น • 73

  • @developedbyed
    @developedbyed  ปีที่แล้ว +36

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

    • @maherylala2153
      @maherylala2153 ปีที่แล้ว +4

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

    • @avikroy1236
      @avikroy1236 ปีที่แล้ว +1

      Nice one! "this" always becomes a headache

  • @shubhamrasal8930
    @shubhamrasal8930 ปีที่แล้ว +22

    Please continue with this format. It's really fun and gooood 🔥

  • @BMikel
    @BMikel ปีที่แล้ว +3

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

  • @thegrumpydeveloper
    @thegrumpydeveloper ปีที่แล้ว +4

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

  • @zhanezar
    @zhanezar ปีที่แล้ว +2

    please do more of these , thsi was really great

  • @danmaina9731
    @danmaina9731 ปีที่แล้ว

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

  • @prasanthmoolethodi3152
    @prasanthmoolethodi3152 ปีที่แล้ว +3

    Thanks a lot bro

  • @cypher0166
    @cypher0166 ปีที่แล้ว +1

    My favorite Dev

  • @itsnerd404
    @itsnerd404 ปีที่แล้ว +2

    Thanks ED Really Appreciate Your Hard Work

  • @cobrax707
    @cobrax707 ปีที่แล้ว +1

    20:28 you little svelty boyyy

  • @j-0-n-e-z
    @j-0-n-e-z ปีที่แล้ว +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

  • @CodeOnBlocks
    @CodeOnBlocks ปีที่แล้ว

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

  • @icoderdev
    @icoderdev ปีที่แล้ว +3

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

  • @karlstenator
    @karlstenator ปีที่แล้ว

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

  • @francocrovo8394
    @francocrovo8394 11 หลายเดือนก่อน

    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.

  • @aljehammuaadh9079
    @aljehammuaadh9079 ปีที่แล้ว

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

  • @naranyala_dev
    @naranyala_dev ปีที่แล้ว

    the pure web, awesome series

  • @melvinwelton3528
    @melvinwelton3528 ปีที่แล้ว

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

  • @RVAraghav
    @RVAraghav ปีที่แล้ว

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

  • @baahbernard4183
    @baahbernard4183 7 หลายเดือนก่อน

    You are amazing. 💫
    I learnt a lot.

  • @Jorgeee
    @Jorgeee ปีที่แล้ว

    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?

  • @joshmorgantech
    @joshmorgantech ปีที่แล้ว +1

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

  • @dauda-dev5554
    @dauda-dev5554 ปีที่แล้ว

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

  • @Darkfault
    @Darkfault 9 หลายเดือนก่อน

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

  • @ahad1031
    @ahad1031 ปีที่แล้ว +2

    Very helpful thanks😍

  • @salmanfarshisajib6512
    @salmanfarshisajib6512 ปีที่แล้ว +2

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

  • @user-gp6si9vw3j
    @user-gp6si9vw3j 10 หลายเดือนก่อน

    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!

  • @danielhultcodes
    @danielhultcodes ปีที่แล้ว

    I really appreciate these vanilla JS videos!

  • @ilkou
    @ilkou ปีที่แล้ว +5

    We can also do a 'return this' instead of 'return library' ✌🏼

    • @BMikel
      @BMikel ปีที่แล้ว

      yes Indeed

  • @n3uron_bloom938
    @n3uron_bloom938 ปีที่แล้ว +1

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

    • @CodeOnBlocks
      @CodeOnBlocks ปีที่แล้ว

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

    • @annisfun1993
      @annisfun1993 ปีที่แล้ว

      i think its Atom one dark

  • @samnmeje3486
    @samnmeje3486 ปีที่แล้ว +1

    What is your vscode theme

  • @alfiartya23
    @alfiartya23 ปีที่แล้ว

    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!

  • @juliensavary
    @juliensavary ปีที่แล้ว

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

  • @kickflipz
    @kickflipz ปีที่แล้ว

    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!!! 😍

  • @jxs489
    @jxs489 6 หลายเดือนก่อน

    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.

  • @user-in2gp8zr4i
    @user-in2gp8zr4i ปีที่แล้ว

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

  • @joshcool
    @joshcool ปีที่แล้ว

    Love this!

  • @wisdomelue
    @wisdomelue ปีที่แล้ว

    this was a spectacular video🔥

  • @huseynfy
    @huseynfy ปีที่แล้ว

    Thank you!

  • @taylortoast2
    @taylortoast2 ปีที่แล้ว

    Very good, Ed!

  • @deepumon.d3148
    @deepumon.d3148 ปีที่แล้ว +1

    Great 🥰

  • @louptreize
    @louptreize ปีที่แล้ว

    Amazing 😲

  • @41ex
    @41ex ปีที่แล้ว +1

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

  • @Seven77tw
    @Seven77tw 6 หลายเดือนก่อน

    thank you♥

  • @volavidinspiredclothing8984
    @volavidinspiredclothing8984 ปีที่แล้ว

    @developedbyed. Can you share your Gadget setups pls?

  • @ValleyDigitalMarketing
    @ValleyDigitalMarketing ปีที่แล้ว

    A breath of fresh air dudes got the formula down.

  • @waleedsharif618
    @waleedsharif618 ปีที่แล้ว

    In ReactJs we dont have “this”, right?

  • @kasiawu
    @kasiawu ปีที่แล้ว

    I love watching you. :D

  • @DeepLook1
    @DeepLook1 ปีที่แล้ว

    Pleaae make js videos that most use in javascript frameworks.

  • @naranyala_dev
    @naranyala_dev ปีที่แล้ว

    but with tailwind css

  • @samarnagar9699
    @samarnagar9699 ปีที่แล้ว

    discord where????

  • @pepumarius2006
    @pepumarius2006 ปีที่แล้ว +1

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

  • @aps69
    @aps69 ปีที่แล้ว

    Add chapters ed

  • @deepakbhange5715
    @deepakbhange5715 ปีที่แล้ว

    Isn't jQuery also do that

  • @ahmedsiddiqui2083
    @ahmedsiddiqui2083 ปีที่แล้ว

    Waiting for your redux full beginning to advance video 😢😢

  • @ilkou
    @ilkou ปีที่แล้ว

    use this comment replies to argue about next and svelte 🔥🔥

  • @millennia
    @millennia ปีที่แล้ว

    This could be a course 🥳🥹

  • @craizytech9056
    @craizytech9056 ปีที่แล้ว +1

    😂bruh not the sausage

  • @samnmeje3486
    @samnmeje3486 ปีที่แล้ว

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

  • @harmonreiner7992
    @harmonreiner7992 4 หลายเดือนก่อน

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

  • @omarkraidie
    @omarkraidie ปีที่แล้ว

    Get outta here! :D

  • @brandmasis
    @brandmasis หลายเดือนก่อน

    are you 25?

  • @kurdm1482
    @kurdm1482 ปีที่แล้ว

    what theme is that, please