@@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...
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.
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
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.
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!
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.
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!
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!
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.
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 :)
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!
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.
One thing that bothers me is - why can't we have higher order functions, like in arrays, but for objects, since they are basically associative arrays? Having programmed PHP for a while, I'm quite bummed out that we can't use .map(), .filter() and .reduce() on them.
I've always felt the same way - would be super convenient. I assume they are missing because the Object is so fundamental to the language. You can use the `Map` class as an alternative.
For the sake of simplicity, I usually stick with for...in loops - not very happy about it, but also not very disappointed. We can get by, but it doesn't feel right to just go switching paradigms (although I know PHP isn't really a good example of paradigm consistency).
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?
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)
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?
I thought functions inherited from the object prototype and everything you put between its curly braces is a property that gets fed to the JS interpreter when you call that function, or use the parentheses short hand.
Okay, I have a doubt. let web = ''outer'; function foo() { let web = 'inner'; let in = () => console.log(this.web); } } What will the code print? 'outer' or 'inner'?
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
How about null/undefine checking in objects? You don't want a code that something like this const data = response.data.item ? response.data.item: response.data
@@Thatguy-rh5ls What I don't understand is how can you set up functionsgetters/setters inside an object, to me that's the specific definition for a class not a map.
Like: function operation(func, a, b) { console.log(func(a,b)); } function sum(a,b) { return a + b; } operation(sum, 1, 2); This prints 3 and would work for a lot of operations like subtraction or concatenation. It works because we can pass that function as an argument.
So considering this I think having a function as a property would still make it a map even though it's really weird 😅 Also, the classes in JavaScript are apparently not entirely the same as classes in other languages.
Let's just pretend the audio issues in this video were meant to add extra suspense 👻 ¯\_(ツ)_/¯
One question - what is the editor and theme that you use in your videos? Looks like Visual Studio Code with Material theme?
@@vasiovasio VS Code + Atom One Dark + vscode-icons
@@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...
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
What plugins do you use to get the squares on the left side and the console.log showing its output on the right?
Let's be honest. There is no better programming content than FireShip. A big thank you! I hope you never stop making videos.
Yeah I just love the format of the videos!
Truer words have never been spoken!
Kkkkkokkokkkokokkokk
@@WTFAnyNameWorks kkokkkkokokokokkok
kkokkkkkkk
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.
Or for dumb people like me who need to review this over and over
@@FordExplorer-rm6ew 🙃
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
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.
I love the blend of high level concepts and basics. It’s not overwhelming, and it’s not too basic. Amazing content
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!
That is a great point. I've been spoiled by TypeScript for a long time.
duh, it's amazing
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.
@@TheCecchino98After having declared and assigned the constructor
👇
Zombie.prototype.eatBrain = function() {};
So, *outside* the constructor.
@@mabdullahsari thank you very much!
I came from a Python background and finally understand the mysterious rationale of copy and deepcopy of dictionaries. Thank you!
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!
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!
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.
This was very well produced. You Hit a lot of deep CS topics in a digestible high level way. Sharing this with my team!
this it great. popping sound made me jump though ha
Sorry bout that, YT did not like the audio for some reason
The key to getting this video is to pause it, try the shit out in vscode, and go "ohhhh"
You and theo are my fav tech content creators
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 :)
I learned A LOT in this one. This channel is so clutch.
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!
Love how in depth these videos go, I had personally never heard of the object.entries destructuring trick before!
I can't believe that it's it's it's juuuuuuuust 10 min I'm like WOW, Thank you so much 💖
As a beginner, I'm so glad I found this channel :D
You just blew my mind. I've never heard of Bigint before 🤯
Bigint was the highlight of the video!
10 min video and hours worth of content. Thank you so much.
When I get notification from this channel, I know that I'm getting quality!
I like your teaching style . please make more JavaScript video like this one.
9:53
const obj = new Zombie("👨💻 Jeff");
🤣🤣🤣
With programming there are a million ways to do something, love it. Great video, learned some new tricks!
What's the extension he's using here to print those console.log() ?
And that was perfect scene/phrase to end this!
Another amazing technical video about JavaScript
OMG Object.entries will make my life easier to deep check an object. Amazing! Thanks man!
But you need to use a polyfill to make it work in IE. It's a new browser thing.
good one. objects are the origin on JS
Ultra use of object
The video I needed to watch .. thanks
After watching this especially the last part, I am confused, so can I use function instead of a class? (Currently i dont know class)
thought I was in control of this topic...🤓 thanks for this refresher and sharpening
Please do more of these videos! Thanks @Fireship
Are we an object ?
#Existential101
Or are we a primitive?
@@Fireship we are a wrapper around a primitive
@@moonythm Deep, i like that!
4:01 This gives an error that says "Cannot redeclare block-scoped variable 'spider'." and "Cannot redeclare block-scoped variable 'legs'."
The tempo is so fast, I can't even hit pause on time to get some rest and rethink it.
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...
You unlock this door with the key of imagination - yep, thanks for providing the door
Love it!
Love it!
Love it!
Fast pace for the win mate!
Which plugin you are using for getting console log outputs in ide ?
Good video
I second that
I too want to know that....
dude, you are saving my ass rn. Thank you!
This is a really awesome channel period.
Well that escalated quickly...
Jeff kudos to you man! You always make learning fun with all these creative jokes. Thanks a lot
Still one of the best! 🔥🔥🔥
First time I've actually slowed a video down just go catch all the content haha
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.
Covered overall all the concepts 😍
What text editor are you using? Or what extension you used for those icons between the ' ' ?
u know that fireship 10min video is actually 30 min video. It just runs for 10 min.
concise, elegant, and tremendously informative ❤️
Jeff what are these Emojis you use in your code? doesn't look typical
So you stopped using Monokai pro ?
Someone seems to be excited for Halloween
Gleasons map, noice!
How do you have those cool icons in your code, like the trex and comet?
One thing that bothers me is - why can't we have higher order functions, like in arrays, but for objects, since they are basically associative arrays?
Having programmed PHP for a while, I'm quite bummed out that we can't use .map(), .filter() and .reduce() on them.
I've always felt the same way - would be super convenient. I assume they are missing because the Object is so fundamental to the language. You can use the `Map` class as an alternative.
For the sake of simplicity, I usually stick with for...in loops - not very happy about it, but also not very disappointed.
We can get by, but it doesn't feel right to just go switching paradigms (although I know PHP isn't really a good example of paradigm consistency).
I really love the quality man! Good Work 👌
The only reason I'm sticking to angular is fireship.
Thank you so much!
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?
Amazing content..
RIGHT SIDE WINS
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)
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?
Are you just using the "CTRL+Z" throughout the video or its video editing ?
Love this video but not the odd part of that
Right side wins, sneaky pun ;)
No pun intended ;)
Perfect tutorial 👌🏼
Actually all fuctions are methods derived from the primary document object.
I thought functions inherited from the object prototype and everything you put between its curly braces is a property that gets fed to the JS interpreter when you call that function, or use the parentheses short hand.
@@nicholasmaniccia1005 Yes, it´s like that
That was a great video thanks
tks for the awesome content
Hi, whats the extension that you use in VS code that outputs the value from console.log next to it?
Sadly I've been combing multiple videos and comments for the answer to this question.
Quokka.js
Okay, I have a doubt.
let web = ''outer';
function foo() {
let web = 'inner';
let in = () =>
console.log(this.web);
}
}
What will the code print? 'outer' or 'inner'?
Inner, but if you do it with arrow function it will print outter
@@lot.bajrami Sorry, I meant to use arrow function over there.
@@lot.bajrami But isn't inner outside of the function and hence global for that function? Why would arrow function print outer?
@@jayanths1221 Because arrow functions have no context, they take their parent's
nice video, as vintage clips try some from the invaders tv serie !
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
Fireship is King
Seeing destructuring in the for...of loop, was my twilight zone moment.
Whats the outro track dawg?
Thank you for the good content you're making!
OMG. I FUCKING LOVE YOUR VIDEOS M8. SO UNDERRATED.
#1 rule to avoid to be a gentleman:
const women = new Women();
Object.defineProperty(window, 'women', {
value: new Women(),
writable: false
});
Check. ♟️
How about null/undefine checking in objects?
You don't want a code that something like this
const data = response.data.item ? response.data.item: response.data
We should see this null aware operator in future JS, similar to Dart github.com/tc39/proposal-nullish-coalescing
That was a great video
When I watch fireship tutorials, I feel like there's virus on my phone that puts random short videos in the middle of tutorials.
nicee. very helpful and very nice intro and music...
btw what's your ide?
In 9:40 shouldn't the method be defined on the prototype?
damn the only thing I've learned from this video is the spread notation.
what is the extension that displays the return as a comment on the right side called
Are js objects like classes in other languages?
He said it was like maps in other languages. You can create classes with the class keyword.
@@Thatguy-rh5ls What I don't understand is how can you set up functionsgetters/setters inside an object, to me that's the specific definition for a class not a map.
@@TimeoutMegagameplays I think it's because they treat everything like it's an object. Like you can pass functions as an argument in JavaScript.
Like:
function operation(func, a, b)
{
console.log(func(a,b));
}
function sum(a,b)
{
return a + b;
}
operation(sum, 1, 2);
This prints 3 and would work for a lot of operations like subtraction or concatenation. It works because we can pass that function as an argument.
So considering this I think having a function as a property would still make it a map even though it's really weird 😅 Also, the classes in JavaScript are apparently not entirely the same as classes in other languages.
May I know the ending music?
What is the plugin you are using that logs the console.log() inside of the IDE?
Quokka.js
thank you
Hey the azimuthal equidistant map, Are you a fellow flatty @Fireship? x ]
This is da bomb
Which editor you are using.
I am interested in output as you type, it appears.
I think he is using quokkajs
How do you get the emojis in you editor?
Outro Music 🔥, please give me the name.