What is Constructor Function in JavaScript? - JS Tutorial

What are Constructor Functions in JavaScript?
JavaScript Constructor Functions from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
This is episode 4 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 4, we’re talking about Constructors and Constructor Functions, the idea behind them, the problem they solve, and how they're different from Factory Functions. Episode 4: Constructor Functions. Let’s go!
All the code from this series is available here:
github.com/ColorCode/js-10-th...
0:00:00 Intro
0:01:04 What is a Constructor Function?
0:02:57 The concept
0:05:30 The code
0:09:53 Another example
0:15:49 Summary
0:16:48 Outro

Пікірлер: 154

  • @ColorCodeio
    @ColorCodeio3 жыл бұрын

    What is a Constructor Function in JavaScript? 🎉🕺🏻👨🏻‍💻

  • @ajaymishra1511

    @ajaymishra1511

    9 ай бұрын

    Love your content . You make things super easy

  • @lazycoder7139

    @lazycoder7139

    8 ай бұрын

    dfds

  • @lazycoder7139

    @lazycoder7139

    8 ай бұрын

    dsdsf

  • @lazycoder7139

    @lazycoder7139

    8 ай бұрын

    dfsd

  • @paulam.moyano1775
    @paulam.moyano1775 Жыл бұрын

    I am watching every chapter with the same excitement (and anxiety) as a breaking bad episode. Awesome teaching, thanks 🤯👏

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Haha this is the best comment I've ever got.

  • @g_pazzini

    @g_pazzini

    7 ай бұрын

    too bad no mr white 😂😂😂

  • @isaacfidler937
    @isaacfidler9372 жыл бұрын

    Loving these, really well put together, the videos look great, and the ideas are really clear. Keep it up 👍.

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Making episode 7 as we speak :) Should be out soon.

  • @hrahman3123
    @hrahman31232 жыл бұрын

    This needs 100x more views then it does. Looking forward to the rest of the series when you upload it. Great work!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thanks Husam! Next videos dropping next week.

  • @davidwilson-brown6972
    @davidwilson-brown69723 жыл бұрын

    This is super clean. I'm hooked. The layout, the lighting, the pace for new coders (which I definitely am) are spot on. Thanks for creating great content wrapped in a professional package. It really makes a difference. If anyone is thinking of subscribing or liking, just stop thinking. Subscribe. Like. Done.

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thank you David

  • @EiandGi8Six

    @EiandGi8Six

    10 ай бұрын

    yeah! People like Sina should stop working on projects and teach from kids to adults :D

  • @CondeAlberto
    @CondeAlberto2 жыл бұрын

    An excellent job, mate. 👌🏼 Subscribed.

  • @johnnyholiday1150
    @johnnyholiday1150 Жыл бұрын

    Brilliant this is exactly what I needed mate! Wanted to make a memory game using classes for the div elements. This was really helpful. Thank you!! Carry on the amazing job cheers!!!!

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Glad it helped!

  • @TheCinematicTola
    @TheCinematicTola Жыл бұрын

    Coolest teacher on KZread,live the explanation

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Ty!

  • @lewitness1759
    @lewitness1759 Жыл бұрын

    Thanks, I didn't even realise there was a difference between constructors and factory functions!

  • @genesipes8532
    @genesipes85322 жыл бұрын

    This is definitely great content. You're a natural.

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    👍👍

  • @omersoncruz1081
    @omersoncruz1081 Жыл бұрын

    I'm loving your js videos. Pls keep it coming

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thank you! Will do!

  • @user-sz5yz3zr7f
    @user-sz5yz3zr7f4 ай бұрын

    amazing tutorial! it was so well explained, thank you! ♥

  • @ndavid24
    @ndavid249 ай бұрын

    I been on the self taught route and these videos have been by FAR the best out there. Thank you for what you do, WE SEE AND APPRECIATE YOU!

  • @alex_blue5802
    @alex_blue580211 ай бұрын

    I'm so hooked on this series. Top notch content and presentation.

  • @ColorCodeio

    @ColorCodeio

    11 ай бұрын

    Thank you

  • @NcVelocity
    @NcVelocity Жыл бұрын

    I like the way you teach and the video quality and the code snippets are way better than someone talking and going through with and just speaking quickly. Good job and thank you!!

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thanks for taking the time to write that

  • @aliissa1058
    @aliissa1058 Жыл бұрын

    This was really helpful,Thank you so Much!!!!!

  • @error0803
    @error08032 жыл бұрын

    You are a great teacher. Thank you so much!!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thank you!

  • @princessceballos
    @princessceballos Жыл бұрын

    I'm not sure what i'm more impressed by, your editing or the explanations. Ivy-league like quality education for FREE! Thank you.

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thank you 😊

  • @matt.mattox3518
    @matt.mattox35182 жыл бұрын

    Love your videos! Well done and appreciate all the context! Future video on all the extensions you use on VS?

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Good idea! Thanks.

  • @tetianazhuchenko2182
    @tetianazhuchenko2182 Жыл бұрын

    It's the best explanation I've had ever 👍👍👍that a lot

  • @LeetCodeSimplified
    @LeetCodeSimplified3 жыл бұрын

    Thx again! Your tutorials are really awesome!!

  • @ColorCodeio

    @ColorCodeio

    3 жыл бұрын

    Glad you like them!

  • @Luispaulino-tp7tv
    @Luispaulino-tp7tv2 ай бұрын

    Love your content and the way you aproach everything! keep the good work!

  • @ColorCodeio

    @ColorCodeio

    Ай бұрын

    I appreciate that!

  • @Misfittykitty
    @Misfittykitty2 жыл бұрын

    Excellent explanation--thank you so much!!!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    You’re very welcome

  • @bereketsisay1791
    @bereketsisay1791 Жыл бұрын

    You are doing an awesome job. keep going man.Its kinda weird you have this little subscribers cause you have such quality contents, but its guaranteed you will blow up with these contents.

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thanks 🙏

  • @EiandGi8Six
    @EiandGi8Six10 ай бұрын

    GREATE GREAT GREAT THEACHER! Evertything in your video is really accurate, from the graphic the music and timing! it's really rare find people that teach the way you do! Go on! and Thank you!

  • @erickchavez4551
    @erickchavez45512 жыл бұрын

    Thanks for this video, your content is pure gold! Subscribed.

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Awesome, thank you!

  • @tigana
    @tigana Жыл бұрын

    Wow. What a hidden gem of a video

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thank you 🙏

  • @RaelindaWoad
    @RaelindaWoad2 жыл бұрын

    I loved learning about the hidden this in the constructor function. Now this.this and this.that makes this.sense!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Haha awesome

  • @riodannn
    @riodannn2 жыл бұрын

    i wanna really thank you, i pass all day long trying to undertand 'this', and you explain like a god, and blow my mind, thanks, keep the good work, please

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Awesome. Thanks for your comment.

  • @shaharyair4314
    @shaharyair43144 ай бұрын

    Great explanation! thank you so much

  • @ColorCodeio

    @ColorCodeio

    3 ай бұрын

    You're welcome

  • @martinmorel2416
    @martinmorel24166 ай бұрын

    Thanks for this content, I learned a lot!!

  • @ColorCodeio

    @ColorCodeio

    6 ай бұрын

    Glad to hear it!

  • @hunin27
    @hunin276 ай бұрын

    This tutorial is made so well!! I'm learning javascript from Bro Code but i got a bit stuck on classes, your explanation is amazing!!

  • @ColorCodeio

    @ColorCodeio

    5 ай бұрын

    Awesome

  • @user-mw5bm2xh9x
    @user-mw5bm2xh9x7 ай бұрын

    thanks for the directions.

  • @sanjayloncha
    @sanjayloncha Жыл бұрын

    The way you explain the stuff is just amazing.... Great content delivery.... Keep going champ 🏆.... Love form INDIA.♥️

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thank you!

  • @worldwide_wes
    @worldwide_wes11 ай бұрын

    the funny intro earned my sub...just fell flat on my face in an interview where I was asked to explain one of these...time to brush up

  • @fizruk7644
    @fizruk76442 жыл бұрын

    Thank you so much, I subscribed!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Awesome!

  • @kevinmaas7867
    @kevinmaas7867 Жыл бұрын

    thanks for the explaination sir. hope god bless u

  • @michaeljohnson1576
    @michaeljohnson1576 Жыл бұрын

    So Sina...I've gone over objects like 4 times and this is the first time I'm seeing that objects create a 'this' variable and returns it when you use the New keyword in a constructor function. Being that that is the case, it really goes well with your teachings of factory functions and kinda trivialized a very hard to understand concept for me. Thank you so much for helping....You got my sub yesterday but if I could do it again, I would :).

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thanks Michael!

  • @abhishekshrivastava177
    @abhishekshrivastava1772 жыл бұрын

    Beautiful.I'm crying.

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    :)

  • @raxitlakhatariya5915
    @raxitlakhatariya59152 жыл бұрын

    this guy is hilarious, thank you indeed for clearing my doubt! i like the way of your teaching for newbie like me

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thanks!

  • @dantervil6103
    @dantervil61038 ай бұрын

    Awesome video thanks 👌👌

  • @ColorCodeio

    @ColorCodeio

    8 ай бұрын

    👍🏼

  • @awaismohsin345
    @awaismohsin345 Жыл бұрын

    Soon big companies will pick you up, They don't know yet how rare diamond you are, Exellent

  • @ankurgupta4696
    @ankurgupta4696 Жыл бұрын

    I request all the viewers to do like and comment the videos, because the content is really awesome, I am loving the Javascript after watching his videos

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    hah thanks!

  • @rathoreboys
    @rathoreboys2 жыл бұрын

    As a viewer I would suggest you to put the link to the playlist of video series, or any other video of your channel that you mention in the description box. Your content is great👍👍

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Good suggestion. Thanks!

  • @bilalbeny4172
    @bilalbeny41727 ай бұрын

    thanks for this video

  • @Ranbo5
    @Ranbo59 ай бұрын

    Thanks for another awesome tutorial! (Btw I'd make that chef take the first bite...)

  • @ColorCodeio

    @ColorCodeio

    9 ай бұрын

    Good call!

  • @user-hu8ki2je3h
    @user-hu8ki2je3h5 ай бұрын

    WOW tu expliques très bien mon gars

  • @mahdietaghavi3759
    @mahdietaghavi37592 жыл бұрын

    Thanks sina, from iran😊

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    👋 You're welcome!

  • @badbrother_2023
    @badbrother_2023 Жыл бұрын

    This is really awesome. React does this

  • @chrisdietrich1533
    @chrisdietrich15333 жыл бұрын

    Thanks for this

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    You’re welcome

  • @kerrydaniels8460
    @kerrydaniels8460 Жыл бұрын

    Thanks!

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Thank you for the super thanks!

  • @abelmarkos5753
    @abelmarkos57532 жыл бұрын

    hell sina very well explanation Would yuo consider making another series called 10 things react developer should now but probably don't

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    That would be really cool. Thanks for the suggestion.

  • @codepearls
    @codepearls11 ай бұрын

    DOM related examples were understandable. ☺☺

  • @ColorCodeio

    @ColorCodeio

    11 ай бұрын

    Great!

  • @simonshurety3870
    @simonshurety38702 жыл бұрын

    " Uughh, I'm bored already, who da fuq wrote this s*#t?" "You did!" 🙌

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Apparently I did

  • @Yash-et9ru
    @Yash-et9ru3 жыл бұрын

    Please keep continue this series

  • @ColorCodeio

    @ColorCodeio

    3 жыл бұрын

    More coming soon

  • @mathanprakash5685
    @mathanprakash56852 жыл бұрын

    You seem like naturally has a teacher

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thanks

  • @kresimircosic3753
    @kresimircosic37532 жыл бұрын

    Fantastic content mate.

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Thank you

  • @Chris2phaBrown
    @Chris2phaBrown3 жыл бұрын

    Cool vid, always good to see videos about different ways to do things that that I once knew, but have probably forgotten, it seems the more I learn about all the new fancy frameworks, the more I forget about basic JS :( A couple of things I was thinking about when watching the video.. What happens when you call the constructor function without the new keyword? How is the constructor different from the factory function as far as memory is concerned, I think, if there was a talk function in both the factory and constructor, Each item created with the factory function would have it's own instance of the talk function, but with the constructor, each item would reference a single instance of a talk function... hmm, I could be wrong though lol. I was waiting for you to show the structure of the object created with the constructor to see if the function was placed on the prototype. Keep the cool videos coming mate :)

  • @ColorCodeio

    @ColorCodeio

    3 жыл бұрын

    Chris! Always good to hear from you man. At the end of the day Constructor functions are just functions so if you don't use NEW then it'll just execute like any other function, but obviously it won't return the this object back so nothing happens other than what's in the function itself. Regarding the memory footprint I think you're right. One of the things I failed to mention in the video is how using constructors you're pointing to a 'source of truth' object where you can add methods to the prototype property and add functionality to your objects that's placed on one object. Where as factory functions don't follow that concept, they're copies of each other every single time. Thanks for pointing that out. Thanks again for always watching my stuff. We should catch up soon. Hope you're doing well down under!

  • @mosesmbadi4158
    @mosesmbadi41582 жыл бұрын

    Love your content man. I think I am ready for that interview now, hehe. Anyway, I love your set up. I am planning to start a KZread channel, I'm sort of a social Critique, do you have any tips on how to set up something like yours?

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Depends what exactly you need. Message me on Instagram and we chat talk @colorcode.io

  • @Edits-rashy
    @Edits-rashy2 жыл бұрын

    If John Oliver knew Javascript it would sound like this .... Brilliant!

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Haha thanks

  • @heisenbergsk21
    @heisenbergsk21 Жыл бұрын

    You have a nice way of explaining things but unique,you wouldn't make anyone bored of even boring top. Even tho I know most of the things you teach still I watch it coz you are too good.

  • @Linuxdeveloper
    @Linuxdeveloper2 жыл бұрын

    Thanks for the video man, just wondering - what text editor do you use here, once presenting your code?

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Chrome DevTools :)

  • @Linuxdeveloper

    @Linuxdeveloper

    2 жыл бұрын

    @@ColorCodeio Hahaha 😂 I didn't see that coming 😂😂😂 Thanks man 😂

  • @VikasChauhan1809
    @VikasChauhan18092 жыл бұрын

    Please make a series on NodeJS full course

  • @tanmaychotu665
    @tanmaychotu6652 жыл бұрын

    why you are not making more content like this??..it's great

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Lots more content coming soon.

  • @DevlogBill
    @DevlogBill Жыл бұрын

    Excellent video! But I had a question? I tend to write my constructor with a class. But I also write the constructor method under the class and even write super. I am still a newbie. Technically I am guessing it is the same?

  • @evilcom
    @evilcom Жыл бұрын

    thanks

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    👊

  • @varunsharma3775
    @varunsharma37753 жыл бұрын

    Voila !! you are amazing!! When are you gonna post another video? I am super excited . Thanks alot.

  • @ColorCodeio

    @ColorCodeio

    3 жыл бұрын

    Very soon!

  • @RezHimself
    @RezHimself Жыл бұрын

    What's the difference between constructor function and normal function? We can use the normal one for this example

  • @user-vv9wt7mb7x
    @user-vv9wt7mb7x Жыл бұрын

    do you still consider SuperElement as constructor function even if youre not declaring the constructor function?

  • @daubert4892
    @daubert4892Ай бұрын

    Maybe I am missing something but I don’t see the need for constructors, I am always using so-called factory functions to create my new structured objects. The return syntax is very intuitive. I also never use classes.

  • @user-fx6yv7jd2q
    @user-fx6yv7jd2q5 ай бұрын

    How this is getting binded inside the arrow function

  • @2ru2pacFan
    @2ru2pacFan7 ай бұрын

    Creepy Craig!!! lol 🤣🤣🤣

  • @ColorCodeio

    @ColorCodeio

    5 ай бұрын

    He’s trying his best

  • @TsipporahtheExplorer
    @TsipporahtheExplorer Жыл бұрын

    Can someone answer why when he did the click event, the elements came back not in order of the array? it returned: a, b, c, b, a, b ???

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    I just happen to be clicking on the elements in that order. That's not the order they were rendered in. I'm clicking on the elements in a window that you can't see.

  • @TsipporahtheExplorer

    @TsipporahtheExplorer

    Жыл бұрын

    @@ColorCodeio oh awesome. Thanks so much for the reply! You the MVP.

  • @colindante5164
    @colindante51642 ай бұрын

    why isn't the following syntax used ? Thanks For example: class Car { constructor(brand) { this.carname = brand; } } const myCar = new Car("Ford");

  • @havefun5519
    @havefun5519 Жыл бұрын

    Why it's this.el in constructor element rather than this.type = type?

  • @ultronsam1214
    @ultronsam1214 Жыл бұрын

    Excuse me, I thought you can't use an arrow function in a direct object method on this keyword?

  • @Nodsaibot
    @Nodsaibot Жыл бұрын

    JS object constructors are like C templates

  • @blalezarian
    @blalezarian9 ай бұрын

    Great video but work on the typos!

  • @rohanagrawal5747
    @rohanagrawal5747 Жыл бұрын

    Magic🤣🤣

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    lol

  • @cestlavieeee
    @cestlavieeee2 жыл бұрын

    its killing me that your face next to the code is a squircle and not a circle, seems radius of the cutout is a bit smaller

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    Haha you noticed! It's there to grab the attention of CSS babies.

  • @cestlavieeee

    @cestlavieeee

    2 жыл бұрын

    @@ColorCodeio true:) designer turned coder.

  • @saragholampour8448
    @saragholampour84483 жыл бұрын

    youre so cool 😂

  • @risselify
    @risselify9 ай бұрын

    Not clear for me , sad. I'm learning Front-end 6 months

  • @dustinhxc
    @dustinhxc Жыл бұрын

    Hahahha who the F wrote this!? 😂😂

  • @NiiiGhtyR
    @NiiiGhtyR Жыл бұрын

    sina and qoli ? persian much ? lol

  • @hassansyed6087
    @hassansyed6087 Жыл бұрын

    I'm not sure why you found it so easy to call the expression on the guy's face "creepy" ? He's just a normal chef posing for a picture with a dish he made. What is so creepy about that? Don't get caught up in 2023 feminism ideology where every guy, even slightly showing any expression of joy in a picture, is considered to be predatory. Good explanations for your JS material but I just didn't appreciate how you put men down like that. Be better.

  • @dssdfsfddsf3761
    @dssdfsfddsf3761 Жыл бұрын

    "time is Monee" 😂 great talk.. I just realized how much time i wasted in my life.

  • @ColorCodeio

    @ColorCodeio

    Жыл бұрын

    Now that you’re saving time hopefully you’ll save some moneeee

  • @chrisdietrich1533
    @chrisdietrich15333 жыл бұрын

    Thanks for this

  • @ColorCodeio

    @ColorCodeio

    2 жыл бұрын

    You’re welcome