Javascript Objects Explained | Javascript Objects Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
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!
You're welcome!
Thank you for introducing objects with these creative examples! I believe that using cool examples makes lessons really involving.
Glad it was helpful! 💯
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!
Beat examples/explanations I've seen. Thank you!
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.🙏🏻
You are so welcome!
I just want to thank you for your tutorials. Great explanation!
You're welcome!
Wow , powerful tricks with objects!! Nice👍
thank you for efforts , really great way of teaching 😄
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 😇
Glad it was helpful!
Very good explanation of "this". Another great video.
Thanks again, Alberto! 🙏💯
Half way into thus video and I keep asking myself "who is thus guy" you've got my sub
Thank you so much for the great tutorial!!
You're welcome! 💯
I have been looking for this type of high quality content.
you are underrated
Thank you!
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
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?
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 👍
The best video on JS objects on youtube. Props for Led Zeppelin reference! 🎸
Rock on! 🤘
thank you for your tutorials≥≤
Fantastic tutorial.
Thank you, Johan! 💯
If u know what are classes in other language and just want to know the syntax in js . This the best info/time video
Thanks!
Thank you, thank you, thank you!!
You're welcome!
Awesome!!!
🙏🙏
Good Stuff
🥰🥰🥰 ur lectures are awsome
Glad you like them!
thanks
that was nice
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.
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.
@@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.
@@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
God bless you so muchhhh, i couldn't get objects until now 😭
Glad it helped!
The chuckle at 15:08 made me LOL
Puns... gets me every time!
Please also explain prototyping concept
I have a video on that: th-cam.com/video/mQ4oCgcgHOA/w-d-xo.html ..not part of a beginners playlist or course though.
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
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
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);
This looks like python dictionary buh kinda different
The answer is always 42
i almost cried when you deleted john bonham 😥
I understand that! 💯
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
Commas yes, but js doesn’t require semicolons. You can put them or not.
@@BbB-vr9uh No, JavaScript doesn't strictly require semicolons, but using them is considered good practice to avoid potential issues with automatic semicolon insertion.
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.
Thanks for great tutorials!
_____________________________
Whole Lotta Code (Love) - D. Zepp. 🎸
You need coding! (cooling) ... ⌨️
Great lyrical change!! 💯🚀🎸
Tesla.engine = () => { return “🔥🚗💥” }
Nice!