JavaScript objects explained the visual way

this video would use visual metaphors to explain why objects are such a useful data type in javascript in short they allow us to keep properties and methods together in the same data structure when this is convenient so that we can apply methods to the correct set of values inside of the object if you want to see more videos like this please subscribe to our channel now imagine that we have to write a very single program where we take an employee's pay rate the numbers of hours that an employee has worked and then we calculate a salary we just multiply one by the other and let us say that we have one employee who is called tom now we can very easily do this with regular variables we have discussed already we can have variables for period for hours and then we can also place a function in a variable this is not a problem but then what if we have a second employee tim notice that we have just gone from three variables to six variables what if we have a third employee bob now we've gone to nine variables what if we have 50 employees things get very cumbersome very quickly unless we somehow start arranging and lumping things together in a logical fashion and this is where objects come in so instead of having a separate variable for everything in this case what we can do is we can have the pay rate the hours and then the pay salary method lumped together in an object and then we can have this object associated with the employee for example we will have a variable tom and then the object associated with the variable tom in memory would contain all of this information as it pertains to tom and we would have a different object that refers to tim that's the idea we are lumping things together which are convenient and then we can place them in a single object think about a kitchen the drawers in a kitchen all of the items in a kitchen are very often lumped together by their use we actually do that we don't keep our cutlery in our bedroom there is a reason for that and this is why using objects is very useful it does exactly the same things it keeps like things together and then it allows us to apply methods to properties in a very convenient and structured and easy to deal with way when we discuss objects we have to be aware of some terminology that we use that refers specifically to the object value type if we think about what we've already seen where we had a bob property with an object associated with it the entire bookshelf like feature in this case would be called an object if we talk about an individual shelf we would be referring to a property and notice that the property would have more than one thing associated with it the property would have a key and this would be the name of the shelf and then it would have a value and this would be what is placed on the shelf so you have to be aware of these terms very often we will talk about properties when we will be returning to both the name and the value associated that location very often we will be referring to object keys and in this case we will be referring to the label that we use for the particular value within a property and then very often we will be talking about object values in this case referring specifically to the value which is held there something else that we have to be aware of is that when we place a function as a value within a property in this case we typically refer to the property as a method now the function in this case is a regular function it's a regular javascript function but it happens to be placed inside of an object data structure and in this case we tend to refer to this function as a method so very often we talk about object methods this is what these things are now that we have given a broad overview let us discuss objects in a more detailed and precise way so we can think of an object as a collection of properties where each property has a key i.e a name and a value alternatively we can think of them as an unordered collection of named values why unordered because it turns out that the order in which we place things in an object from a practical standpoint does not matter so if you think of shelves on a bookshelf it doesn't matter which shelf goes on top and which goes on bottom all we are using is the names of the shelves the keys of the key value pairs to find a given value now this is different from another collection for example an array which behaves differently than that why are objects useful well they allow us to store related values in a convenient structure in the same way as we would keep our cutlery in the same place in our kitchen and they allow us to easily relate methods to the values they should operate on so we can have a method which can only operate on a specific set of values without getting everything confused without getting the individual objects mixed up

Channel: 3dCodeWorld

Views: 21,536

Keywords:

Id: BRSg22VacUA

Length: 5min 45sec (345 seconds)

Published: Mon Mar 15 2021

Reddit Comments

[u/[deleted]]

hey dude, i'm a visual learner and this type of teaching is awesome, if you could do more topics such as recursion and other programming topics would be very good

[u/locomocopoco]

Keep it up. This is good.

[u/[deleted]]

I love it, this is what I called a gift of heaven.

[u/[deleted]]

Thank you!

[u/Emandreea]

I gave up coding 6 months ago... This, this makes me want to start again. Very well explained. Thank you!

[u/bravetag]

Nice.

[u/misslyss231]

This. My ADD visual learning brain loves this. Thank you so much. 💜💜

[u/SandHK]

thanks for the video. Using you example of hours and rate, what is the benefit of objects over arrays?

[u/bakenmake]

This is great work! The examples you give are amazing and concise. One of the best coding videos I’ve ever watched and I’ve watched thousands. Should be one of the first videos anyone watches.

I repeat...THIS VIDEO SHOULD BE ONE OF THE FIRST VIDEOS YOU WATCH IF YOU ARE LOOKING TO START OR RE-LEARN CODING.

The comparisons/examples you give will make it “click” for most regardless of whether they come from a business or technical side.

I think simple examples like the bedroom/kitchen and cabinet/drawers will remove the intimidation factor for many. KISS implemented to perfection.

My only suggestion would be to give a side-by-side comparison of what the corresponding code would look like. In other words, show the user what it looks like when they store their cutlery/silverware in the bedroom as opposed to the kitchen.

Show them the incorrect/sloppy code versus the clean/correct way of doing things. That would probably make your videos the best resources around.

Best of luck moving forward! Look forward to checking out the full video and the rest of your channel!

Also, my apologies if you already do any of these things I’ve suggested. Have only watched this small clip and wanted to provide you with some quick (what was intended to be) feedback.