Javascript Objects Explained | Javascript Objects Tutorial

Рет қаралды 30,779

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
A Javascript Objects Tutorial that explains objects, methods, and properties as well as walking through many examples of how to create objects, add object properties and methods, remove object properties and methods, object inheritance, and destructuring objects.
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
✅ Quick Concepts outline:
Javascript Objects:
(00:00) Intro
(0:10) Objects have key-value pairs
(0:20) How to create an object
(1:00) How to access a property of an object
(1:15) What data goes inside of an object?
(1:20) How to create object properties
(2:30) How to access the different properties of an object
(3:20) Objects allow dot notation and bracket notation
(4:35) How to create object methods
(5:40) How to call an object method
(5:50) The keyword this inside of a method
(7:30) Object.create()
(7:45) Using an object as a constructor for another object
(8:30) Object Inheritance and examples of inheritance
(13:00) Object.keys()
(13:30) Object.values()
(13:45) Using a for in loop to loop through an object
(17:00) Deleting a property or method
(17:15) hasOwnProperty() method
(18:00) Destructuring Objects as variables
(19:45) Simplify destructuring by naming variables the same as object keys
(20:50) Destructuring Objects as parameters
📚 Further Reading:
MDN Web Docs:
Objects: developer.mozilla.org/en-US/d...
Eloquent JavaScript Chapter 4:
eloquentjavascript.net/04_dat...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Twitter: / yesdavidgray
Reddit: / daveoneleven
Medium: / davegray_86804
#objects #javascript #tutorial

Пікірлер: 66

@Grihlo Жыл бұрын

Thank you for introducing objects with these creative examples! I believe that using cool examples makes lessons really involving.

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful! 💯

@godismyway7305 9 ай бұрын

If good people like you make a video like this on each basic JavaScript topic, JavaScript would not take a year and more to master. Thanks and subscribed!

@laceyhunter2209 Жыл бұрын

This is my 5th instruction I have done but only video that made it all click. He shows us how to write an object, different things your can do with an object AND gives an overall view of what objects can do. Now that he’s put it into perspective for me it makes so much more sense to me. Thank you!

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@siten1 7 ай бұрын

Beat examples/explanations I've seen. Thank you!

@camip1519 11 ай бұрын

thank you for efforts , really great way of teaching 😄

@hadibq Жыл бұрын

Wow , powerful tricks with objects!! Nice👍

@viewit2116 Жыл бұрын

Thanks for this, I appreciate, though I sti struggle a little with loop but I just found out about you for a few months now and I wish to be this good and more, you inspire me. Some people who are also studying coding are suprised at my growth and it's all thanks to you. Whatever you serve, God bless you man.🙏🏻

@DaveGrayTeachesCode Жыл бұрын

You are so welcome!

@davides3610 Жыл бұрын

I just want to thank you for your tutorials. Great explanation!

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@thee3a 2 жыл бұрын

Thank you so much for the great tutorial!!

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 💯

@CondeAlberto 2 жыл бұрын

Very good explanation of "this". Another great video.

@DaveGrayTeachesCode 2 жыл бұрын

Thanks again, Alberto! 🙏💯

@yatin1370 Жыл бұрын

