An Encounter with JavaScript Objects

Part five of the full #JavaScript course 🐇🕳️. Learn everything you need to know about the JS Object fireship.io/courses/javascript/
Topics covered include:
- Object creation
- Bracket vs Dot Notation
- Property descriptors
- How object references work
- Prototype chain
- Modern syntax like spread and destructuring
- Loop over objects
- Custom object constructors
MDN Object Docs developer.mozilla.org/en-US/d...
Take the #JS quiz 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

[@Fireship]

Let's just pretend the audio issues in this video were meant to add extra suspense 👻 ¯\_(ツ)_/¯

[@vasiovasio]

One question - what is the editor and theme that you use in your videos? Looks like Visual Studio Code with Material theme?

[@Fireship]

@@vasiovasio VS Code + Atom One Dark + vscode-icons

[@911madza]

@@Fireship hands down Atom had the most beautiful UI, tho VS Code is light years ahead when it comes to performance and features... to be honest, I still miss the smooth look and feel of Atom (One Dark theme don't fully recreate that), but in nowadays rush you have to go with what's best for productivity...

[@jiandeng8595]

another qutestion, how to quick type the emoji string, i had to use the short ctrl+shift+b (Windows) and select one from the list

[@chromus9149]

What plugins do you use to get the squares on the left side and the console.log showing its output on the right?

[@gospodarsile4606]

Let's be honest. There is no better programming content than FireShip. A big thank you! I hope you never stop making videos.

[@jaimerojas6578]

Yeah I just love the format of the videos!

[@WTFAnyNameWorks]

Truer words have never been spoken!

[@ar7alamin842]

Kkkkkokkokkkokokkokk

[@ar7alamin842]

@@WTFAnyNameWorks kkokkkkokokokokkok

[@ar7alamin842]

kkokkkkkkk

[@tobeqz7065]

This course is PERFECT for people with some programming background who need to learn JS quickly. Thank you so much for creating it. Thanks to you I've slowly started to fall in love with JS and I'm using it for more and more of my projects.

[@FordExplorer-rm6ew]

Or for dumb people like me who need to review this over and over

[@wchorski]

@@FordExplorer-rm6ew 🙃

[@whatisiswhatable]

Really? I know JS pretty well but this stuff moves too fast and doesn't give anyone time to digest. It's REALLY well done and covers everything right but I'm not sure I'd recommend it

[@LukeyDubs]

I love the blend of high level concepts and basics. It’s not overwhelming, and it’s not too basic. Amazing content

[@marcusgallegos8384]

This was very well produced. You Hit a lot of deep CS topics in a digestible high level way. Sharing this with my team!

[@mabdullahsari]

09:40 defining the eatBrain property on the new zombie object itself means that a brand new function is going to be created every time a new zombie is created. Better to set it on the function's prototype property so it is only declared once. Also, that is what happens behind the scenes when you use the class syntactic sugar. Great video!

[@Fireship]

That is a great point. I've been spoiled by TypeScript for a long time.

[@davidjunghan91]

duh, it's amazing

[@TheCecchino98]

sorry if i don't get it, but could you give an example of how to achieve that? From my understanding, by "function's prototype" you are referring to the constructor function (Zombie), and i'm having a hard time understanding how to access the prototype from there.

[@mabdullahsari]

@@TheCecchino98After having declared and assigned the constructor 👇 Zombie.prototype.eatBrain = function() {}; So, *outside* the constructor.

[@TheCecchino98]

@@mabdullahsari thank you very much!

[@agustincisneros6725]

This course is really good. You're explaining topics that are really complicated to understand because it's necessary to see the javascript history and it's hard to do. Thank you!

[@CaptTragedy]

First of all I know the editing for this video probably took forever, especially finding old clips that fit the theme so thank you for that, but also your tutorials (albeit very short and fast) have been very helpful for someone like me who just graduated from a bootcamp( I know...) so thank you for the hard work!

[@piyushchoughule5383]

10 min video and hours worth of content. Thank you so much.

[@ProgrammingwithPeter]

When I get notification from this channel, I know that I'm getting quality!

[@TheRyanSmee]

this it great. popping sound made me jump though ha

[@Fireship]

Sorry bout that, YT did not like the audio for some reason

[@pokefreak2112]

Love how in depth these videos go, I had personally never heard of the object.entries destructuring trick before!

[@sagnikpradhan3594]

I really love the quality man! Good Work 👌

[@abdulelahaljeffery6234]

concise, elegant, and tremendously informative ❤️

[@DivineZeal]

With programming there are a million ways to do something, love it. Great video, learned some new tricks!

[@harshitvarma7867]

If someone did not understand 8:03 here is a quick explanation, it just means that in case of nested objects, example: let obj = { name: "John", anotherObject: { age: 52, } } -> if we Object.assign({}, ) this object to let say b, although it wont copy the properties of 'obj' through reference, lets call it hard copying, it will copy the properties inside the nested object (anotherObject here) through reference. means, changing the properties of nested objects will change the copied properties of b.

[@MongooseTacticool]

As a beginner, I'm so glad I found this channel :D

[@troythompson2]

I learned A LOT in this one. This channel is so clutch.

[@YashGupta-dr5re]

9:53 const obj = new Zombie("👨‍💻 Jeff"); 🤣🤣🤣

[@theskyspire]

I think I need to watch this at least 10 times to fully absorb the density of the content. Other videos it is common to speed playback to 1.5X , this is one video where slowing it down can actually be helpful.. refreshingly concise, great job.

[@Kawaiiization]

Love it! Love it! Love it! Fast pace for the win mate!

[@MrTyty527]

I came from a Python background and finally understand the mysterious rationale of copy and deepcopy of dictionaries. Thank you!

[@valcron-1000]

Another amazing technical video about JavaScript

[@dantech2011]

Please do more of these videos! Thanks @Fireship

[@Fatfit2]

I don't think I've ever laughed while understanding Javascript more intimately at the same time... Twilight Zone is legit a great show btw...

[@arch7143]

And that was perfect scene/phrase to end this!

[@tomascarignano5002]

Jeff kudos to you man! You always make learning fun with all these creative jokes. Thanks a lot

[@n.i.c]

You just blew my mind. I've never heard of Bigint before 🤯

[@Fireship]

Bigint was the highlight of the video!

[@user-ms2fn7cq1g]

I can't believe that it's it's it's juuuuuuuust 10 min I'm like WOW, Thank you so much 💖

[@YinonOved]

thought I was in control of this topic...🤓 thanks for this refresher and sharpening

[@xeonblue007]

This is a really awesome channel period.

[@roshanjose7692]

You and theo are my fav tech content creators

[@DiwashHCR2]

The video I needed to watch .. thanks

[@adityashinde3864]

I like your teaching style . please make more JavaScript video like this one.

[@abdelkadermh]

Thank you for the good content you're making!

[@gunasekarant6498]

Covered overall all the concepts 😍

[@hughesd.mungus9819]

I only ever used Javascript to make a small project for school and I mostly disliked the language. This tutorial made me appreciate the language a bit and I am just astounded at how you can make a programming tutorial so fun and interesting. I just have to say thank you and keep doing what you're doing man!

[@slavamelanko5992]

Perfect tutorial 👌🏼

[@favouroyende1111]

Thank you so much!

[@sourishdutta9600]

Classic one cover almost everything, Thanks 😊. I just wanted to request you for something like if it is possible then please make a video on Symbol in es6 and their use case in real time application like where it's suitable for use and in enterprise application how we can maintain this. Thank you much . Big fan of yours.

[@shriniwasrocks]

OMG Object.entries will make my life easier to deep check an object. Amazing! Thanks man!

[@xTiQ]

But you need to use a polyfill to make it work in IE. It's a new browser thing.

[@jaimerojas6578]

Precious job my dude UwU ♥️

[@JoeWong81]

That was a great video thanks

[@palachokrab5711]

Amazing content..

[@mhytos420]

dude, you are saving my ass rn. Thank you!

[@klutch4198]

Still one of the best! 🔥🔥🔥

[@joaomelo6642]

tks for the awesome content

[@dasdunetechnologies1695]

nice video, as vintage clips try some from the invaders tv serie !

[@tropicaljupiter]

The key to getting this video is to pause it, try the shit out in vscode, and go "ohhhh"

[@rahulgharde7603]

good one. objects are the origin on JS

[@reymarkandog1441]

What text editor are you using? Or what extension you used for those icons between the ' ' ?

[@arturomedina2055]

What's the extension he's using here to print those console.log() ?

[@SahilKashyap64]

How do you make your videos they are so elegent. Your channel content quality is awesome. It looks like vscode editor and probably some emoji extension. What is the font size?

[@edwardrhodes1518]

You unlock this door with the key of imagination - yep, thanks for providing the door

[@JohnDoe-fe3zw]

That was a great video

[@yauul]

Someone seems to be excited for Halloween

[@nick.h7566]

Gleasons map, noice!

[@archeron3004]

thank you

[@sojumoscow]

After watching this especially the last part, I am confused, so can I use function instead of a class? (Currently i dont know class)

[@anonwithamnesia]

Thanks 🙏

[@yash3827]

Ultra use of object

[@ChumX100]

Well that escalated quickly...

[@NikhilKumar-yn6jf]

Are we an object ? #Existential101

[@Fireship]

Or are we a primitive?

[@moonythm]

@@Fireship we are a wrapper around a primitive

[@Fireship]

@@moonythm Deep, i like that!

[@ShounenKaze]

How do you have those cool icons in your code, like the trex and comet?

[@alekseysoldatenkov5675]

Seeing destructuring in the for...of loop, was my twilight zone moment. Whats the outro track dawg?

[@nagakrushnay4254]

Which plugin you are using for getting console log outputs in ide ? Good video

[@tartarus1322]

I second that

[@bgpratheep]

I too want to know that....

[@eshaan7_]

I spent 4 hours parsing/escaping a JSON file, because a particular library kept rejecting it. Then when it finally worked, I used another library. And people say frontend dev is easy :)

