my 5 MOST USED javascript tricks

[@yimtonic]

My most used trick: using stackoverflow

[@sainathsingineedi2922]

Why you leaked this trick😢

[@carloacebedo6943]

It seems like im not the only one

[@richardaginga8901]

This made my brain smile

[@rajasparanjpe3791]

I am part of your trick because I answer questions on stack overflow.

[@andrewshwets1316]

Nice trick :)

[@khrazy5150]

ERROR at 1:49 - to get the intended result of {apple: 1, orange: 2, pear: 1} you must change your code from a[name] = v.price to a[v.name] = v.price

[@frantzwoldyamazan8521]

oh so I'm not crazy....

[@jsonkody]

yep .. I am avare that I sould use reduce more but this code seemed to be incorrect

[@slimyelow]

thanks for that; I too tried this.

[@ChrisAthanas]

I was about to say this

[@volimsir]

3:35 is wrong - Promise.all is not a blocking function. It will return a promise, which will resolve when all the promises in the array resolve. Promises are asynchronous and never blocking. 4:10 is also wrong. You can write await inside a map function, you just need to make it an async map function. You don't need to use for..of, or whatever. 5:22 - if you have the same error handler for both await's, you can just wrap both await's in a try block, and handle both errors in the corresponding catch block.

[@erdgeschoss_]

About the async functions: you're right, these functions gonna work inside map, but there won't be desired result. The point of using for loop in such a situation is to execute all async functions synchronously.

[@barefeg]

Async await inside map doesn't actually work as you expect, try it

[@barefeg]

That caused me a lot of bugs until I figured it out

[@volimsir]

@@erdgeschoss_ Why is that the expected behavior? Usually when working with an array, you are working with objects that are independent of each other. In that case, it's better to execute everything async in parallel, instead of waiting for each element of the array to complete the request, before proceeding to the next element. Imagine having a 1000 elements in an array, and the server needing 5ms to respond. That's a wait time of ~5-10ms vs 5s for all elements. If you're doing that, there's probably something wrong with your code.

[@volimsir]

@@barefeg It does if you know how higher order functions and async/await work. It's not magic, it's just a function.

[@broncofan311]

i know some of these words

[@petedavidson4698]

hey a 90s reference

[@vik8860]

hahaaha

[@CodingAbroad]

As a js dev who started in 2000 it’s so ingrained into my brain to only use methods at the time: var, for, etc. It’s so hard to force myself to use the newer easier methods

[@W1ngSMC]

Fun fact: since the Promise.catch (also then and finally) take a callback. You can just write .catch(console.error) instead of .catch(err => console.error(err))

[@JCL-nu4ge]

The way you made this video and how it was laid out is pretty awesome. Having your self on the left and the code snippet on the right makes accepting the information a bit easier.

[@benperlmutter5801]

I’d also include spread and rest operators. Super handy, especially spread for data manipulation

[@torickjdavis]

A note at 1:33, the default accumulator value is not 0. If no value is supplied for the initialValue parameter, then the first element of the array is used. Reference: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Parameters I also agree with the comments from Keith Harris and volimsir.

[@germain1984]

querySelectorAll method returns an array-like object called a node list. It is important to be aware of that as you will not be able to run all the methods you'd find on the array prototype

[@AaronJack]

yes

[@TheGitGuild]

4th one is definitely important thing to know . Also, I recently uploaded a “Lesser Known Features” version of it but your video come on a perfect time to polish the knowledge. Thanks for the tricks 👍

[@alexanderzharkov6953]

Thanks for destructuring deep nested objects, that was really cool

[@OneAndOnlyMe]

I've been doing JS since 1995!

[@marcus_leon]

Thanks for the tips. I appreciate the sample codes while you're talking. It's easier for me to absorb the topic as a beginner.

[@VirusterDev]

I knew them all, did you know that in Dev tools, you can select an element, then go on "copy" and select "Copy JS path" to copy the querySelector() of that element (to the specific one)

[@sobe2026]

Brand new JavaScript developer and I didn't know any of these tips. Thank you so much. This is why I am subscribed to you haha

[@azbb4175]

