What are Classes, Objects, and Constructors?

Web Dev Simplified · Intermediate ·💻 AI-Assisted Coding ·7y ago

Key Takeaways

Explains classes, objects, and constructors in JavaScript

Full Transcript

Are you confused by the terminology of object-oriented programming such as constructor, class, new keyword, instantiation, and so on? Well, in today's video, I'm going to be going over all of the basics of object-oriented programming so you no longer get confused by these words. Let's get started now. Easily the most confusing part about object-oriented programming is the differences between a class and an object. And simply put, a class is going to be a blueprint. Essentially, it defines all of the methods, it defines all of the different properties that our objects can have, but it doesn't actually give it any data or information. It's just a blueprint, a holder for what our object is going to look like. And an object on the other hand is an instantiated version of a class. Essentially, it's a specific version of a class that has all of the extra information filled in such as the different values for the properties and what all the methods are going to return. So, this is very similar to how a house and a blueprint work. A blueprint is going to be the same as a class. The blueprint defines what we want our house to look like. In general, it's going to be where the walls go, where the different rooms are, but the blueprint doesn't tell us what color the house is going to be or what furniture is going to be in that house. The actual object itself, or the house in this instance, is going to tell us what the color is and what the different furniture is going to be inside of it, but not the blueprint, which in our case is the class. And then, moving on from there, we have the new keyword. The new keyword is how we actually take a class and turn it into an object. And to do that, we use the constructor inside of the class. To make all of these different points concrete, let's look at an example in actual code using JavaScript. To illustrate this, we just have a blank JavaScript file, which we are going to first create a class in, which is going to be our blueprint. So, we're going to create a class. We're going to call it house because this class is going to be used to create house objects. And inside of here, what we need is a constructor. So, we can just type the keyword constructor, and the constructor is going to take all the parameters we want to put into our house when we create a new instance or a new object of that house. So, for example, we want to know the color of our house because every house we create is going to have a different color. And then inside of here, we can just set that color. So, we can say this.color is equal to color. And this is just going to save our color onto our house object itself that we're creating. Now, all we can do is come down here. We can create a variable. We're just going to call it house object because this is going to be the actual instantiated object of our house. We just want to set that equal to new house. And the reason we use this new keyword is because by putting the new keyword before the name of the class, which in our case house, it's going to call the constructor with everything we pass into the brackets here, these curly or these parentheses here. So, if we pass in a color, for example, red, now this is going to pass this red variable in here for color, and it's going to set it on our house. So, this is going to create us a new version of this house class, which is going to be an object, and it's going to save it in this house object variable. And for example, if we wanted to have a function on our house that got us all the furniture in our house, we could just say get furniture. And we could just say it takes nothing. And in here, it's just going to return us our furniture, which in our case is just a single sofa. And this function is going to be shared between all the different instances or all the different objects of our house class. So, let's create another house object here. We'll call it house object two. And we're going to make this one blue. And now what we want to do is we actually want to log out some information about our houses. So, we can come down here, and we can just console.log our first house object. And we just want to get the color of it. And we're also going to call that function, which is get furniture, and see what this is returning. We're going to do the exact same thing but for our second house down here. So, we're going to say house object two and two. Save that. And now let's actually see what that returns. If we see over here, we have red being returned as the color of our first house, and sofa being returned for our furniture. And you can see our blue house has blue being returned as the color. And again, sofa is being returned for the furniture because this function is on the definition of the class, which means it's shared between all the different objects, house object one and house object two. But, this color is being variable. It got passed into the constructor. So, this is being changed based on what we passed in here for our new house. In our case, the first one is red and the second one is blue. If you want to see more videos of me simplifying programming terminology, let me know down in the comments and I can turn this into a full series. Also, let me know what other terms you want me to cover in the future. Thank you very much for watching this video and have a good day.

Original Description

