Stop Wasting Your Time - Use These 16 JS Utility Functions Instead

I have made tons of videos on small, useful React custom hooks, but I have never covered any useful JavaScript utilities. That changes today. In this video I cover 16 amazing utility functions in JavaScript that span across 3 major categories. These functions will make working with the DOM, arrays, formatting, and more even easier.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/j...
Intl.RelativeDateFormat Article: blog.webdevsimplified.com/202...
Event Listener Tutorial: • Learn JavaScript Event...
Event Listener Article: blog.webdevsimplified.com/202...
Memoize Tutorial: • Memoization And Dynami...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:38 - DOM Utilities
06:15 - Other Utilities
08:53 - Array Utilities
11:30 - Formatters
#UtilityFunctions #WDS #JavaScript

[@filipusfontanus]

You shouldn't be using filter() for the first()/last() methods. It becomes exponentially slower as the array grows in size. slice(0,n)/slice(-n) are much more efficient and show no significant degradation in performance with larger arrays.

[@sarscov9854]

did you get your first job yet? Most real life scenarios won't have that many elements in the array. Leet coder key board warrior.

[@filipusfontanus]

@@sarscov9854 I've been working with JS for years, and I deal with very large arrays (10,000+ elements) on a daily basis. Think, for instance, of a legacy format containing a list of products: that format is converted to JSON for easier handling, and a RESTful API is used by several applications to query products from the list. Obviously, storing those products in a database would be a much better approach but because of various infrastructure restrictions and issues, it cannot be implemented for the time being, so we have to stick with the JSON compromise. That IS a real life scenario. And by the way, striving for better performance is NEVER a bad idea, as long as it doesn't obfuscate the code. Which, in this case, it doesn't because slice() is actually much clearer than filter().

[@benpaul8172]

@@sarscov9854 I’ve been working in large tech companies for 15 years, we think about performance every day. You would be laughed at with that attitude.

[@sarscov9854]

@@benpaul8172 you're an idiot. I didn't say performance isn't important. Sometimes the juice isn't worth the squeeze. You're probably that guy that holds tickets hostage by not approving PRs for miniscule things and making QA have to work overtime near the end of sprints.

[@kujojotaro3464]

@@sarscov9854 are you really that stupid and toxic at the same time? Slice much much much better than solution in the video.

[@iamthe_OBSERVER]

Kyle. At this point I cannot live without your videos. Please never stop. Love from Ghana. ❤️‍🔥🇬🇭

[@TheDeathMongrel]

Kyle, great subject. I was worried that it would be one of those "include this now-CVE'd NPM library". Having your own utilities is something some programmers fail utilize nowadays. (Nothing wrong with NPM as a whole, but it has its caveats). Now more importantly, you have a good presentation style, and even though you speak rapidly (this is a plus), your speech is quite clear and understandable. I'm always interested in the content you create, and even if I don't find it useful or maybe is old hack for me I don't feel like I've wasted time hearing what you have to say (in general I usually find I learn something new or at least something new to think about). Keep up the great work.

[@ChaoticNeutralMatt]

Agreed, except for the speech speed comment. But that's what playback speed is for

[@jerryl.7286]

@@ChaoticNeutralMatt I think his speech speed is brilliant whereas many other KZbinrs do not have. If they are all same speed, there is no personal preference tho. I come here just to listen to his voice and see his face btw. lol

[@mrahamed5985]

You are just doing an amazing job man. thanks for sharing your knowledge with the community. I really appreciate you from the bottom of my heart. Thanks a lot.

[@bushigi5913]

The formatter part is amazing! Thanks.

[@vaibhavrawat8419]

Such quality content! Love your videos!

[@jugibur2117]

Great stuff! Thanks for sharing Kyle!

[@ShawnRitch]

Excellent !!! Very useful tools. Thanks for sharing :)

[@Shuyinz]

I love this! Please keep continue to make video of this smart code!

[@sergeyplotnikov5031]

Your videos are so helpful!!! Thank you very much!!!

[@senseicodes]