Great video! No bullshit, short intro, useful content, you must be the only one on KZbin to understand we don't care about a 5 minutes introduction...

[@randall.chamberlain]

Three years is good, but not really a lot. I recommend reading and trying out functional programming concepts. The real deal. Most things make much more sense when you understand how map, reduce and even promises are functors and the entities you are dealing with are monads which is why you can do a lot of things easier when thinking asynchronously.

[@randall.chamberlain]

@Maniac50AE perhaps. Or maybe he is an enthusiast self taught developer and I won't blame him for having that many gaps if that's the case.

[@DeanHickerson]

1:06 querySelectorAll returns a NodeList. Not exactly the same as an array. Worth mentioning.

[@thevipinchand4690]

Your freecodecamp tutorial "How to Plan, Code, and Deploy Your Startup Idea in a Single Weekend" is pretty awesome. Please do more like of that. Thanks for helping

[@Abinash91]

Do you have any javascript playlist? I would love to learn javascript in your style. Your explanation is simple.

[@neeraj1bh]

Make a JavaScript course that covers everything, because the knowledge of a lot of coding channels is limited.

[@richiec54]

Just go to Udemy dude

[@DigitalMonsters]

@00:30 worth noting that although super minor (since they can both run stuuuuupid fast), academically speaking getElementByID is about twice as fast as querySelector(). @2:40 mind blown; didn't know nested destructuring was a thing xD Don't think I'll use it but cool to know

[@MuktiTheDarkRaven]

awaiting promises in a callback function, you just need to add async in that callback function. so like: URLs.map(async url => await fetch(url));

[@maddy5996]

Actually we can use await keyword inside of any function once we write async before name of the function same is true for Array.map() and any others

[@luciusphil]

Aron jacks channel is so underrated!🐣

[@RusuTraianCristian]

Knew them all, haven't used them in a while, though. Except the try/catch which I always use because of the /finally which I love! Thanks for refreshing.

[@user-ug8qc6tr6b]

Title: "5 most used JAVASCRIPT tricks" Starts with the browser API 🤔

[@jason_v12345]

Yeah, I don't know if that qualifies as a "trick." When I think of the word "trick," I think "clever and unusual usage," not the standard usage of a built-in function.

[@faicalbaracat2671]

Your videos are very well produced and you are also a good communicator. It's fun to watch you. Brazil here.

[@abdellahcodes]

About (4) - mapping urls to promises executes those promises eagerly, so in a sens they are running concurrently - what Promise.all gives is of course the resolved values of all of them if none of them rejects, but it is not a blocking call, it just returns another promise that you can .then or await

[@jason_v12345]

You can use await in a map callback if you pass the map return value to Promise.all() and await that array.

[@tmiae0]

I've been migrating from C/C++ to JS and these tricks are very useful.

[@shahriarparvezshuvo4760]

NO#4 WAS SO USEFUL FOR ME. Basically I was working with Puppeteer and I used await in the map method which causes an Error. Until now, I know the exact reason. Love form 🇧🇩

[@leonardojaques6586]

This was really useful. If this was like a 2 hour course but more in-depth, I'd pay for it.

[@TFE6979]

Just read mdn documentation and you'll learn if for free...

[@andreivedovato]

Very cool video, Aaron. Didn't know about extracting the first item out an array method this way :D

[@nicolasbellanich4809]

Oooo the catch after await it’s excellent celan code tip , thanks

[@leeritenour]

This is JEWEL!!

[@nowieszco868]

I prefer still using the getElementById, getElementsByClassName and I think this is a good practice, because you can clearly and faster see what is it doing. But for complex conditions for getting a DOM element I use then querySelector/~All

[@Shenepoy]

Best trick for js is to use typescript

[@aditya_gupta]

I'm just starting out with js.. Can i ask you why ts is better?

[@khrazy5150]

@@aditya_gupta Because JavaScript allows developers to assign different types (a string and a boolean) to the same variable due to its so called "dynamic typing" it opens you up to some nasty bugs for you down the line that are really hard to debug. The point of solid, reliable code is to have NO SURPRISES at the code level. TypeScript makes JavaScript "strongly typed" like other languages such as C# and Java forcing developers to create variables that accept only one type and raises an error immediately (before you run your code) if you don't. So you get an opportunity to fix common bugs early in the development cycle.