[@zemariagp]

This is da bomb

[@YinonOved]

Jeff what are these Emojis you use in your code? doesn't look typical

[@pladimir_vutin]

nicee. very helpful and very nice intro and music... btw what's your ide?

[@tomershechner]

OMG. I FUCKING LOVE YOUR VIDEOS M8. SO UNDERRATED.

[@zaturntarto3814]

Are you just using the "CTRL+Z" throughout the video or its video editing ?

[@luis96xd]

This was an excellent video! 😄 Great Quality! What if I came from Java and C# and I have and array of objects: clients[i] = new Client(name, lastName, phoneNumber); And I want to create a new object and assign its properties. How would it be in Javascript? And if I have other object which gets data of each client object. How would it be in Javascript? Because I'm getting problem getting property values from other objects

[@Ryu53898]

So you stopped using Monokai pro ?

[@chittiphonglasunon8166]

what extension you use to show the result of console.log ??

[@onee]

4:01 This gives an error that says "Cannot redeclare block-scoped variable 'spider'." and "Cannot redeclare block-scoped variable 'legs'."

[@Ndzzle]

First time I've actually slowed a video down just go catch all the content haha

[@FabricioLoupias]

what theme do you use for vs code?

[@arturmrozinski7536]

WoW!

[@peopledrivemecrazy]