Man your content is amazing. Been working on a vaniila js project and I have so many utility functions as esm, they are so handy. About to modify some of them to use yours 😂 and add the rest to my huge util.js file. Thanks man. Amazing work.

[@holypizza1]

can you share it? 😅😅

[@pepp0tube]

RelativeDateFormat is exaclty what I was looking for and what I was going to implement by myself. Thanks, you saved me a lot of time.

[@Niksorus]

Amazing video, I love these as a junior ♥️

[@thevividversatilechannel4807]

array.at(-1) can be used instead of array[array.length - 1]

[@robertholtz]

Awesome video and great advice. Just as every good chef maintains their personal set of knives, every good programmer should have their personal arsenal of general-use utility functions. Your “bag of tricks” should follow you in your travels as a developer and evolve/improve with repeated use across multiple projects. This has the added benefit of making your work more consistent and therefore easier to maintain over time. Nice work, Kyle!

[@outlawpl]

Very handy. Great video. Thanks!

[@romanext921]

Superlike! Why did I not see this earlier... Thank you!

[@techexpertpremiere]

That's great Tutorial. Thank you.

[@daveit1337]

This is so cool. Thank you, Kyle.

[@zshn]

Great video. Many of these should be first class functions.

[@stylesg7818]

Thank you. Very useful indeed.

[@Zechey]

do you always pick up that guitar to play the intro?

[@landero333]

Omg, this is so useful! Thanks

[@frankie_goestohollywood]

Thank you, Kyle!!! 👏

[@SorakaOTP462]

Thanks to your javascript tutorials I learned how to access all of your video files from your website, so now I can watch them for free and I also uploaded them on torrent so everyone is happy ^^

[@brunocastro4193]

Awesome! So helpfull! I changed the createElement function to .className = value (on key === 'class'), so i can pass all classes in one single string

[@WidianDAlbie]

Thanks you for amazing video as always

[@jonathanmarois9009]

5:30 😂 The confusion on his face as it fails to work as he's describing it lol

[@mostafaekbal3863]

Thank you for the amazing content

[@dakotazout]

Great vid. Re: your sleep function... what is the benefit of using a Promise with setTimeout vs calling it directly?

[@loydcose2780]

This is sooo useful, just like CSS we create utilities for less repetition. 🙌

[@GG-uz8us]

Very helpful.

[@balajiravi9259]

Really nice 👍

[@agent-33]

What a coincidence. I just searched for js useful common code snippets yesterday. I need a function that picked a random number min~max, random item in array, delay promise, etc. The ones I always have are the shortcut to get element by id and selectors. I need your createElement and addGlobalEventListener now. 😁

[@LlegoManuel]

You lived up to the name of the channel

[@TypeError2033]

hi kyle thanks for making videos

[@Luke_UPPX]

Thanks man, i recomment to use momentJS for handling dates

[@bennybar]

The number formatter is a life saver. I don't even want to know how many times I've done a replaceAll(".",","), because Denmark uses French decimals

[@RedVelocityTV]

If you're still working with a framework which directly manipulates DOM. Chances are it's JQuery which has easier selector and a much larger feature/function set

[@nigelsalvador]

I was thinking why you wouldn't just use jQuery in a lot of cases.

[@bernardus3289]

First one blew my mind, even though its so simple.

[@soniablanche5672]

you can use setAttribute with class but it will modify it as a string like any other attribute, which is less flexible than classList

[@JimKernix]

Excellent video. Can you do a video on using the underscore as a variable like you do in first and last array functions. I don't quite understand that.

[@dcmbassi]

It's use when a function expects 2 arguments, but you will not reference the first. In this case, Array.filter expects an array item and (optionally) an index. But since only the index will be handled in the function scope, and since it MUST come second, you put an underscore in lieu of the first argument.

[@eleah2665]

Yes - handy! thanks

[@ahmedkharrat9559]

Good content thx

[@kjn6037]

Would be great if you can cover some of the new stuff in React 18 that just came out.

[@Cracked1ce]

What do you think about adding most of these utils to the prototype instead of having to pass them as an argument?

[@drizzletone9148]

