HomeНаука и техникаRelated VideosMore From: Angular Firebase

JavaScript Pro Tips - Code This, NOT That

15045 ratings | 233486 views
New Series! Code this 💪, not that 💩. Learn how to write solid modern JavaScript and avoid bad code from then olden days. https://angularfirebase.com - Source https://github.com/codediodeio/code-this-not-that-js
Html code for embedding videos on your blog
Text Comments (736)
Angular Firebase (1 month ago)
The await is over! The async/await video I promised is here https://youtu.be/vn3tm0quoqE
sieve5 (15 days ago)
async, await, promise lol
Angular Firebase (30 days ago)
VS Code https://youtu.be/u21W_tfPVrY
OPTIMUS PRIME (30 days ago)
Also interested about code editor...
Ryoku Hasu (1 month ago)
holy crap this is useful for modding the new RPG Maker Engine since it's in JS.
Gh0stl3y (1 month ago)
Love this video, it helped me fix up some of my old code.
seyed hassan pooremami (39 minutes ago)
Thanks for good content. please follow us at https://nopardazco.com/blog
IGeometry (12 hours ago)
You sir are a genius! Been coding in Javascript for a while and most of the stuff here are new to me!
shoaib ullah (19 hours ago)
Ok so Code which is time consuming is Bad and the other one is Good....What seriously!
eu msm (20 hours ago)
Code not this that
Krešimir Cindrić (1 day ago)
Array methods like reduce, map and filter perform much slower than classic for loops. So keep that in mind when you have to process large arrays. For small arrays it doesn't make much difference and the code is prettier, but a classic for loop can be over 10 times quicker.
Marcel Mokoš (23 hours ago)
I prefer readable code over discussable performance gain with preemptive optimizations. This was a case a few years ago but javascript engines of recent browsers are performing well with these methods. Future improvements are on the horizon as well. I believe one time for loop will be slower than the map, reduce or filter.
Paolo Moscatelli (1 day ago)
String concatenation 'a lot more readable' at 5:00 ?? You made me laugh
Fadhly Hamzah (1 day ago)
How did you code without actually typing?
Nick Dabreo (2 days ago)
DONT DEAD OPEN INSIDE
Philipe (2 days ago)
I have always been into Python only for objects and also because of the language being aesthetically simple and usefully beautiful. But I've clicked on this video for curiosity and now I'm really hungry to code in Js, lol. Thank you for the informations and the kind of inspiration! Btw, subscribed for more information now I'm gonna dig into Js
Free DOOM (2 days ago)
Perfect tip 😊💪🏼
Alisher Kabiyev (2 days ago)
Code not this that
Saif Taher (3 days ago)
the fact that you've used `const` so many times during this video kind-of triggers me i don't know why lol XD
Bernat Ferragut (4 days ago)
This is really useful! Thanks so much!
Farid Freed (4 days ago)
cool, very informative thanks
Manny Gonzalez-Reyna (5 days ago)
Thanks for posting <3
Øath betrayer (5 days ago)
Way over my head, but I'll come back to it.
Vivek Iyer (5 days ago)
Still didn't get one thing. Why comma's at end object a good practice ?
Damn! console.table <3
Terence Kearns (8 days ago)
Pure awesomeness
Nino Porcino (9 days ago)
liked the console.log tricks :-)
Arnoldo Umaña (9 days ago)
More javascript videos like this one..
Solidify (10 days ago)
this is so useful. could you do more!
Berg (13 days ago)
Code not this that?
Psybit White (14 days ago)
This video gave me a nerdgasm. I'm going to treat JS well now.
JP de la Torre (16 days ago)
Promise.all > async/await
Kevin Østerkilde (16 days ago)
Algolia ❤️ Though you used our old logo. ;)
Kevin Østerkilde (16 days ago)
+Angular Firebase I do, yes. Good video btw!
Angular Firebase (16 days ago)
Algolia is probably my all-time favorite api to work with. Do you work there?
Zarko Rvovic (16 days ago)
Cool video! Thanks :)
naeimh (17 days ago)
Awesome
FloatingPoint (17 days ago)
Debug like a pro using console.log? lol
Divyanshu Juneja (17 days ago)
Spread operator is not supported in Edge browser I think
Captain Knee (19 days ago)
Nice fancy video but it cashes in Internet Explorer 7 and my old JS code still rock
nyghtseven (20 days ago)
Please , do this video on console logging!
Santo Ajuda (21 days ago)
Hey dude, how to easy convert an array of objects into a table with javascript and html??
Viny Oliveira Machado (22 days ago)
Docker abstracts backend developer?! Besides that, great video :)
Generic Person (24 days ago)
Javascript is the living, breathing definition of the "Sunken cost fallacy"
Seedzification (24 days ago)
2016 called back for it's video.
it's bullshit. jQuery the best
InstantChildBirth (25 days ago)
Hey firebase guy, what did you use as a resource to stay on top of this stuff? Also, I have one of your shirts from a hackathon, you guys are awesome
Hassan A. (25 days ago)
Awesome content, thanks!
Andrew CleanCoder (26 days ago)
Nice video. But, one notice: map/reduce/filter and etc array methods it’s fine, real. And in most cases you just use it. But, if you need break loop, and implement logic like functional .take(N), when you need some first N items from list, you must use for/loop.
Martin Flogaus (26 days ago)
You, Sir... you deserve a medal! I'm a junior FE Dev and you just blew my mind JS :D
Naouak Nawak (26 days ago)
I hate those "do this not that" when they just tell you "never use that feature" or when the proposed solution is not better. Those array concats ? Why not use array1.push(...array2) which is a lot better performance wise than [...array1, ...array2]. For loops are not bad and you should not forego them to always use map/reduce/filter. Those functions are great if you are working with an array, but don't use them for a range if you don't know the size. The await/async example ? Just a plain bad one because you show that await/async is actually worse performance wise when promise.all coupled with a reduce do an extremely go job without async/await.
Angular Firebase (26 days ago)
I agree with your points, my #1 regret is not talking about performance in more detail. I did not mean to imply that push() or for loops are wrong, just that there might be more succinct options. I'm working on a full video all about iteration to clear these things up :)
Trần Đức Cường (26 days ago)
What is 'this' ?
NANI?
Jordan Walker (27 days ago)
Many separate non unified things that abstract development. Oh or You can write everything your self all down to class level and hope it's as robust as standardized proprietary assemblies so what you can hope to shave cost to pass crap onto the rest of the world take over popular acceptance of platforms it will run on and be popular for cutting corners? OR it eventually becomes as useful and as and enviably will include the quote bloat you used to mock those prior proprietary formats only realize in full for yourself the values of some of that if not all of that bloat you left behind to shave a little on performance as well as money not building upon others work as giants had in the past. So maybe writing the whole things for yourself is only for you to learn that lesson while we all wait and suffer through the loss of previous features and functions of those larger libraries.
Arhat M. (27 days ago)
Dude, you sound like Samy Kamkar.
Random Ninja (27 days ago)
Shoutout to the people who thing javascript and java are the same
Thomas Gainant (28 days ago)
Please go faster.
Eirik S (28 days ago)
CODE NOT THIS THAT
sofcal (28 days ago)
Regarding loops. Not that you're ever going to get the efficiency of c++; but note that moving from a single for loop into a reduce, map, filter; you create additional loops which may affect performance on large data. Also, pedantic, but if you are using loops always use ++i instead of i++. It doesn't require a temporary variable. Of course, this is optimised anyway, but you get to sound mega geeky when you explain it to people. And final not on that section (not loop related, but because you mentioned it). Beware of working with decimals in JS. Note that this: const values = [1, 2]; const reduced = values.reduce((memo, val) => memo + val); const withTax = reduced * 1.1; // might not equal what you expect: console.log(withTax); // 3.3000000000000003 NOT 3.3 This is because floating point math can only represent dyadic rationals. Numbers with a denominator which is a power of 2. Everything else can cause floating point errors. Most programming languages actually suffer from this, but many round at 15dp to avoid it.
sofcal (28 days ago)
When talking about the spread syntax; please note that it does NOT create a copy of nested objects. These are references and any modification to the newly created object will modify the original. E.G const pikachu = { name: 'Pikachu' }; const stats = { hp: 40, inner: { attack: 50, defense: 60 } }; const lvl10 = { ...pikachu, ...stats }; lvl10.inner.attack = 100; console.log(stats); // inner.attack will have been modified.
sarthakss shah (28 days ago)
What is the time complexity for array.map , array.reduce & array.filter function. As far as I know it Big O(n). am I right ? or is it something else ?
JokerExperiment (28 days ago)
Probably O(n). It has to be at least O(n), as all three have to "touch" all elements. I'd be concerned if it's more, as even the trivial implementation is O(n). So it's likely that O(n) <= time complexity of them <= O(n).
Svetoslav Vladov (29 days ago)
Awesome video, thanks!!!
Cansın Memiş (29 days ago)
Great video
Yannic Fabi (29 days ago)
Great video ! But very very fast for beginners ! Currently absolving the udemy - webdevelopment bootcamp and am now a bit afraid that this course is going to teach me the old way of coding basics ?! Do u maybe have any better course recommendations for web development or any other tipps ? Kr Yan
Vladimir Minkin (29 days ago)
What about using 2 spaces instead of 4 in tabulation?
9:50 3 iterations instead of one. It looks better but "bad code" works faster.
Bilal Kazmi (29 days ago)
Awesome!!! You shared some really pro tips... Thanks a lot! Subscribed...
Radu Stefan (29 days ago)
extremely useful, I will follow your channel, thanks for the nice video.
Emalsha Rasad (29 days ago)
I like that console.log() trick <3
Sakes Yordi (29 days ago)
Wow!! This was way better than i Expected!! Keep on the Good Work!
DovewinG (29 days ago)
나이스하네요 구독합니다 Nice i'm subscribe
Mustafa Kursun (30 days ago)
A man that sees the future 👀 Thanks for preparing us to 2019 🤪
6IU (30 days ago)
What coding software
Josiah Ebhomenye (30 days ago)
not sure about the loop thingy, reduce, map & filter, 3 loops vs 1 for loop
Ummar Farooq Mahroof (30 days ago)
This video goes to fast, the demos are done too fast. Its good content, presented too fast
Daniel Katz (30 days ago)
Omg, that's so cool. I didn't know console can be so rich
Andreas Kempe (30 days ago)
debugging with print output in console or something else are never the solution. use a modern IDE or the browser implemented tools to realy debug like a pro. u never a pro if u make console output more colorful and call it debugging!
Jon T (30 days ago)
so who else thought the logo said "Code not this that"
Balázs Ivankó (30 days ago)
CODE NOT THIS THAT .
Brian Lannoye (30 days ago)
I found it a bit condescending and the new functions offer little benefit. Just different syntax. The console.log and await/async parts were good though.
Graim (30 days ago)
what the text editor did you use?
Dawid Garus (1 month ago)
Pikachu stats are HP: 35, Attack: 55, Defense: 30/40. Get your facts straight! ;)
Zachary Waldron (1 month ago)
Ok so not even 30 seconds into the video, I look at the date uploaded, September 27th, it isn't even 2019 yet but the video proudly states "It's 2019 and we have..."
William Leverone (1 month ago)
It's not 2019 though
Ivan Rivera (1 month ago)
"code not, this that, js 💩"
r3wturb0x (1 month ago)
angular blows
asdf qwery (1 month ago)
Why not add also something like console.json for printing objects or array in json format. In MDN console implementation. Just like this: https://glebbahmutov.com/console.json/demo/
KarmaMan82 (1 month ago)
What is your qick solution of: if ( typeof(variable) !== 'undefined' && variable !== null) { do something with variable ... } or for (var i in array) { do someting with array[i] ... }? Do you have cool fetch - tricks too?
oteka (1 month ago)
my mind was 🤯
Jesmer Paz (1 month ago)
What do you think of use of debugger; to debug using devtools? I was expecting to see it cause it saves me a ton of time debugging.
Angular Firebase (1 month ago)
I think it's great and covered it in this video https://youtu.be/u21W_tfPVrY
John Benedict Belerma (1 month ago)
Lovin' the modern js
Moudhafer Salhi (1 month ago)
fuck! i thought i knew JS well
Gallopeermeneer (1 month ago)
You should've made up a better example for async await, such as data that depends on one another. Right now you're just showing how to slow an app down by sequentially loading data that looks like it could've been much faster. I'm right with you on being a huge async/await fan, but many people use it incorrectly this way and should use Promise.all a lot more.
Juan Yang (1 month ago)
In my case, I want to match the element's index and array's index by using "loop" and print it out on DOM. In this condition, is there no way to make this by using reduce, map or filter methods??
Trevor Johnston (1 month ago)
I never knew Nathan Fielder was so good at coding
Trevor Johnston (1 month ago)
Great video. But is there a way I can change the playback speed of this video to be higher than 2x? You're going too slow for me, and you type like a snail :/
John Madison (1 month ago)
My "diff" says this deconstruction is overly complex and doesn't even save characters. function feed(animal){ const { name, meal, diet } = animal; return `Feed ${name} ${meal} kilos of ${diet}`; } Delete 16 characters: { name, meal, diet } Add 7 characters: A A. A. A. function feed(animal){ const A = animal; return `Feed ${A.name} ${A.meal} kilos of ${A.diet}`; }
John Madison (1 month ago)
const A = animal; // 6 characters for all property access. (A.) 1 character delta in declaration. const { name, meal, diet } = animal; // 16 character
Anshuman Srivastava (1 month ago)
ary = []; for(var i=0;i<1000000;i++){ ary.push(i); } var total = 0; var withTax = []; var highValue = []; console.time('looper'); for(var i=0;i<1000000;i++){ total+=ary[i]; withTax.push(ary[i]*1.1); if(ary[i]>100){ highValue.push(ary[i]); } } console.timeEnd('looper'); console.time('timer'); const total1 = ary.reduce((acc, curr)=>acc+curr); const withTax1 = ary.map(v=>v*1.1); const highValue1 = ary.filter(v =>v>100); console.timeEnd('timer'); ----------------------------------- Output: looper: 273.009033203125ms timer: 318.2080078125ms Beautiful is what beautiful does.
Aurore Melie (1 month ago)
Code this -> Assembly Not that -> JS
Kevin Nam (1 month ago)
code not this that
Valentyn Yakymenko (1 month ago)
Tips are good and useful, but I a bit disagree with `for (let i = 0; i < arr.length; i++)`. Unfortunately, you can't `break;` the `forEach` loop in a good way, only in `for`, `for-of`, `every()` and `some()` this is possible. But in some cases, it's beneficial to use `break;`, especially if you have a big array of data and you want to verify some condition and make some manipulations with an element in the array and stop looping the array.
Nick Shvelidze (1 month ago)
Code not, This that
Raphael Filipe (1 month ago)
i like this t-shirt
Takudzwa Shamhu (1 month ago)
Goddamn, this is JavaScript from another dimension!!
Anand Undavia (1 month ago)
"I can do a whole video on console logging" Please do!!
Jan Georg (1 month ago)
be careful checking performance like this. the problem is that the js engine will optimize code which is called often. and by a million iterations the code will be much faster. for example you want to compare two implementations and because they are kinda short and the difference may be not measurable in miliseconds you just call it multiple times. but due to the optimization you're comparing which implementation can be better optimized.
Der Jens (1 month ago)
About the last one: If the async calls aren't dependable on each other, you can use Promise.all() to do them in parallel. You also have to be careful with await: it throws an error on promise rejection!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.