Javascript Objects and Keyword This | Javascript Tutorial For Beginners

hello there you gorgeous people we are almost done with the series we're gonna do three more parts and then we're gonna move on to more project-based tutorials so all things that you love are coming up next hopefully this series so far has given you a bit more comfort into using javascript and yeah I hope you're ready for more let's get started today we're gonna learn a bit about objects and the key word this so I'm gonna cover all the basics and I'm not gonna go super crazy into the keyboard this because it's gonna be so confusing that your heads gonna hurt and I remember when I first started it took me such a long time to understand the keyboard this so if you don't get it from the start don't worry just don't worry it's a bit tricky so let's create an object so the way we can create an object is by writing Const user so the same way we create a variable or an array and we use the squiggly brackets and in here we can have things that are kind of like variables but we don't call them variables we call them properties with different values so you can imagine that you have like a website and you want to have a user so that would be an object that's gonna have like something called the name with a string like so so name then you add the double dots and just a string you can also have numbers in here page 24 you can also have a boolean married we're gonna head false and you can also have a an array so purchases for just purchase I'm not even sure if that's correct but we're gonna move on so we bought a phone we bought a car because we have a lot of money but we actually don't have a laptop there we go so we can create a user link so how do we access different properties inside this user though let's say I want to get the purchases that the specific user made well that's console.log we can use user dot purchases and as you can see we also have Highline thing in here which is really nice user dot purchases hit save take a look and look at that we get back the list of the purchases hey that's the basics of objects we can also have something called we can also add like functions in here that are specific to this object and those things are called methods and I talked a bit about methods in the previous videos but yeah that's basically it it's just functions oh my voice cracked five functions that are attached to an object those are methods okay let's dive a bit before we dive a bit into the methods I kinda want to dive a bit into the key word this and then we're gonna kind of put everything together and hopefully it's gonna make sense so let's take a look at this so by default if we can't log this we are gonna get something called the window object so it's just one object that has everything that you can do in JavaScript pretty much in the browser so as you can see it has so many functions or methods in here and something I want to let you know is when you create a function so even things that you create so this is just an example here console.log apple before our code even runs the best keyword gets created and the window object gets created inside JavaScript so before everything runs those two things get created and this function is going to be saved in memory and it's going to be attached to our window object so if we take a look at this window object again you're gonna see that our apples function is attached it's in here it's saved in memory a lot of things that we even use so far now the thing is that we don't need to write window like window dot apples we can just call apples so like so but this is gonna work as well so we're gonna get console long Apple up here and you're gonna see familiar things that we use so far the console hey we use this we use console dialogue there we go we also have canceled out info so you have a bunch of a bunch of things basically everything that we use so far is basically on this huge window object so this is by default gonna refer to window ok under no context if we just write this it's gonna be the window object cool but what if we want to reference the name in here or purchases or age well the way we do that is now let's delete this and we're gonna get get back to this we can create a function in here we're gonna say say name and it's going to be a function and if we console.log this in here and we're gonna call this function so how do we call this function oh the same way we access the different properties in here user dot say name now you're gonna see that the keyword this is gonna be the object so if I want to get name I write this dot name and then we're gonna get the name okay now the key differences is what I want to let you know is the keyword this means nothing here so far when the function actually gets invoked that's when the keyword this is gonna be assigned to something and the easiest way of telling what this is is by looking at where you invoke your function and looking at the left of the dot so here we have user so we look at the function that we invoke and we look at the left of it and then we see user so this is gonna mean user and to show you a normal function like say my age if we console.log this let's say my age is this well here if we invoke the function say my age well we don't have anything to our left here so it automatically it's gonna default to the window object so this is gonna be the window object in here so again just look at where you invoke your function look at your left and you're gonna know what this is so yeah that's the basics of objects and the keyword this hopefully enjoy this video if it helped in any way please drop a subscribe and I will see you super excitement tomorrow and the next one I [Music]

Channel: Dev Ed

Views: 60,215

Keywords: javascript objects, javascript this, javascript keyword this, javascript tutorial, javascript tutorial for beginners, this keyword, javascript tutorials, javascript (programming language), this keyword javascript

Id: qs3F-z6ridc

Length: 8min 16sec (496 seconds)

Published: Wed Jan 30 2019