Right side wins, sneaky pun ;)

[@Fireship]

No pun intended ;)

[@jeffreyjdesir]

{ neo: 'I know OOP.' }

[@jazzz4988]

Fireship, could you please link me to the sound effect/music that plays from 0:15 to 0:25? That spacey, wide sounding music with some harp plucks? Thanks! (Also this video helped me a lot as a Javascript student)

[@RoughSubset]

How do you get the emojis in you editor?

[@tonysmarks3578]

Love this video but not the odd part of that

[@oskarpetr1]

Hi, whats the extension that you use in VS code that outputs the value from console.log next to it?

[@ChaoticNeutralMatt]

Sadly I've been combing multiple videos and comments for the answer to this question.

[@joaogc]

Quokka.js

[@edumorlom]

what is the extension that displays the return as a comment on the right side called

[@johnscale102]

what font you are using?

[@azatecas]

This is hell, my head hurts

[@gamesseries7300]

What theme you are using.?

[@chawker67]

In 9:40 shouldn't the method be defined on the prototype?

[@RanjanKumar-ht7dp]

Which editor you are using. I am interested in output as you type, it appears.

[@getmorpheeus]

I think he is using quokkajs

[@OfficialNattyOrNot]

What is the plugin you are using that logs the console.log() inside of the IDE?

[@Veganmadeyeezy]

Quokka.js

[@hachij_]

nice

[@sarthakdalabehera3664]

May I know the ending music?

[@augusto256]

Cool

[@iliashterev38]

The tempo is so fast, I can't even hit pause on time to get some rest and rethink it.

[@cmdv42]

💯

[@metasavagex]

Fireship is King

[@giancarloandrebravoabanto7091]

damn the only thing I've learned from this video is the spread notation.

[@polyshrub]

Dang you have a lot of knowlage about javascript where did you learn all this I expect that you've probably been working with it for more then 10 years?