Pulluting prototype with custom methors is considered as a bad practice since it can cause some problems with libraries. If it's your hobby projects, sure you can do it but on large codebases when many people are working as a team it's not a good idea.

[@javybigballs88]

I would argue that most of what these functions are trying to achieve are already simple enough to write in vanilla javascript. And as for the global event listeners be very careful with those. It's always better to explicitly add those events the normal way in order to remember to remove them when necessary. I like the create element one though :), nice and clean. Good content

[@solvedfyi]

All I see here is vanilla javascript, just organized into functions... everything is "the normal way"

[@Quillraven]

@@solvedfyi while that is true I think he has a point and I agree with some of the utilities shown. E.g. "qs" is nothing different than "...querySelector". It is a replacement of a oneliner with another oneliner. Here I would argue that people who know JS they will instantly understand the .querySelector version since it is the official one. For qs they have to think what do those two characters mean and in worst case look it up to find out that it is basically a different syntax for a oneliner. Utilities IMHO should simplify things and make it easier to read. A great example was the math utility for a random number.

[@indoom]

@@solvedfyi they aren't vanilla js anymore at this point. Every new programmer will have to learn every utility what it does and how to use it. jquery uses vanilla js too under the hood.

[@solvedfyi]

@@indoom This is not importing a library, like jQuery. The video shows writing the function yourself. Writing functions to reuse throughout your code is still just javascript, it's not a framework

[@solvedfyi]

@@Quillraven My understanding of the point of the video is you're writing functions for yourself so you can move more quickly from project to project. You write a qs so that you don't have to write document.querySelector each time, but you know what it is because it's your own code. If a guest is looking at your code is like any other function, it will link to the function definition. This particular example doesn't save that much typing but the overall idea of writing simple functions around complex ones is something I expect we all do. The video wasn't "download this module and use these mystery functions", it was "write this around this to save you time"

[@emsp5558]

@web dev simplified did you play the guitar intro?

[@radyy4902]

if I want to add many classes on element what should I do?

[@alvaroprietovideos]

Hola! It is childish, but it made me happy that you said 'Spain' 😂💃

[@rayankhan12]

These methods are going to be part of ES7!

[@anthonyblackford8689]

Awesome video, but how would you stack a function, the groupBy for example, suppose you had an array of objects of people like the example, but you wanted to group them by gender, then hair color, then eye color. How would you write something like that? I tried what I thought it would be, but didn't work.

[@mikethetreeclimber7]

Source dive alpinejs for us!!! I love your style

[@reddev8906]

kyle, you can make a pollyfilll for the arrays for example for pluck Array.prototype.pluck = function(key) {return this.map(elem => elem[key])}

[@reddev8906]

usage: qsa('.elems').pluck('innerText')

[@lacherolachero9409]

Great video! why won't you export this to NPM? :)

[@ShadabRezashad]

Nice codes

[@pouriyanourouznejad7090]

13:25 I didn't know that! I always wrote a lot of codes to do that! Painful 🤦🏻‍♂️😂

[@vaibhavspecs6666]

14:23 where you talk about the formatRelativeDate function. I am getting this error in SAFARI Browser -> ~undefined is not an object (evaluating 'division.amount')~ Can anyone help me out with this issue ?

[@holypizza1]

Wow! Are there any other similar things to that?!!! That's sooo helpful!

[@indoom]

yea, lodash

[@mhmmdshaz98]

Hey, just curious. Does the sleep function you mentioned and the setTimeOut() work the same manner?

[@boiimcfacto2364]

setTimeOut is asynchronous, which means if you want to execute a bunch of code after the timeout, you'll have to put it all inside one function and call setTimeOut with that function's callback. Using Kyle's sleep function converts it to a Promise, so you can use the *then* and *catch* functions to make it easier, or even the async / await format. TL;DR - They work the same way, but it's easier to use sleep and follow it up with multiple functions, rather than using setTimeOut with one function callback that calls all your other functions in order.

[@whynot9963]

It basically waits some duration and executes. Same thing as timeout, but maybe easier to type/read. Overkill imo, but if you use it often, then it might be useful

[@stevenleonmusic]

