Object Oriented JavaScript Tutorial #1 - Introduction

Summary

This 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

00:00

🚗 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.

05:01

🧵 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.

Keywords

💡Object

In JavaScript, an object is a data structure that stores properties and methods. Properties are characteristics like a car’s color, while methods are actions the object can perform, such as driving. The video explains that almost everything in JavaScript can be treated as an object, which plays a central role in how code is written and interacts in the language.

💡Property

A property in JavaScript is a value associated with an object. For example, a car object might have properties such as color or model. In the video, the array object has a property called 'length' that tells us how many elements are stored in it, which is a common property in many objects.

💡Method

Methods are functions associated with objects in JavaScript that define actions the object can perform. For instance, the video demonstrates the 'sort' method of an array object, which arranges its elements in alphabetical order. Methods allow objects to behave dynamically.

💡Array

An array in JavaScript is a type of object used to store multiple values in a single variable. The video creates an array called 'names' which contains a list of names. Arrays have properties (like 'length') and methods (like 'sort') that enable developers to manipulate the stored values easily.

💡Window Object

The 'window' object in JavaScript represents the browser window that the script is running in. It is a global object that provides access to properties like the window size and methods to interact with the browser environment. The video uses 'window.innerWidth' to show how to retrieve the width of the browser window.

💡Primitive Types

Primitive types in JavaScript include values like numbers, strings, and booleans, which are not objects. The video explains that while primitive types don't have methods or properties like objects, JavaScript can temporarily treat them like objects (e.g., allowing a string to use the 'length' property) by wrapping them in an object.

💡Object-Oriented Programming (OOP)

OOP is a programming paradigm based on the concept of objects, which can contain data and methods. The video explains that object-oriented JavaScript involves creating objects with properties and methods, which makes code more organized and reusable. The focus of the series is on teaching this programming style.

💡Constructor

A constructor is a special function in JavaScript used to create and initialize objects. The video introduces the concept of JavaScript classes and constructors as a way to simplify object creation, allowing for multiple instances of objects with shared methods and properties.

💡Inheritance

Inheritance in JavaScript allows one object to inherit properties and methods from another object. The video highlights this as a key concept in object-oriented programming, where objects can extend other objects, enabling code reuse and organization by sharing common functionality.

💡Prototype

A prototype in JavaScript is an object from which other objects inherit properties and methods. The video mentions that the prototype chain allows objects to access methods and properties of other objects, facilitating inheritance and method sharing, a key part of JavaScript’s internal mechanisms.

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