[@aditya_gupta]

@@khrazy5150 ohh.. thanks

[@citrombandi]

a good practice when working with multiple elements or just want to convert asap to an array is to use the spread operator/operation const elements = [...document.querySelectorAll('.something')]; where the queryselector doesn't give you an array you need this.

[@CODEFORTRESS]

My most used trick: ctrl + c and ctrl + v

[@samuelribeiro5022]

My favourite trick is CTRL + C and CTRL + V from StackOverFlow

[@Tomas970506]

I use javascript for +1year. Already knew and subconcously use all of these. (and I like then.catch more than taking apart the promise)

[@waraa.7935]

Appreciate your video, BTW what is your eyeglasses' brand name?

[@aleksandr2245]

Keep it up, Mr. Aaron, thanks for cool tricks

[@guzelmeriem5704]

Destructuring tricks , querySelector, reduce and forEach, promise tips ،error handling ,

[@ucmRich]

Thanks pal! :-)

[@MacyPruitt]

more tricks like this please! frfr

[@c2ras226]

NIce video and tips. I like the font you were using!. share us the font name please!...,.

[@mohammadzarkasi]

In my language, reduce mean make it less or smaller. So i think it is a little confusing that it can be used to sum an array or anything else.

[@JamesBrown-ux6dl]

Damn, thanks for these tips!!

[@aduad]

While I do agree that the reduce method is underrated, you definitely need to know when to use it inorder to have readable and understandable code...you definitely don't want to use reduce to combine map/sort and filter logic...that's just a recipe for writing confusing code.

[@AaronJack]

true

[@valentindndinatale382]

Another usefull video. Thanks man

[@خيرالدينبربروسأسدالبحار]

Cool tricks, keep going 👍

[@MedyGames]

using axios... you can have 1 line less .. since axios automatically performs .json() ....

[@haciendadad]

Didn't you could use the .catch block with an await. Very cool! Gotta take another look at the reducer too!. querySelecter was cool. Good video!

[@color.8467]

Big thanks

[@S0AndS0]

Example of using async with `Array.map()` and `Array.forEach()` methods... ```javascript async function addLatter(number) { return number + 2; } async function listOfPromises(amount) { return Array(amount).fill().map(async (_, index) => { return addLatter(index); }); } const results = []; listOfPromises(3).then((res) => { res.forEach(async (item) => { results.push(await item); }); }).catch((err) => { console.error('err', err); }); console.log(results); ``` ... not sure where ya got the information that this wasn't possible, but it'd probably be a good idea to verify before trusting that resource again.

[@yaroslavbasovskyy2912]

Man, you need another 3 years to understand these tricks a little bit deeper :)

[@BernhardHofmann]

Watching on my phone I wished the code was larger.

[@eputen]

Same

[@johntamplin]

Good point, and easily achieved by replacing the view of the presenter, with a larger view of the code. Sorry Mr. Jack, but seeing you talking adds nothing to the value of the video. See the Python tutorials by Corey Schafer for good examples.

[@milliondollarcode]

Can you give an example how reduce can be used to do job of sort, map and filter like you said.. thanks

[@shupesmerga4694]

When people say "I'm a JS dev" What do you exactly mean? Where else do you use JS aside from web development? Or could you be a server-side dev?

[@fatjonrrapaj6834]

I'm a react native developer, I use JS in mobile

[@uelude]

Nicely done

[@marajulislam4691]

Thanks

[@mrhossein1976]

Nice notes

[@shuvo0201]

Cool! I like this video.

[@RetroGameCoders]

Heh I started using it from the first beta release on Netscape, but I still learned something so bravo!

[@aleksd286]

4:21 - I’m pretty sure you can use map for that, used that in the past, or maybe it was lodash map function

[@entrey_ua]

That was cool.

[@simondoty]

your reduce example can be done with forEach, which was your whole point?

[@sebastiencounen6818]

Great video thank you ! What font and theme do you use ? I love the font and the syntax coloring