Beautifully compiled, it was fun exploring and understanding this lesson! Edit: I would like to summarize the ways object/s can be created in JS (that I know of), because it created some confusion during my learning. 1. Object literals ( eg: 'anotherObj' at 2:17) 2. Object.create() (eg: 'truck' at 7:35) 3. Factory functions (shown in next lesson) 4. Based on a created Class (shown in next lesson) 5. Constructor functions (very close to classes concept, shown in lesson#20 while creating 'customError' function) Hope this helps someone while following this awesome playlist 😇

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful!

@osayieseosa 10 ай бұрын

Half way into thus video and I keep asking myself "who is thus guy" you've got my sub

@user-po4md2bw1w 5 ай бұрын

thank you for your tutorials≥≤

@Kubaassasincreed2 4 ай бұрын

The best video on JS objects on youtube. Props for Led Zeppelin reference! 🎸

@DaveGrayTeachesCode 4 ай бұрын

Rock on! 🤘

@user-ge9rq2bt1q 2 ай бұрын

I have been looking for this type of high quality content. you are underrated

@DaveGrayTeachesCode 2 ай бұрын

Thank you!

@jonathanmornes3914 2 күн бұрын

I don't know how he got the string in the console when it said guitar by so and so, vocals by this name and so on

@aarongoulding4025 3 жыл бұрын

Another great video! How do I log to the console the FULL properties of an object, including the properties that come from the parent object?

@DaveGrayTeachesCode 3 жыл бұрын

When an object is printed through console.log, it is printed with all its own properties and a link to the object it inherits from. You can see all the inherited properties in console, you just need to follow the prototype chain of the displayed object (typically using __proto__ or [[prototype]] keys). This answer is a direct quote from here: stackoverflow.com/questions/31100403/how-to-console-log-all-inherited-properties Thanks 👍

@JohanDippenaar Жыл бұрын

Fantastic tutorial.

@DaveGrayTeachesCode Жыл бұрын

Thank you, Johan! 💯

@narcleptik 5 ай бұрын

thanks

@ChrisWalker-pd2xn 11 ай бұрын

Good Stuff

@filipebranco1543 Жыл бұрын

Thank you, thank you, thank you!!

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@jamshidtashkent1976 Жыл бұрын

Awesome!!!

@DaveGrayTeachesCode Жыл бұрын

🙏🙏

@mfarrise 2 ай бұрын

If u know what are classes in other language and just want to know the syntax in js . This the best info/time video

@DaveGrayTeachesCode 2 ай бұрын

Thanks!

@estandepinga Жыл бұрын

that was nice

@Joseph.Ashenafi Жыл бұрын

🥰🥰🥰 ur lectures are awsome

@DaveGrayTeachesCode Жыл бұрын

Glad you like them!

@BukkyOdunsi Жыл бұрын

God bless you so muchhhh, i couldn't get objects until now 😭

@DaveGrayTeachesCode Жыл бұрын

Glad it helped!

@DarthVader-wd9sc 2 жыл бұрын

I have a question. Since all non primitives are objects in the end of the prototype chain, do arrays and functions and all the other non primitives have access to all the methods from Object.prototype? What happens if we try to access properties/methods of Object.prototype on an array? Thanks in advace.

@DaveGrayTeachesCode 2 жыл бұрын

You can explore this. Open the Chrome devtools window and in the console, create and log an array. Do the same for any object. Expand the properties for each.

@DarthVader-wd9sc 2 жыл бұрын

@@DaveGrayTeachesCode Thank you for the reply. i did console an array and go up the prototype chain. I saw object methods up in the chain. And when a property or method is being accessed, the whole prototype chain is being searched right? My question is, is it ok to access object methods on an array? Thank you.

@DaveGrayTeachesCode 2 жыл бұрын

@@DarthVader-wd9sc they are array objects and have their own Array methods. MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

@kanchandhyani2307 3 ай бұрын

Please also explain prototyping concept

@DaveGrayTeachesCode 3 ай бұрын

I have a video on that: kzfaq.info/get/bejne/o7dkoqaYyM2sf3U.html ..not part of a beginners playlist or course though.

@craigfreeburg5910 3 жыл бұрын

The chuckle at 15:08 made me LOL

@DaveGrayTeachesCode 3 жыл бұрын

Puns... gets me every time!

@karkisanket294 Жыл бұрын

It would be great if you provide notes which we (viewers) can use to revise what we read. Or you can just tell website which you look before giving this explanation.We can see that website for note making

@DaveGrayTeachesCode Жыл бұрын

I usually provide a few links in the description. You can look up any of these Javascript topics on MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

@akj3388 3 ай бұрын

To add object within an object, use my method, you won't find it elsewhere: var obj = {}; var obj2 = {name:'Jack',age:155}; var fun1 = function (obj01,obj02){ return obj01['obj02'] = {}; }; var nestObj = fun1(obj,obj2); var fun2 = function(nestObj2){ nestObj2.name = obj2.name; nestObj2.age = obj2.age; } fun2(nestObj); console.log(obj);

@Abe-Oluwatomisin 9 ай бұрын

This looks like python dictionary buh kinda different

@mervinmarias9283 Жыл бұрын

The answer is always 42

@joshhodgson3659 Жыл бұрын

i almost cried when you deleted john bonham 😥

@DaveGrayTeachesCode Жыл бұрын

I understand that! 💯

@Brawlstriker89 7 ай бұрын

Cool tutorial but I feel you leave out/skip over very crucial information as you go along. Because you already know it. Things such as putting commas, making sure semi colons are put in. All tutorials I’ve seen leave out these important syntax’s

@BbB-vr9uh 4 ай бұрын

Commas yes, but js doesn’t require semicolons. You can put them or not.

@Brawlstriker89 4 ай бұрын

@@BbB-vr9uh No, JavaScript doesn't strictly require semicolons, but using them is considered good practice to avoid potential issues with automatic semicolon insertion.

@Brawlstriker89 4 ай бұрын

Automatic Semicolon Insertion (ASI) is a feature in JavaScript that automatically inserts semicolons at the end of certain lines if they are missing. While this can help avoid syntax errors, relying on it can lead to unexpected behavior, so it's recommended to include semicolons explicitly in your code.