Object Oriented JavaScript Tutorial #1 - Introduction
Summary
TLDRThis introductory tutorial on object-oriented JavaScript explains the core concepts of objects in JavaScript, drawing comparisons to real-life objects like cars with properties and actions. The tutorial demonstrates built-in objects such as arrays and the global window object, discussing their properties and methods. It also explains primitive types like strings and how JavaScript wraps them in objects to provide additional functionality. The video outlines the course structure, covering topics like creating custom objects, using classes and constructors, inheritance, method chaining, and prototype inheritance. Viewers are encouraged to have a basic understanding of JavaScript before proceeding.
Takeaways
- π JavaScript objects are similar to real-life objects, with properties (e.g., color, model) and actions (methods) they can perform.
- π§ Methods in JavaScript are just functions associated with objects, and objects have properties and methods.
- π Arrays are objects in JavaScript, and they have properties (e.g., length) and methods (e.g., sort).
- π₯οΈ The window object is a global object in JavaScript, providing many methods and properties like `innerWidth`.
- π‘ Not everything in JavaScript is an object; primitive types like numbers, booleans, and strings are not objects.
- βοΈ JavaScript can wrap primitive types (e.g., strings) in an object temporarily, allowing them to behave like objects.
- 𧱠You can create string objects explicitly using the `new String()` method, which provides access to properties and methods.
- π JavaScript allows users to create custom objects, such as a car object, with properties and methods like `drive` or `reverse`.
- π Object-oriented programming (OOP) in JavaScript focuses on creating and managing objects to simplify code structure.
- π The course will cover object literal notation, JavaScript classes, constructors, inheritance, method chaining, and prototypes.
Q & A
What is an object in JavaScript?
-An object in JavaScript is similar to a real-life object. It can have properties (like color, model, registration number in a car) and methods (things it can do, like drive or reverse). In JavaScript, methods are functions associated with the object.
Can you give an example of a built-in object in JavaScript?
-An example of a built-in object in JavaScript is an array. Arrays have properties like 'length' and methods like 'sort'. Another example is the global 'window' object in the browser, which contains properties like 'innerWidth' and various methods.
What is the 'length' property in a JavaScript array?
-The 'length' property in a JavaScript array returns the number of elements in the array. For example, if you have an array called 'names' with three elements, 'names.length' would return 3.
What are methods in a JavaScript object?
-Methods in a JavaScript object are functions that are associated with the object. For instance, an array object can have methods like 'sort' that sorts the elements of the array.
What is the window object in JavaScript?
-The window object is a global object in JavaScript available in the browser environment. It represents the browser's window and provides properties and methods related to the window, such as 'innerWidth', which returns the width of the window in pixels.
Are all types in JavaScript objects?
-No, not everything in JavaScript is an object. Primitive types like null, numbers, booleans, and strings are not objects. However, they can temporarily behave like objects when JavaScript wraps them in an object for certain operations.
How does JavaScript handle primitive types like strings when you use object-like properties or methods?
-JavaScript temporarily wraps primitive types, like strings, in an object so that object-like properties (e.g., 'length') or methods can be called on them. For example, calling 'name.length' on a string would work because JavaScript wraps the string in an object behind the scenes.
What is the difference between creating a primitive string and a string object in JavaScript?
-A primitive string can be created by assigning a value directly, like 'var name = "Mario"', while a string object is created using the 'new String()' constructor, like 'var name2 = new String("Ryu")'. The string object can be expanded to see properties and methods, unlike a primitive string.
Can you create your own objects in JavaScript?
-Yes, you can create your own objects in JavaScript. For example, you can create an object that represents a car, with properties like 'color' and 'make', and methods like 'drive' or 'reverse'.
What topics will be covered in this object-oriented JavaScript tutorial series?
-The tutorial series will cover creating objects using object literal notation, JavaScript classes and constructors, inheritance, method chaining, and exploring prototypes and prototype inheritance.
Outlines
π Understanding Objects in JavaScript
The first paragraph introduces the concept of object-oriented programming in JavaScript, explaining how objects in JavaScript are similar to objects in real life. It highlights that objects have properties (such as a car's color or model) and methods (actions they can perform like driving or reversing). In JavaScript, these methods are functions tied to the object. The paragraph then demonstrates built-in objects like arrays, showing how arrays have both properties (like length) and methods (like sort), and uses the console to illustrate this. The concept of the global window object, its properties (like innerWidth), and methods are also briefly introduced.
𧡠Primitive Types and Object Wrapping in JavaScript
The second paragraph discusses how primitive types, such as strings, booleans, and numbers, are not objects in JavaScript. However, JavaScript allows them to temporarily behave like objects by wrapping them in an object when needed, a process done behind the scenes. For example, although strings are primitive types, you can still call methods like 'length' on them due to this wrapping. This is demonstrated through the creation of a string object using the 'new String' syntax, showing how it gains properties and methods. The paragraph emphasizes that JavaScript allows even non-objects to act like objects, making the language more flexible.
π οΈ Creating Custom Objects in JavaScript
The third paragraph transitions to the concept of creating custom objects in JavaScript. It explains that beyond using built-in objects like arrays or the window object, developers can create their own objects with specific properties and methods, such as a car object with a 'color' property or a 'drive' method. This leads to the central theme of object-oriented programming (OOP), where creating and managing custom objects is fundamental. The paragraph sets up the focus of the tutorial series, which will cover OOP concepts in JavaScript and their practical applications.
π Overview of the Object-Oriented JavaScript Course
The final paragraph outlines the structure of the tutorial series. It mentions key topics that will be covered, including creating objects using object literal notation, working with JavaScript classes and constructors, inheritance, method chaining, and understanding prototypes. It emphasizes that these topics are central to mastering object-oriented programming in JavaScript. The paragraph also suggests that viewers should have a basic understanding of JavaScript before starting the course and provides a link to a beginner's playlist. It concludes by encouraging viewers to subscribe, like, and share the video.
Mindmap
Keywords
π‘Object
π‘Property
π‘Method
π‘Array
π‘Window Object
π‘Primitive Types
π‘Object-Oriented Programming (OOP)
π‘Constructor
π‘Inheritance
π‘Prototype
Highlights
Introduction to object-oriented JavaScript and its real-life analogy, such as a car having properties (color, model) and methods (drive, accelerate).
Explanation of JavaScript objects having properties and methods, with a demo of arrays and how they have a 'length' property and 'sort' method.
Demonstration of JavaScript's array object and how to use its built-in methods like 'sort'.
Introduction to the window object, a global object in JavaScript, which also has its own properties and methods.
Explanation of the 'window.innerWidth' property to dynamically retrieve the current width of the browser window.
Clarification that while most things in JavaScript are objects, certain types such as null, numbers, booleans, and strings are primitive types.
Even though primitive types like strings are not objects, JavaScript can wrap them in objects temporarily, allowing methods like 'length' to be called.
Demonstration of wrapping a string in an object manually using 'new String()' and exploring its methods and properties.
Explanation of object creation in JavaScript, emphasizing how we can define custom objects with unique properties and methods, such as a 'car' object.
Introduction to object-oriented programming (OOP) in JavaScript, focusing on creating, managing, and interacting with custom objects.
Preview of upcoming topics in the tutorial series: object literal notation, JavaScript classes, constructors, inheritance, and method chaining.
Discussion of ES6 syntactic sugar in JavaScript for simplifying work with classes and constructors.
Announcement of a focus on prototypes and prototype inheritance later in the series, providing deeper insights into JavaScriptβs object system.
Recommendation for viewers to have a basic understanding of JavaScript before diving into object-oriented programming.
Promotion of a 'JavaScript for Beginners' playlist to help those who need a foundational understanding before proceeding with the course.
Transcripts
hey gang and welcome to your very first
object-oriented JavaScript tutorial now
you may have heard that everything in
JavaScript is an object but maybe you're
not entirely sure what that means or how
it affects you when you're writing code
now an object in JavaScript is quite
like an object in real life for example
a cop in real life an object like a car
has properties such as its color the
model registration number etc and it
also has things it can do it can drive
reverse to an accelerate
so objects in real life have properties
and things they can do and the same goes
for objects in JavaScript they can have
properties and things they can do now in
JavaScript these things that they can do
they are called methods and essentially
they're just functions associated with
that object so I'm just going to demo a
couple of built-in objects in JavaScript
inside the console here so for example I
could create an array and store this in
a variable I'm going to call this names
and this will store an array of names
which I'll call Ryu and in fact I can
just press tab and enter now now we have
those names and if I type out names then
we can see this array right here now
this array is an object and I said that
objects have methods and properties and
we can see those if I expand this right
here we can see that we have right here
a property called length so an array
which is an object has a property called
length and I could say names dot length
to find out the value of that property
which is three there's three elements
inside it Rayo crystal and Mario now if
I wanted to I could also call a method
on this thing right here and we can see
the methods inside this proto object--
now don't worry what this means too much
yet we'll talk about that later on
towards the end of the course but for
now let's look for a method that we can
use now down here there's a method
called sort so let's try that
we'll go names dot sort and now we can
see they've sorted themselves in
alphabetical order before ray was first
but now crystal is first okay so this
array is an object that it has
properties and methods another example
of an object is the built in window
object so when we write JavaScript that
runs in the browser like this we get
access to this global object which is
like the mother of all objects called
the window object and that like any
other object in JavaScript has
properties and methods so if I just type
out window now we'll get access to that
global object and we can see all of the
different methods and the different
properties available to us on this
object so for example if we scroll down
to eye we're going to see an inner width
property right here and it says seven
nine eight so this is the width of this
thing right here from the left right up
until the console of the browser window
and that is in pixels right so if I
change the width of this now and then I
go down in fact I'll go up and close
this if I now say window dots inner
width then we should get the new value
which is seven hundred and eight pixels
all right so we have all of these
different properties and methods as well
on the window object so we can see now
how all of these different things in
JavaScript are quite like real-life
objects you've got all these different
properties and these different methods
the things that they can do now most
things in JavaScript are objects but not
absolutely everything is an object for
example null is not an object we can't
call any methods or properties on this
likewise numbers billions and strings
they're not objects they're all called
primitive types in JavaScript and they
are not objects I can demo this by
making a boolean or string so I could
say something like var name equals Mario
and if I'd say name now then I can't
expand this to see all of the different
properties and methods because it's not
an object
however these things that are not
objects can still actually behave like
objects in JavaScript because JavaScript
can wrap them in an object when we need
to and it does that silent
in the background for example I might
want to use a property called length on
this string right here to find out how
many letters are in it I can do that I
can call name dot length because
JavaScript will look at this and say
okay it's a string and you want to use
this length property on it therefore I'm
going to wrap this primitive type this
string inside an object temporarily so
that you can call this length method on
it and we can give you an answer which
is five all right and we can see this
string wrapper in action by actually
creating a string in a slightly
different way I could say var name to is
equal to new string like so we're
creating a string object and we'll pass
through write you here and if I say name
to now we can see the string wrapped in
this object so now if we expand we can
see a length property and we can go to
proto right here to see the different
methods associated with this string
object now so when we create a string
like this and that is a primitive type
it's not an object but we can still call
these different properties and methods
on the string because javascript can
wrap it in an object much like we're
doing or write here so we have all of
these different things in JavaScript
which are objects and even the things
that are not objects can behave like
objects and each object type has its own
unique methods and properties but we're
not just limited to the object that
JavaScript provides us with from the
offset things like window or arrays on
this string wrapper but can make our own
objects as well for example we could
make an object in our code that
represents a car and we could give that
object properties such as the color or
the make or the registration plate and
also methods such as drive or reverse
and this idea of creating our own
objects and how they interact with our
code and make things easier for us is at
the heart of object-oriented programming
and that will be the focus of this
series ok there so let's have a quick
look at what we'll be learning in this
series and let's call this the ninja bus
but really it's the syllabus but
whatever so first of all we'll be
creating our own objects
using object literal notation and we'll
find out exactly what that means in the
next video then we'll be looking at
JavaScript classes and constructors
which is some es6 syntactic sugar to
make things easier sometimes when we're
working with objects we'll also be
looking at inheritance and method
chaining and then final it will be
looking under the hood to see what's
going on behind all of these classes and
discover what prototypes are and
prototype inheritance now there's quite
a bit to cover in this course and I
would recommend that before you start
you do have at least a basic
understanding of JavaScript if you don't
then I've got a JavaScript for beginners
playlist on this very channel so I'll
leave the link down below to that for
everyone else please don't forget to
share subscribe and like the video and
I'm gonna see you in the very next one
5.0 / 5 (0 votes)