Object Oriented Programming is one of the most common programming patterns, but it can be incredibly confusing with all the new terminology. In this video I will be breaking down the basic Object Oriented Programming terms, Class, Object, Instance, Instantiate, and Constructor. By the end of this video you will have a complete understanding of how Classes, Objects, and Constructors interact and relate to one another. Class: Similar to a blueprint. It defines what its objects will look like (functions, parameters, etc.) Object: Similar to a house produced from a blueprint. It is an instance of a class and contains all the specific details of the class that are not shared with any of the other objects, such as the color for a house. Constructor: This is the method that is called when creating an object from a class. It is usually used to set all of the specific details of the object such as color in the house example. New: The new keyword is used before a class name to create an object using the class constructor. 🧠 Concepts Covered: - What are classes - What are objects - Objects vs Classes - How to create objects - How to create classes - What are constructors 🌎 Find Me Here: Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified #ClassVsObject #OOP #Constructor
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Web Dev Simplified · Web Dev Simplified · 0 of 60

← Previous Next →
1 Introduction to Web Development || Setup || Part 1
Introduction to Web Development || Setup || Part 1
Web Dev Simplified
2 Introduction to Web Development || Understanding the Web || Part 2
Introduction to Web Development || Understanding the Web || Part 2
Web Dev Simplified
3 Introduction to HTML || Your First Web Page || Part 1
Introduction to HTML || Your First Web Page || Part 1
Web Dev Simplified
4 Introduction to HTML || Basic HTML Elements || Part 2
Introduction to HTML || Basic HTML Elements || Part 2
Web Dev Simplified
5 Introduction to HTML || Advanced HTML Elements || Part 3
Introduction to HTML || Advanced HTML Elements || Part 3
Web Dev Simplified
6 Introduction to HTML || Links and Inputs || Part 4
Introduction to HTML || Links and Inputs || Part 4
Web Dev Simplified
7 Learn Git in 20 Minutes
Learn Git in 20 Minutes
Web Dev Simplified
8 5 Must Know Sites For Web Developers
5 Must Know Sites For Web Developers
Web Dev Simplified
9 10 Best Visual Studio Code Extensions
10 Best Visual Studio Code Extensions
Web Dev Simplified
10 Learn CSS in 20 Minutes
Learn CSS in 20 Minutes
Web Dev Simplified
11 How to Style a Modern Website (Part One)
How to Style a Modern Website (Part One)
Web Dev Simplified
12 How to Style a Modern Website (Part Two)
How to Style a Modern Website (Part Two)
Web Dev Simplified
13 3D Flip Button Tutorial
3D Flip Button Tutorial
Web Dev Simplified
14 How to Style a Modern Website (Part Three)
How to Style a Modern Website (Part Three)
Web Dev Simplified
15 Animated Loading Spinner Tutorial
Animated Loading Spinner Tutorial
Web Dev Simplified
16 How to Write the Perfect Developer Resume
How to Write the Perfect Developer Resume
Web Dev Simplified
17 Animated Text Reveal Tutorial
Animated Text Reveal Tutorial
Web Dev Simplified
18 Learn Flexbox in 15 Minutes
Learn Flexbox in 15 Minutes
Web Dev Simplified
19 Custom Checkbox Tutorial
Custom Checkbox Tutorial
Web Dev Simplified
20 Start Contributing to Open Source (Hacktoberfest)
Start Contributing to Open Source (Hacktoberfest)
Web Dev Simplified
21 JavaScript Shopping Cart Tutorial for Beginners
JavaScript Shopping Cart Tutorial for Beginners
Web Dev Simplified
22 Responsive Video Background Tutorial
Responsive Video Background Tutorial
Web Dev Simplified
23 1,000 Subscriber Giveaway
1,000 Subscriber Giveaway
Web Dev Simplified
24 How To Prevent The Most Common Cross Site Scripting Attack
How To Prevent The Most Common Cross Site Scripting Attack
Web Dev Simplified
25 Transparent Login Form Tutorial
Transparent Login Form Tutorial
Web Dev Simplified
26 The Forgotten CSS Position
The Forgotten CSS Position
Web Dev Simplified
27 How to Code a Card Matching Game
How to Code a Card Matching Game
Web Dev Simplified
28 10 Must Install Visual Studio Code Extensions
10 Must Install Visual Studio Code Extensions
Web Dev Simplified
29 Learn CSS Grid in 20 Minutes
Learn CSS Grid in 20 Minutes
Web Dev Simplified
30 Learn JSON in 10 Minutes
Learn JSON in 10 Minutes
Web Dev Simplified
31 10 Essential Keyboard Shortcuts For Programmers
10 Essential Keyboard Shortcuts For Programmers
Web Dev Simplified
32 What Is The Fastest Way To Load JavaScript
What Is The Fastest Way To Load JavaScript
Web Dev Simplified
33 Differences Between Var, Let, and Const
Differences Between Var, Let, and Const
Web Dev Simplified
34 How To Install MySQL (Server and Workbench)
How To Install MySQL (Server and Workbench)
Web Dev Simplified
35 Learn SQL In 60 Minutes
Learn SQL In 60 Minutes
Web Dev Simplified
36 How To Solve SQL Problems
How To Solve SQL Problems
Web Dev Simplified
37 What Are Design Patterns?
What Are Design Patterns?
Web Dev Simplified
38 Null Object Pattern - Design Patterns
Null Object Pattern - Design Patterns
Web Dev Simplified
39 Your First Node.js Web Server
Your First Node.js Web Server
Web Dev Simplified
40 How To Setup Payments With Node.js And Stripe
How To Setup Payments With Node.js And Stripe
Web Dev Simplified
41 How To Learn Any New Programming Skill Fast
How To Learn Any New Programming Skill Fast
Web Dev Simplified
42 Asynchronous Vs Synchronous Programming
Asynchronous Vs Synchronous Programming
Web Dev Simplified
43 JavaScript ES6 Arrow Functions Tutorial
JavaScript ES6 Arrow Functions Tutorial
Web Dev Simplified
44 Are You Too Old To Learn Programming?
Are You Too Old To Learn Programming?
Web Dev Simplified
45 JavaScript Cookies vs Local Storage vs Session Storage
JavaScript Cookies vs Local Storage vs Session Storage
Web Dev Simplified
46 JavaScript Promises In 10 Minutes
JavaScript Promises In 10 Minutes
Web Dev Simplified
47 Builder Pattern - Design Patterns
Builder Pattern - Design Patterns
Web Dev Simplified
48 JavaScript == VS ===
JavaScript == VS ===
Web Dev Simplified
49 JavaScript ES6 Modules
JavaScript ES6 Modules
Web Dev Simplified
50 8 Must Know JavaScript Array Methods
8 Must Know JavaScript Array Methods
Web Dev Simplified
51 CSS Variables Tutorial
CSS Variables Tutorial
Web Dev Simplified
52 JavaScript Async Await
JavaScript Async Await
Web Dev Simplified
53 How To Choose Your First Programming Language
How To Choose Your First Programming Language
Web Dev Simplified
54 Easiest Way To Work With Web Fonts
Easiest Way To Work With Web Fonts
Web Dev Simplified
55 Singleton Pattern - Design Patterns
Singleton Pattern - Design Patterns
Web Dev Simplified
56 Responsive Navbar Tutorial
Responsive Navbar Tutorial
Web Dev Simplified
57 CSS Progress Bar Tutorial
CSS Progress Bar Tutorial
Web Dev Simplified
58 Learn GraphQL In 40 Minutes
Learn GraphQL In 40 Minutes
Web Dev Simplified
59 What is an API?
What is an API?
Web Dev Simplified
60 Learn How To Build A Website In 1 Hour!
Learn How To Build A Website In 1 Hour!
Web Dev Simplified

Related Reads

Up next
Why Your AI Emails Sound Nothing Like You (And How to Fix It)
AI Mastermind
Watch →