Unless you use async/await, there's literally no difference as the promise then/catch syntax is identical to having to use a callback chain in the timeout. So honestly this is just as useless as the "qs" shortcut unless you actually want to make use of the fact that it returns a promise and specifically by using the async/await syntax for clarity (e.g. await sleep(100);)

[@mhmmdshaz98]

Thanks guys, sometimes stuff like these confuses me like I'm missing something important.

[@boiimcfacto2364]

@@mhmmdshaz98 No problemo, glad to be of help :) The more you ask, the more you learn amiright

[@StellarWeb008]

Why not make a complete separate video on that Intl Class

[@jameswan2963]

Array slice(0, number) is same with the Array first function, isn't it?

[@kylebelle246]

Slice with negative number should also cover the last functionality

[@martinmoreno32]

@@kylebelle246 I think he is remaking content at this point

[@JeanDidier]

Heading to lodash 👍

[@subham-raj]

And then people say why DSA is given importance. The things mentioned in the video are the easy to medium question from DSA :)

[@yaverjavid]

you can also do qs = document.querySelector

[@QwDragon]

You need to call it on document very rarely. Also you missed bind, so will get an error if try to call in that way.

[@FunctionGermany]

@@QwDragon not sure what you mean with the first point, i call querySelector on document a lot more often than HTML elements

[@IceMetalPunk]

I find myself having lots of lines that just store the results of `getElementById` and `querySelector` into variables, so I've started using this util function to allow destructuring for much shorter and cleaner code (obvs with proper line breaks and indentation it looks much nicer): function $(...selectors) { return selectors.map(e => { let ret = document.querySelectorAll(e); return ret.length > 0 ? (ret.length === 1 ? ret[0] : ret) : null; }); } So now I can do things like this: const [mainContent, allInputs, bags, messageArea] = $('#mainContent', 'input', '.bag', '#messageArea'); It becomes so easy to add/remove/change any of the elements I'm targeting, and it automatically handles setting the value to the element if there's only one match or the full node list if there is more than one match. It's made my scripts so much cleaner whenever I have DOM manipulation (which I often do when writing smaller pages that aren't important enough to set up a full React app).

[@user-tx5sr2lt6z]

Better to add `async` to sleep and change `duration` to `ms`, for example. Some functions using duration in seconds

[@user-gn1vu3ve9g]

I'm wondering that if you write your project using these custom functions, won't it be hard for others to read your code? Like they can't understand what qs means

[@finsflexin]

Exactly, I always have to spend a decent amount of time trying to understand poorly named variables such as qs.

[@user-gn1vu3ve9g]

Got it! Thanks for answering me!

[@Khusyasy]

nice

[@dman7776]

You do not need `qs` and `qsa` function. Simply use `const { querySelector } = document`;

[@kylebelle246]

Most useful stuff was definitely the date stuff. Every thing else was of questionable utility but those dates still confuse a lot of devs

[@lifebest4404]

Sir how to create uber app backund php

[@khobiziilyes2525]

For the array utils, extending them to the array prototype is better than passing it as a function. The "first" function, is just slice, and less optimized because it continues filtering the other elements even it's not necessary (it should stop on the first False check)

[@khobiziilyes2525]

Also for the "pluck" function, try using a map instead, it's way faster than an object

[@AmanSingh-px5if]

I think its never a good idea to add methods to the native prototypes itself if you are going to build something at scale, because at some point of time that could lead to conflicts if JS decides to add that method, and future developers would really have a hard time interpreting that. Please correct me if I am wrong.

[@victorlongon]

No, don't do that

[@mariokrstevski8836]

@@AmanSingh-px5if You are correct, extending the prototype is dangerous. If you're gonna do it, just be aware of it, and if conflicts arise in the future, the lead dev should know how to react. the only good use-case for this is to enable method chaining, instead of doing composition

[@pneujai]

that is prototype polluting which is bad

[@dimitargetsov9690]

I wish two things--feasible ones--at the end of Roland Garros 2022 Rafael Nadal champion and WDS with 1M subscribers...

[@QwDragon]

