tag: Javascript

What are generators and how can I use them? How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways? How do you throttle and control function execution? Debounce function? Build your own? What if you could produce the right mix of reusable functions, looping and throttling in one go? Enter generators. What are Generators? Generators are functions that lets you can control iteration. You can use generators to suspend execution of a function while saving the context for continuing the execution at a later time. ...

Is there really a problem with NPM use? Short answer: no. Long answer: it’s complicated. I am nothing but thankful for the tonnes of NPM packages. I would never have built web applications that could support thousands of users all by myself without all those hundreds of packages. There are thousands of developers (if not millions) who do much better than what I could. With NPM to support what I do - I just identify the right solution, search in NPM / GitHub, and most of the times find it. At least I find something in the general area of what I am looking for. ...

Flatten recursive arrays using Array.flat(). We have seen how to flatten arrays before. Array.flat() is quite useful to flatten arrays in one statement and output a simpler array. But, what about situations where you do not know the depth of array hierarchy - const nums = [[1, 2], [3, 4], [[5], [6]], [[[7]]]]; Fear not. Array.flat() takes in an argument to flatten to a specific depth or flatten everything. console.log(nums.flat()); // [ 1, 2, 3, 4, [ 5 ], [ 6 ], [ [ 7 ] ] ] console.log(nums.flat(2)); // [1, 2, 3, 4, 5, 6, [7]]; console.log(nums.flat(Infinity)); // [ 1, 2, 3, 4, 5, 6, 7 ]

Remember to filter your arrays before doing array-wise operation. Filtering falsy values must be the first operation even if you do not have specific filtering requirements. Consider this array - const nums = [1, 3, 5, undefined, 7, 9, null]; If you are in control of the data source, you can very well expect to filter only when necessary. But any kind of array operations, or data from external systems can cause all kinds of unexpected results. We have seen how unexpected values impact array sort before. As you can imagine filtering goes beyond a simple array sort. ...

Can you use the Date object without brackets? Yes, apparently - to a friend’s delight and my chagrin. I should know better than to rely on my somewhat shaky Javascript knowledge. This is the format for a sane Date code.. const today = new Date(); console.log(today); // 2019-08-23T09:31:12.181Z If you want to pass parameters - const firstDay = new Date(2019, 0, 1); console.log(firstDay); // 2019-01-01T00:00:00.000Z This simply means that firstDay is created by passing variables to Date, which are in turn being used by the date constructor. ...

Load external scripts asynchronously in Javascript. We have seen about loading functions asynchronously in Javascript. But, what about the scripts that you load from other files, CDNs or other external sources You can do a simple async to load scripts without impacting the loading speed as perceived by the user. <script src="loadMe.js" async></script> This will load loadMe in the background without impacting any elements displayed on the page. Alternatively, you can also do a defer. ...

Arguments object throws an error when used with arrow functions. Consider this code - function getSum() { return arguments[0] + arguments[1]; } console.log(getSum(1, 2)); // 3 The result is as expected. But, you cannot do the same using an arrow function. const getSum = () => { return arguments[0] + arguments[1]; }; console.log(getSum(1, 2)); // gobbledygook or error You will see a function definition, or an error depending on the runtime engine. Arrow functions do not provide the binding for arguments object like regular functions. ...

One of the interesting projects that I came across recently was NodeGUI. NodeGUI describes itself as an enabler to build cross-platform desktop applications using Javascript (and React) and Qt5. Using NodeGUI, you should be able to - Create desktop applications that run on Windows, Linux or MacOS Styling with CSS Support for desktop events that are listenable from Qt Lower CPU/memory footprint Of course, the comparison with Electron is evident. ...

Concatenating strings is a fairly simple affair. console.log("hello" + " world"); // hello world This works because Javascript figures out the types, thinks that adding strings is not an intelligent thing to do, and therefore, concatenates the two strings. However, it may lead to problems. const one = 1; const two = 2; const oneAgain = "1"; console.log(one + two + oneAgain); // 31 The addition takes place in two parts - one + two = 3 3 + oneAgain = 31 The addition across types work, albeit different from what a beginner expects and can be confusing. ...

Let’s create a simple ’to do’ application using Svelte and GraphQL. The objective is to demonstrate getting started on a GraphQL query and insert operation in a Svelte component. If you are new to Svelte, you may want to go over what Svelte can do from the official site, or see Svelte quick overview. Also, we will not quite dwell on the backend server in this post - you can follow along if you have any GraphQL backend. If not, I suggest you get started with a GraphQL setup of your own in the next 15 min. I will use the data structure and statements from the server setup described in that post. ...