What is Object-oriented Programming? (JavaScript Tutorial)
- January 4, 2024
- Posted by: MainInstructor
- Category: Go JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704407199_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: What is Object-oriented Programming? (JavaScript Tutorial)
Hello everyone this video is for you if you’ve heard the phrase object-oriented programming before you have no idea what it is you just know that you should probably learn about it now this video assumes you’ve already watched my JavaScript in half an hour video so if you don’t already know how
To create a new JavaScript file add it to an HTML page and open the developer tools console and your web browser I’d recommend watching that video first having said that let’s roll up our sleeves and jump over to our text editors in a new blank javascript file
That we’ve already included in an HTML page and let’s begin by simply logging a test message to the console so we can say console dot log quotes this is a test now if we save this and jump to the browser and refresh and here we see this
Is a test let me make this text a bit larger so it’s easier to read all right and now let’s jump back to our text editor and try something a bit more interesting let’s log another message to the console that reads hello my name is John Doe and my favorite color is blue
And then let’s actually copy and paste this entire line and in the second copy let’s change the name to Jane Smith and let’s change her favorite color to green now if we save this and refresh the browser no surprises here this is exactly what we would expect but as a
Developer as a programmer this code should drive you insane because it is very repetitive the only unique aspects of each line are the name values and the color values everything else is part of a pattern that we can define once and then recycle so let’s delete all of this
Code and let’s create a function that we can use time and time again so let’s give this new function a name of person and what do we want this function to actually do we want to log a message to the console that reads hello my name is blank and my favorite color
Is blank and we want to include a closing period and we want to end this line with a semicolon okay now we can simply call this function once for John and once for Jane so down on a new line let’s call the person function that we just created
Let’s fill in this first blank value by passing an argument of John Doe and then we can fill in the next blank by including a comma and passing an argument of blue let’s add a semicolon here and now let’s call the person function again for Jane so the first
Argument is her name Jane Smith and the second argument will be her favorite color green so if each time we are calling the person function we are passing it two arguments a name and a color we better make sure that up in our function definition we include two
Parameters to receive those incoming two arguments let’s call the first one name and let’s call the second one fav color okay now within the actual body of our function we can access the argument values that are being passed in by replacing these blanks with the name of our parameters there is no magical
Variable named blank I only added that temporarily as a placeholder so let’s replace this first blank with our name parameter and let’s replace the second blank with our fav color parameter so if I save this and refresh in the browser we see that nothing changes the exact
Same two sentences are being output but behind the scenes we know that our code is less repetitive let’s go ahead and take things a step further and continue to improve our code so within this hypothetical application we can imagine that maybe in the future we would need to reference John’s name again
Or his favorite color again now because we didn’t store these values anywhere if we wanted to reference these values outside of this function we would have to manually type out John Doe again and we would have to manually type out blue again and that would be repetitive now
One way around that would be to create individual variables so for example we could say var John name equals John Doe and we could create another variable named John fav color equals blue and then we can use these variables throughout our entire application so for example when we call the person function
For John instead of actually spelling out any values we can simply pass in those variable names as arguments so we could say John name comma John fav color and if I save this and refresh in the browser we see the exact same result so our code is technically working we are
Storing data about John within these variables and then we are accessing that data later on but we can do better this code just feels a bit sloppy or disorganized to me because you and I know that these two variables are intrinsically related to each other they are both about John but currently we
Don’t see that relationship reflected in our code so the question becomes how do we add structure to our data well remember that this is a lesson on object-oriented programming so surprise surprise the thing that is going to save us here is an object so let’s delete these two individual variables and
Instead create an object for John so let’s save our John equals and a pair of curly brackets we’ll create an object now within this single object we can add anything and everything that has to do with John so we can give this John object a property of name and we can
Give it a value of John Doe and we can give this object property named favorite color and give it a value of blue so now all of our data about John lives within a single unified John object and accessing these object properties is a piece of cake so
For example down within this function call these variables no longer exist so we want to replace these with references to the object properties so if we want to access John’s name we can reference this property by simply typing John dot and then the name of the property that
We want so name alright and we can access the favorite color property by simply typing the name of the object John dot favorite color so if I save this and refresh in the browser once again we see the exact same result now at this point you might be wondering why
There’s a big fuss over objects what’s the big deal I mean yeah it’s nice that we added a bit of structure to our data but this doesn’t feel earth-shattering you might be thinking that object-oriented programming is a bit overhyped but what if I told you that we can store
More than just simple properties or variables like this within an object what if I told you that we can also store functions within an object ah so this is where things get a bit exciting let’s go ahead and delete this function that we’ve been working on and let’s
Also delete these two calls to that function and let’s go ahead and add a function within this John object so at the end of this line let’s add a comma let’s create a new piece of this object named greet and greet is not going to contain data like these two lines greet
Is going to contain behavior so greet will be a function as a quick example let’s make this function logout a bit of text to the console console log o hello now if I save this and refresh in the browser we see that our console is empty and that’s because we defined the
Function but we never called the function now just like we access these properties by typing John dot name or john dot favorite color we can call this function by simply typing john dot greet so if we save this and check out the browser we see oh hello
This means that one variable or object can contain all of the data and behavior that it needs to operate so object-oriented programming is about getting into a mindset where you stop thinking in terms of individual loose variables and functions and you begin thinking in terms of cohesive self-sufficient objects and an object is
Just an entity that has data and behavior or another way of thinking about it is that it’s an entity that has nouns and verbs so in our example John is the object name is a noun favorite color is a noun greet is a verb it’s an action it’s a
Behavior we use the function to make something happen now just a really quick vocabulary note in the programming world when we have a function that belongs to an object like this we no longer refer to it as a function but instead we call it a method and we could add as many
Different methods to this object as we wanted so John is a person what sort of things can a person do we could add a walk method or a run method or a jump method you get the idea so now that we have a general understanding of what an
Object is let’s go ahead and complete the greet method because we didn’t just want it to say oh hello we wanted it to say hello my name is John dot name and my favorite color is John dot favorite color and then add in a closing period and if we
Save this and refresh in the browser we see our same old trusted sentence that’s great but remember we didn’t just have John whose favorite color is blue we also had Jane Smith whose favorite color is green so how do we want to create a new object for Jane well I mean
We could just copy and paste this so copy paste and then within this new copy we could just change the variable name to Jane and fill in these values so Jane Smith favorite color green you get the idea we could update all of this for
Jane but look let’s not do that it would be very repetitive because the greet method for both John and Jane is identical and there’s no good reason to spell out functionality like that more than once so this was a bad idea let’s delete it now there are several
Different ways to create an object the way that we created the John object gets the job done but it isn’t the most efficient tool for the job when we want to create multiple objects that are very similar to each other so let’s actually delete everything that we have and try something new let’s
Create a reusable blueprint or recipe that spells out what a person object should be a reusable blueprint for objects is commonly referred to as a class in JavaScript we can create a reusable blueprint like that by leveraging something called a constructor function so let’s create a
New function let’s name it person and in the programming world it’s a common convention to begin our blueprint name with a capital letter we don’t have to do this it’s just a stylistic thing that will make our code easier to understand for other developers now you might be
Thinking that this looks like a regular function what makes it a constructor function well it all depends on the way that we actually use the function so check this out we know that we are going to want to create an object named John but instead of opening up a pair of
Curly brackets and listing all of the properties and methods that we want we can simply say new person the word new in JavaScript is an operator that will create a new instance our person object type or in other words this will create a new object using our person blueprint this means that our
John object will contain anything that we list within this constructor function so let’s say that all person objects should have a method named greet within this constructor function we can simply say this dot greet we will learn what the key word this means in just a moment
But for now let’s complete this method equals and then create a function as a quick example let’s just log out a bit of text to the console that says hello there now because we added this method to our blueprint or recipe this means that our John object now has a method
Named greet so let’s test it out let’s take it for a spin let’s say John dot greet so if we save and refresh in the browser hello there so we know that we are also going to want to create a Jane object so let’s save our Jane equals new
Person and we can rest assured that Jane also has a method named greet so if I save this we see hello there once from John and once from Jane now just a moment ago I promised that we would learn what the this keyword means the this keyword is what allows our
Blueprint function to be flexible to be recyclable the value of this changes depending on how when and where this function is called so let’s walk through an example when we create the John object and we call the constructor function in that particular instance the this keyword refers to our John object
But when we call this function again to create the Jane object in that instance when this function runs the keyword this has a value of the Jane object so I think you get the idea we can use the this keyword to refer to whichever object is currently being created
Alright now let’s get back to the task at hand because our work is not complete yet remember that we also wanted each person object to store the person’s full name and their favorite color so let’s add a couple of properties to our blueprint in
Order to store that data so we can add a new line let’s begin with their name so this dot name equals and we can’t just type John Doe because we want our blueprint to be recyclable we want this to make sense for all objects not just
The John object so what we can do instead is include each person’s full name as an argument when we call our person constructor function so down on this line for John we can include an argument with his full name John Doe and let’s do the same thing for Jane Jane
Smith and then within the signature for our constructor function we can add a parameter to receive that incoming name we could name the parameter anything we’d like let’s just go with full name and then within this function on this line we can just say this dot name equals full-name all right now let’s
Also store each person’s favorite color so down here when we call the constructor function once for each object let’s include another argument with their favorite color so John’s is blue and Jane’s favorite color is green let’s add a second parameter to our person function to receive that incoming
Color value let’s call it fav color all right and then let’s add a property for each object named favorite color and it should simply equal the color that is getting passed in so fav color all right now at this point anywhere within our application if we want it to access
John’s name we could simply type John dot name or if we wanted to access Jane’s favorite color we could simply type Jane dot favorite color but we don’t need to do that what we do need to do is update our greet method to use our old trusted text so we didn’t just want
This to say hello there we wanted it to say hello my name is this dot name and my favorite color is this dot favorite color and then add a closing period so if we save this and refresh in the browser we see the two sentences that we were hoping to see
Only this time our code is object-oriented so now that we have these clean objects with these useful methods our code down here feels squeaky clean it’s very easy to read and immediately understand what’s going on and now that this code is complete we don’t really need to look at it or think
About it it would be nice if we could tuck this class code away into a separate file so that it’s out of sight out of mind and that is exactly what we are going to learn how to do in our next lesson let’s keep things rolling and I
Will see you then thanks for watching this excerpt from my new get a developer job course I hope you feel like you learn something and if you’d like to check out the full video course there’s a link to it in the description thanks again for tuning in and I’ll see you in
A new video next Tuesday
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
A very god teacher !
as someone who's long criticised the over-use of objects, I have to say you've done an excellent video here. Objects are merely a way of storing data that can help organise programmes by grouping connected data together and can, sometimes, reduce repetition. In large projects they may also make it easier to avoid naming conflicts as a variable name inside one object is never confused with that in another.
I know this video is 6 years old and you likely don't see comments at this point, but in case you do, I have to say you are the best freaking instructor around. I can't tell you how many times over the years I've tried to convert my old non OOP brain to OOP, and only now in this video does it make sense. Thank you so much!
God bless you …thanks
Your are one of the best teacher out here
Please make more video of JavaScript ❤️ Your teaching method is so good man
Thanks a lot
I am alergy to cat. please avoid
Thank you! I definitely learned something! I was trying to find the main purpose of oop, now I found it. Thanks!
💯👍
At the end you said “next class”. Which video should I watch next?
SubhanAllah, what a beautiful explanation!! MashaAllah, may Allah bless you.
Sir,I have a doubt in oop in JavaScript.when can implement anything in JavaScript without oop also.Then what is the use of oop in JavaScript?When do We use oop in JavaScript?
Sir,I have a doubt in oop in JavaScript.when can implement anything in JavaScript without oop also.Then what is the use of oop in JavaScript?When do We use oop in JavaScript?
Best didactic on the subject I've seen so far.
+1
5:54 "So the question becomes: how do we add structure to our data?"
ARRAYS ?!?!?!?
18:13 "our code down here feels squeaky clean"
IMHO, a procedural code (as mentioned at 4:15) would still be much cleaner:
function greet( fullName , favcolor ) {
console.log("Hello, my name is " + fullName + " and my favorite color is " + favColor + ".");
}
greet("John Doe", "blue");
greet("Jane Smith", "green");
18:31 "that is exactly what we are going to learn how to do in our next lesson"
Where is the next lesson ???
This is the best explanation that I gotten from a video on objects.
well done in your explanations – almost all videos on this topic do not explain why use objects like this, only how… cheers!
{2021-09-07}
anyone say that what he uses to drag that mouse black shadow box?