2:15 There's no way to unsubscribe from this. Definite subscription leak. Also, e.target.matches is not a good way if there is some content inside. e.target.closest(selector) would be much better. But anyway, the handler will need to request it again. 4:20 Attrs are not always the same as props. So in some cases it can work incorrectly. 6:22 Prefer name `delay` like in C# as `sleep` usually means blocking operation. 8:13 In most cases you don't need generic memoization. See no reasons to have this function. Also, heavy calculations usually based on large amount of data, so JSON.stringify can be expensive too. 9:13 See no reasons to write first(smth) instead of smth[0]. Inconsistent return type (element vs array) is antipattern too. Even if it is usefull, would be better to use undefined for single and 1 for an array. If I need 2 elements of 10000, filter will check them all. Normal array.slice(0, n) wouldn't. And the same qusestion: why use this function instead of standart slice? 9:26 last for single element is more usefull as arr.at(-1) may need polyfill, but for several elements why is it better then arr.slice(-n)? 10:19 No need to spread on newly created objects. Absolutely useless waste of performance. 14:26 It will be inconsistent as different monthes have different number of days and weeks. If create such helper (actually I hate relative dates everywhere), it should work much better and be predictable.

[@mariokrstevski8836]

You are correct on every point, but I sense a hostile tone from you 😅 i think he's just making content to get that $ from yt, and hes constantly saying "check my blog" for even more adsense $. But it is perhaps somewhat usefull to people learning, it gives them ideas and encourages them to create their own util f(), and some people work at companies where they dont even use utils, so this is nice to have even if it's not the best of the best

[@QwDragon]

@@mariokrstevski8836 not intended to be hostile, sorry. Yep, some utils are usefull, and I have absolutely other set of utils.

[@ryanriaz1163]

@@QwDragon can you share your own solution too?

[@QwDragon]

@@ryanriaz1163 solution of what? You want me to make a video with my own utilities? Or rewrite some code from this video?

[@ryanriaz1163]

@@QwDragon rewrite the code that you pointed out in this video...

[@derjansan9564]

My createElement() function has a third parameter which is childElements. These childElements will be appended to the newly created element.

[@magnus__reeves]

physcotic way to arrange ur method paramaters

[@wimpie1990]

Very informative, but I don't agree with the queryselector functions and the create element function. Creating those functions makes the code harder to read. If you want to save time it would be better practice to set a shortcut in Visual Studio Code. That way you still save time but your code remains readable by any new programmer that is gonna touch it. Also, personally I like to put the randomNumberBetween function on the Math class. Because it is a function that uses Math and so you can call it staticly with Math.randomNumberBetween.

[@stevenleonmusic]

I'm really not sure why anyone would even use document.createElement() in 2022 anyway since we have template literals and insertAdjascentHTML(). You could argue performance but I defy you to find a realistic scenario where an actual user could perceive the difference between creating document fragments and nodes vs. just writing an HTML string and using inner/outer HTML or insertAdjascentHTML(). All the if statements he added for those irregular attributes are taken care of since the JS engine will just interpret the HTML string correctly without issue.

[@TehPwnerer]

Your sleep function should be async/await

[@FunctionGermany]

no, there's no point in doing that because it doesn't await anything. it creates and returns a promise that a function calling sleep could await however.

[@anthonypetruzzi158]

so.... jQuery... you've reinvented jQuery

[@ankitshukla8640]

You should rename addGlobalEventListner to aGEL and createElement to cEL

[@rishabhanand4270]

Is it that much harder to write though? The thing is half the time, you end up adding functionality over functionality to the utilities themselves because you reach more complex cases. If it's genuinely very tough to write (example WebRTC / IndexedDB), please do go ahead and make sure you add as many utils as possible. And if it's a function you use all the time just with different params from the browser API, please do go ahead and modularise it. I would argue that using browser APIs directly would be a better choice if the saving is minimal.

[@Italiafani]

Is there a reason why you're using `Array.prototype.filter` instead of `Array.prototype.slice` in the `first` function? I see no point in looping through the whole array just to get the first n items.

[@WebDevSimplified]

I always forget that function exists to be honest

[@solvedfyi]

@@WebDevSimplified You might wanna talk about it in a follow-up video because that's not a good look