[@hasan3545]

i would like to know also. did u find out?

[@user-bd1bl8ue9g]

Hey New to the whole CS thingy. Any advice on how to get started from scratch. And what field of specialisation to choose in it? (There is blockchain, web dev, hacking, software, cloud etc)

[@tech4028]

ask this question on csqa.io, but here my quick response: i like AI (if you like math, give it a try), and I also like web dev. Learn Python and then JavaScript

[@madhuganesh9460]

you could also use $$.('.my_class'') if you are in the browser console.

[@StarLight_tu]

Simple, short, effective > it's elegant

[@manthan6814]

Amazing tricks, very good video 👌 Could you make playlist on your channel of your projects based on language used please 😍🔥

[@ABeautifulEnergy]

My most used trick is changing is changing the background of the webpage to a random color on keyup. Is it funny, yes, am I employable, not really.

[@joshuaevans4301]

I wind up using this pattern in pretty much all my frontend code - it allows the script to be placed in the DOM header, and runs the code once the page is fully loaded: window.addEventListener('load', async () => { // Do stuff });

[@ajaykumark107]

Awesome.!!

[@tech4028]

Please make a video on WebAssembly!

[@AlphaFoxDelta]

Promise chaining is advanced syntax magic

[@LawrencceF]

Whats your font and theme?

[@srikanthalva]

Increase the code screen width, make use of the empty screen space. Nobody is here to see your face. Everyone is here for JavaScript.

[@judemoses8666]

When ubbe from Vikings started programming

[@anne-frederiquepoissant3144]

What's your theme? Ive been trying to get that sort of visual, but either end up with a theme that doesn't color/points everything, or something overly distracting.

[@therollingambit5222]

Hey! What’s your fav ide to use for javascript? Would you recommend visual studio or intellij?

[@DigitalMonsters]

Visual Studio Code is probably the most common; you don't need those big heavy IDEs most of the time.

[@SamBIllium]

I use VS Code for a lot of personal projects, and Webstorm for my work. I like the elegant design of VS Code more, but I have grown to appreciate some of Webstorm's functions, like the way it autosaves local history states (has saved my butt a couple times).

[@rajasparanjpe3791]

My cool trick is making typescript definition files (.d.ts)

[@JamesWelbes]

I think querySelectorAll returns a node list, not a real array.

[@christophervradis7285]

As far as i know, Promise.all if you pass an array of 5 promises and the fifth one fails, you dont get the result form the other 4. The one that worked perfectly for me was Promise.allSettled

[@geektom8898]

Hi please can you add a tutorial about facebook instant games using javascript , i search on youtube but no one talk about it all videos are using unity

[@JaviXT]

procrastinating on my data structures and algorithms

[@jason_v12345]

Three years feels crazy, eh? Heh. Well, glad you're enjoying it.

[@braham.prakash]

helpful

[@J90JAM]

You shouldn't just forget about getElementBy, it's different to querySelector. Also, these aren't tricks.

[@hahahahhahahhaha786]

What’s your opinion on Typescript?

[@SamBIllium]

I like it. Having worked with typescript for the past 3 years for my work (angular app development), I now find not strongly typing things to feel a little dirty....

[@kirillgimranov4943]

What font do u use?

[@webapps8800]

hello thx for tthis great video can u help plz need to know how to defer javascript loading in template file ?

[@poojapareek02]

It's not visible clearly, shuffle the and code and yours picture

[@tobychow4761]

Whats that color theme?

[@erickbest246]

You should SHOW the results of your CONSOL.LOG to be more legit

[@jazzmaster89]

Around 1:53, shouldn't the reducer function look like this instead? const fruits = [ {name: 'apple', price: 1}, {name: 'orange', price: 2}, {name: 'berries', price: 1}, ]; // missing the name of the fruit names const fruitPrices = fruits.reduce( (a, v) => { a[v.name] = v.price; return a; }, {} ); console.log(fruitPrices); ? Here's an example of reducing into an array: const fruitPricesArray = fruits.reduce( (a, v, i) => { a[i] = `${v.name}: ${v.price}`; return a; }, [] );