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
What is a Constructor Function in JavaScript? 🎉🕺🏻👨🏻💻
@ajaymishra1511
9 ай бұрын
Love your content . You make things super easy
@lazycoder7139
8 ай бұрын
dfds
@lazycoder7139
8 ай бұрын
dsdsf
@lazycoder7139
8 ай бұрын
dfsd
I am watching every chapter with the same excitement (and anxiety) as a breaking bad episode. Awesome teaching, thanks 🤯👏
@ColorCodeio
Жыл бұрын
Haha this is the best comment I've ever got.
@g_pazzini
7 ай бұрын
too bad no mr white 😂😂😂
Loving these, really well put together, the videos look great, and the ideas are really clear. Keep it up 👍.
@ColorCodeio
2 жыл бұрын
Making episode 7 as we speak :) Should be out soon.
This needs 100x more views then it does. Looking forward to the rest of the series when you upload it. Great work!
@ColorCodeio
2 жыл бұрын
Thanks Husam! Next videos dropping next week.
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
2 жыл бұрын
Thank you David
@EiandGi8Six
10 ай бұрын
yeah! People like Sina should stop working on projects and teach from kids to adults :D
An excellent job, mate. 👌🏼 Subscribed.
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
Жыл бұрын
Glad it helped!
Coolest teacher on KZread,live the explanation
@ColorCodeio
Жыл бұрын
Ty!
Thanks, I didn't even realise there was a difference between constructors and factory functions!
This is definitely great content. You're a natural.
@ColorCodeio
Жыл бұрын
👍👍
I'm loving your js videos. Pls keep it coming
@ColorCodeio
Жыл бұрын
Thank you! Will do!
amazing tutorial! it was so well explained, thank you! ♥
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!
I'm so hooked on this series. Top notch content and presentation.
@ColorCodeio
11 ай бұрын
Thank you
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
Жыл бұрын
Thanks for taking the time to write that
This was really helpful,Thank you so Much!!!!!
You are a great teacher. Thank you so much!!
@ColorCodeio
2 жыл бұрын
Thank you!
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
Жыл бұрын
Thank you 😊
Love your videos! Well done and appreciate all the context! Future video on all the extensions you use on VS?
@ColorCodeio
2 жыл бұрын
Good idea! Thanks.
It's the best explanation I've had ever 👍👍👍that a lot
Thx again! Your tutorials are really awesome!!
@ColorCodeio
3 жыл бұрын
Glad you like them!
Love your content and the way you aproach everything! keep the good work!
@ColorCodeio
Ай бұрын
I appreciate that!
Excellent explanation--thank you so much!!!
@ColorCodeio
2 жыл бұрын
You’re very welcome
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
Жыл бұрын
Thanks 🙏
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!
Thanks for this video, your content is pure gold! Subscribed.
@ColorCodeio
2 жыл бұрын
Awesome, thank you!
Wow. What a hidden gem of a video
@ColorCodeio
Жыл бұрын
Thank you 🙏
I loved learning about the hidden this in the constructor function. Now this.this and this.that makes this.sense!
@ColorCodeio
2 жыл бұрын
Haha awesome
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
2 жыл бұрын
Awesome. Thanks for your comment.
Great explanation! thank you so much
@ColorCodeio
3 ай бұрын
You're welcome
Thanks for this content, I learned a lot!!
@ColorCodeio
6 ай бұрын
Glad to hear it!
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
5 ай бұрын
Awesome
thanks for the directions.
The way you explain the stuff is just amazing.... Great content delivery.... Keep going champ 🏆.... Love form INDIA.♥️
@ColorCodeio
Жыл бұрын
Thank you!
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
Thank you so much, I subscribed!
@ColorCodeio
2 жыл бұрын
Awesome!
thanks for the explaination sir. hope god bless u
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
Жыл бұрын
Thanks Michael!
Beautiful.I'm crying.
@ColorCodeio
2 жыл бұрын
:)
this guy is hilarious, thank you indeed for clearing my doubt! i like the way of your teaching for newbie like me
@ColorCodeio
2 жыл бұрын
Thanks!
Awesome video thanks 👌👌
@ColorCodeio
8 ай бұрын
👍🏼
Soon big companies will pick you up, They don't know yet how rare diamond you are, Exellent
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
Жыл бұрын
hah thanks!
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
2 жыл бұрын
Good suggestion. Thanks!
thanks for this video
Thanks for another awesome tutorial! (Btw I'd make that chef take the first bite...)
@ColorCodeio
9 ай бұрын
Good call!
WOW tu expliques très bien mon gars
Thanks sina, from iran😊
@ColorCodeio
2 жыл бұрын
👋 You're welcome!
This is really awesome. React does this
Thanks for this
@ColorCodeio
2 жыл бұрын
You’re welcome
Thanks!
@ColorCodeio
Жыл бұрын
Thank you for the super thanks!
hell sina very well explanation Would yuo consider making another series called 10 things react developer should now but probably don't
@ColorCodeio
2 жыл бұрын
That would be really cool. Thanks for the suggestion.
DOM related examples were understandable. ☺☺
@ColorCodeio
11 ай бұрын
Great!
" Uughh, I'm bored already, who da fuq wrote this s*#t?" "You did!" 🙌
@ColorCodeio
2 жыл бұрын
Apparently I did
Please keep continue this series
@ColorCodeio
3 жыл бұрын
More coming soon
You seem like naturally has a teacher
@ColorCodeio
2 жыл бұрын
Thanks
Fantastic content mate.
@ColorCodeio
2 жыл бұрын
Thank you
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
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!
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
2 жыл бұрын
Depends what exactly you need. Message me on Instagram and we chat talk @colorcode.io
If John Oliver knew Javascript it would sound like this .... Brilliant!
@ColorCodeio
2 жыл бұрын
Haha thanks
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.
Thanks for the video man, just wondering - what text editor do you use here, once presenting your code?
@ColorCodeio
2 жыл бұрын
Chrome DevTools :)
@Linuxdeveloper
2 жыл бұрын
@@ColorCodeio Hahaha 😂 I didn't see that coming 😂😂😂 Thanks man 😂
Please make a series on NodeJS full course
why you are not making more content like this??..it's great
@ColorCodeio
2 жыл бұрын
Lots more content coming soon.
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?
thanks
@ColorCodeio
Жыл бұрын
👊
Voila !! you are amazing!! When are you gonna post another video? I am super excited . Thanks alot.
@ColorCodeio
3 жыл бұрын
Very soon!
What's the difference between constructor function and normal function? We can use the normal one for this example
do you still consider SuperElement as constructor function even if youre not declaring the constructor function?
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.
How this is getting binded inside the arrow function
Creepy Craig!!! lol 🤣🤣🤣
@ColorCodeio
5 ай бұрын
He’s trying his best
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
Жыл бұрын
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
Жыл бұрын
@@ColorCodeio oh awesome. Thanks so much for the reply! You the MVP.
why isn't the following syntax used ? Thanks For example: class Car { constructor(brand) { this.carname = brand; } } const myCar = new Car("Ford");
Why it's this.el in constructor element rather than this.type = type?
Excuse me, I thought you can't use an arrow function in a direct object method on this keyword?
JS object constructors are like C templates
Great video but work on the typos!
Magic🤣🤣
@ColorCodeio
Жыл бұрын
lol
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
2 жыл бұрын
Haha you noticed! It's there to grab the attention of CSS babies.
@cestlavieeee
2 жыл бұрын
@@ColorCodeio true:) designer turned coder.
youre so cool 😂
Not clear for me , sad. I'm learning Front-end 6 months
Hahahha who the F wrote this!? 😂😂
sina and qoli ? persian much ? lol
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.
"time is Monee" 😂 great talk.. I just realized how much time i wasted in my life.
@ColorCodeio
Жыл бұрын
Now that you’re saving time hopefully you’ll save some moneeee
Thanks for this
@ColorCodeio
2 жыл бұрын
You’re welcome