[@bhumit070]

and make them npm package and add them in any project

[@koki10190]

btw i think you should've used Array.prototype.FUNCTIONAME instead of the function FUNCTIONAME so then you could've used .FUNCTIONNAME

[@szczeczaczoszczeczek5077]

Nope my friend. You shouldn't add owns methods to Sth.prototype. You can If you create custom classes

[@lxdixd]

@@szczeczaczoszczeczek5077 why not?

[@FunctionGermany]

@@lxdixd prototype manipulation is terrible because you don't get any intellisense or tooling support, you don't know when it's initialised unless you have control, and it might collide with other prototype manipulation (it's global)

[@lxdixd]

@@FunctionGermany true, was curious. I use typescript in vsc so i don't really have to deal with no intellisense since it has intellisense everywhere, but i can see the disadvantages of prototype modification.

[@solvedfyi]

No. Do not pollute the standard prototype. MooTools did this, then when features were being added in new versions of JavaScript they had to go use a different awkward name because MooTools already took the good one

[@nitsanbh]

I think your groupBy implementation is inefficient, because the spread syntax copies the entire object into a new one (and lets the GB dispose the previous) every single iteration

[@nitsanbh]

Also, regarding “first” and “last” why filter by the index when [].slice exists?

[@rexkenley]

lodash, date-fns. Why re-invent the wheel?

[@victorlongon]

You should really think about doing these videos in Typescript. I think you would reach and interest more people. Who writes plain js nowadays ?

[@snowsenpai_]

New developers that are just starting to learn web development will probably learn vanilla JavaScript first, and I'm sure it would be easy to transition into Typescript. This channel is a treasure chest of fundamentals imo Your suggestion is not a bad idea btw

[@alexchaves5532]

you can easily adapt a vanilla Js code to a typescript one. it's the same language at its core.

[@alienheartz9163]

What is a problem to convert it to Typescript? This channel is for new developers who are learning fundamentials

[@QwDragon]

All these functions can be easely changed into typescript. Even pluck. For all other functions see no difficulties at all. function pluck(arr: T[], key: K): T[K][] { return arr.map(x => x[key]); } const arr = [{ id: 1, name: "A", x: 1 }, { id: 2, name: "B", x: "" }] const ids = pluck(arr, "id") // number[] const names = pluck(arr, "name") // string[] const xs = pluck(arr, "x") // (string | number)[] const oops = pluck(arr, "oops") // Argument of type '"oops"' is not assignable to parameter of type '"id" | "name" | "x"'

[@QwDragon]

@@alienheartz9163 pluck may be a bit interesting. See no problems with anything else.

[@finsflexin]

If I ever see that “qs” function in anyones code, you bet I will delete that horribly named function

[@meqativ]

hi

[@jimishukurow2286]

You Are making jquery again ...

[@QwDragon]

Actually jQuery was nice :)

[@MattCurney]

Isn’t this kinda… jQuery?

[@InverserPro]

And this «react» went to hell!

[@user-rt6fq8wk1d]

Comment

[@Husnain156]

Learning a framework would be better.

[@FunctionGermany]

i disagree, fundamentals are important. you can learn a lot by writing your own functions.

[@stevenleonmusic]

Readable code is always more valuable than easy-to-type code. It's criminal to take descriptive functions and rename them to "qs" and "qsa" and that really kind of highlights the one complaint I have about your channel: You've either never worked with other people or have simply never been told "No" on anything. I like some of these concepts but I don't understand this-very incorrect-notion that programming is slow because things take a long time to type. Programming is slow because we are solving problems, not for lack of short function names. Create a reusable library for sure but make it a good one with descriptive names and built-in documentation.

[@zodiarkesper6073]

Title is misleading doesn't relate to content very much Wouldn't global event handler have bad performance like some events is triggering contantly like mouse move Last thing why not using slice , it has best performance

[@djf8550]

Hahaha, I've created similar functions to yours qs & qsa (with exact that naming), and added to GreaseMonkey years ago ;) My qsa() returns array (using Array.from()) that way I can quickly use array methods like map or reduce.