ReactJS has ruled in the case of Single Page Application. I am going to discuss some important advanced concepts that will take your understanding of ReactJS to the next level.<h3 id="react-conditional-rendering">React Conditional Rendering</h3>Distinct components are created in React and you can give behaviour to these components as you want. Thereafter they can be rendered according to the state of the application. Let us assume, a form is inside a component and below that form, an error message has to be shown. And this error message has to be rendered only when an error actually occurs so that error can be displayed.<h3 id="environment-variables-env">Environment Variables (.env)</h3>Sometimes you need 3rd party API and you are dealing with some kind of keys then env would be the best place to store this private data in a file. Now you don't need to type keys again and again in components and you just have to call from the env file. If you want to use the env file inside your React project, you need to create the env file in the root directory of the React project.Due to some limitations, don't forget to prefix REACT_APP_ before all keys.Once the env file is entered into your project, the development server needs to be restarted so that you can access any key inside any component.<h3 id="usecallback">useCallback</h3>When the inline callback and an array of dependencies are passed, useCallback returns a memorable version of the callback that will be changed if one of the dependencies changes. This has the advantage that when callbacks are passed to customized child components and components rely on reference equality so that unnecessary renders do not occur.There are child components inside the parent components. If the parent component is re-rendered, the child components will also be re-rendered. Now such components which have no relation with the recently updated state do not need to be re-rendered. For this useCallback has to be added on event functions that update the states. <h3 id="error-boundaries">Error Boundaries</h3>No JavaScript error should have an effect in such a way as to break the entire application. To solve this problem, React 16 introduced a concept called "error boundary".Error boundaries are basically React components that work to catch JavaScript errors throughout the child component tree. They will log these errors and display a fallback UI, not the component tree that has crashed. In lifecycle methods, errors are caught during rendering.Only class components can be constructed as error boundaries and they will act like JavaScript catch {} block.For example, when you're working with APIs and accessing data in useEffect, the API may break, you'll need a try-catch to fix it.<h3 id="react-with-axios">React with Axios</h3>When we have to deal with API calls in React applications, Axios or fetch functions are needed.Axios has to be installed before it can be implemented.npm install AxiosThereafter, you can perform all kinds of API calls.GET, DELETE, POST, PUT, etcThe function of GET requests would look something like this.axios.get("url")And if you want to put the header in the Axios function then syntax will be like this.axios.get("url", {headers:{}})useMemoThe 'create' function and an array of dependencies are to be passed to useMemo, and whenever a dependency changes, useMemo will calculate the memoized value. This will have the advantage that we will avoid costly calculations on every render.<h3 id="cancel-api-request">Cancel API Request</h3>Cancelling API requests when unmounting is a sign of best practice. Let's say you need an API call to a page. Because useEffect was used in this, in case, you need to open any other link then you need to close the ongoing API request. Your user has moved to a different component and you no longer need that data.<h3 id="code-splitting">Code Splitting</h3>As the app grows, so does your bundle. And if there are large-third parties to it, all the more. So the code should be optimized as much as possible and it should also be kept in mind that due to the increase in size, the app takes more time to load. Hence the division of the bundle becomes inevitable.Bundlers like Webpack, Rollup and Browserify support the code-splitting feature for this reason. All these bundlers create multiple bundles so that it all gets loaded dynamically at runtime.<h3 id="wrapping-up">Wrapping up</h3>If you go through the above concepts carefully, I would encourage you to try all these concepts, it will be a way to master these concepts. Sometimes, learning advanced topics is a daunting task, but that's the process to follow and it turns you into an expert.

Hamid Akhtar

Learning ReactJS Advanced Concepts in One Go

Reactjs is a very popular library at the moment. And sometimes things might come up where this library would fail to handle. And hence the name Next.js is shining in the market.React is the primary technology of Next.js. Next.js is built on the primary library. It is called a framework because it can be used in specific ways. It's similar to React but it's better.There is a lot of functionality in any React app. Because of this you also have to take the help of a third-party npm package.And if you use Next.js you get all these apps already built right into the framework.For example, the router is already built-in. This allows specific URLs to load components so that they can be displayed at specific locations. Another example is the manipulation of the &lt;head&gt; tag. It benefits SEO a lot. It is easy to use.React ProsIf you have worked a little bit in React then you would know that the state of an application holds data. And as you progress through the app, some data will change.The state is like a front end database with which you interact. The state manipulates the view of the application. That is, if there has been a change in the state, then you will see a change in the user interface.ComponentsThere are many components in any typical React app. Components are the building blocks of any React app and in a simpler language, a component is a JavaScript function that optionally accepts input and returns a React element which, in appearance, is a section of the user interface. The advantages of React are so many that it is very difficult to mention them all here.React ConsReact has become very popular in today's era and to read more about it click <a href="https://techfastly.com/get-inner-knowledge-why-we-should-learn-react/">here</a>. cons are non-existent when you are a beginner but when you have spent a lot of time with React, they will be visible to you. Some of them are fixed with third-party npm packages.It is recommended not to use React Router DOM. Every app needs a router. You can use a third-party library to bring this functionality but it is not that straightforward. The router is implemented in different ways and that depends on your app.On-page SEO is impossibleYour site may not be indexed by Google and other search engines if you try to use React. Of course, you will get tired too while searching for a solution. On the other hand, you will find a simpler solution with next.js. While working with Next.js, you will not get all the issues with which React is struggling. This simply means that you will neither have to install nor learn third-party npm packages. I will discuss more it in my next upcoming articles.RenderingNext.js is a framework and it builds all the functionalities into the framework. This server-side will render the HTML and the client will get it back in its entirety. Client-side renderingYou build apps with React. When you build an application using CLI commands, the application has a basic HTML file that calls one or more JavaScript files. That JavaScript creates the entire HTML file and then loads the HTML into the site. The entire HTML is dynamically injected into the document object model through these JavaScript files. All this happens on the client side.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/237d062474060fa90601b066f37d465b.png" class="kg-image" alt loading="lazy" width="606" height="335" srcset="https://techfastly.com/content/images/size/w600/2021/11/Capture-2.PNG 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/237d062474060fa90601b066f37d465b.png 606w"><figcaption>Source: Dzone</figcaption></figure>Client processingThe client CPU does all the processing of the JavaScript during client-side rendering. Usually, it is not very intense and is easy to handle. You may have a problem if your processor is slow. It may seem that the processing is not ideal.Client requests for API dataThe site is created dynamically with JavaScript and you will be accessing the data from the database asynchronously through the API. The site will dynamically load HTML and then populate the information from the database. It takes more time for the client to make the request and get the response from the API than a server.But some factors can affect the speed, such as when the API responds. Because it depends on how fast the hosting provider is sending you the response. Plus the internet speed and processing power of your CPU.Server-side renderingDuring server-side rendering, the client retrieves an entire HTML document. The server runs JavaScript by accessing the required data. The server builds the entire page and sends it to the client.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/5011d013d3e3c92da61365c094b95252.png" class="kg-image" alt loading="lazy" width="636" height="355" srcset="https://techfastly.com/content/images/size/w600/2021/11/Capture.PNG 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/5011d013d3e3c92da61365c094b95252.png 636w"><figcaption>source: https://www.websitepulse.com/blog/server-side-vs-client-side-rendering-complete-guide</figcaption></figure>Initial processing by ServerServers are much faster than client computers. They access APIs, loop through data, and can do a lot more if you want them to. They also have a very good connection to the Internet, so when the speed is high, the API also responds faster.Additional processing(Next.js)Even after getting the complete document from the server, you may need additional API calls. The solution is with next.js. You don't need to force the server to render everything. You can send requests to the API asynchronously to update documents without page refresh.SpeedBut one thing to note is that during server-side rendering, the browser takes more time to get the response because all the work is done on the server itself. As soon as the response is received, the entire site is loaded all at once. This time is less than the time taken for the quick initial response of client-side rendering. In this way, the site starts loading asynchronously and is complete in 2-3 seconds.Final WordsNext.js is a framework and has more features and tools than React. For the front-end aspect, React.js can provide you with better resources and is the best solution for web and mobile applications, whereas when it comes to server-side rendering and static websites, Next.js is the best solution.

Next.js - The Ultimate framework when React falls short

JavaScript is becoming more and more popular day by day so as a developer you also get a chance to work with JavaScript. It is very important to look at the building blocks of JavaScript and be well acquainted with some rules of thumb, especially if you are a JavaScript developer and want to build fully robust and highly performant applications in a competitive environment.When you look at the <a href="https://githut.info/">GitHut</a> stats, you can easily see that the language tops in terms of active repositories and total pushes. Apart from this, it is not lagging behind in other categories as well.<figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/IsLXPCmGdN5g8goxq5HwP4kYTloLIS_gFJMVvT8NwLeK5SIVvwqp2smwSHli0cTxpfpH9WolWJSUiqy7hlo6n4SLEa1jyAUpPoentVp1I-QDy6B0YWOWH6fcGW5X87RJrHrg-J3E=s1600" class="kg-image" alt loading="lazy"></figure>Please also check <a href="https://madnight.github.io/githut/#/pull_requests/2021/3">GitHub language stats</a>.If projects are becoming too reliant on JavaScript, it means that developers have to know everything the language and ecosystem have to offer, along with a deeper and deeper understanding of the internals, to create amazing software.You wouldn't want to be a developer who is using JavaScript on a daily basis but doesn't understand what happens under the hood.<h3 id="overview">Overview</h3>If you do a little research, then you get to know V8 Engine as a concept or JavaScript is single-threaded or using a callback queue.The purpose of this article is that you should have a proper understanding of all the JavaScript concepts and also know how JavaScript actually works.Here you will also get to know why JavaScript is so weird if compared with other languages. If you've worked a lot in JavaScript, you'll still get to know how the JavaScript Runtime actually works.<h3 id="the-javascript-engine">The JavaScript Engine</h3>Google's V8 engine is a very popular example, and it is inside Chrome and Node.js if given an example. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh6.googleusercontent.com/-HToHBr24OQ4YCb3tzgPviRturBMmAXuP79Gv2A3vbpTUPZBdTld_ExwfXsd2M0iXAHuVL0QsCzEAtcr-PQj4QUvTAkKSrm0KLcMIYhLRQod-gjHG35qCGYbNBzkHbCESD7AzkdM=s1600" class="kg-image" alt loading="lazy"><figcaption>Source: <a href="https://learntechsystems.com/understanding-the-js-memory-heap-and-call-stack/">https://learntechsystems.com/understanding-the-js-memory-heap-and-call-stack/</a></figcaption></figure>The engine consists of 2 main components:Memory Heap- This is where the memory allocation takes place.Call Stack - Stack frames are here whenever your code is executed.<h3 id="the-runtime">The Runtime</h3>Browsers have APIs, which you as a JavaScript developer must have used. For example "setTimeout". The engine does not provide you with these APIs. Now we're going to find out where these APIs come from.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh3.googleusercontent.com/svEmPBycka6Ff5ItuIzB1mBa4RWZ_BsWYEaeALC6EZLLuPob_SX5k4JGQ4ZX6PcNP6MWZXCP-FBD-nuX_eEO6P9m5SyC1GjpQ9Z7OFlBVmvi1djhh2Mp3z5B3uDp7WJUXZAX7D_b=s1600" class="kg-image" alt loading="lazy"><figcaption>Source: <a href="https://morioh.com/p/1fa7f08ddd14">https://morioh.com/p/1fa7f08ddd14</a></figcaption></figure>Apart from the engine, there are also a lot of things called Web APIs that the browser gives us such as AJAX, DOM, setTimeout, and more.Next comes the <a href="https://www.educative.io/edpresso/what-is-an-event-loop-in-javascript?aid=5082902844932096&amp;utm_source=google&amp;utm_medium=cpc&amp;utm_campaign=edpresso-dynamic&amp;utm_term=&amp;utm_campaign=Dynamic+-+Edpresso&amp;utm_source=adwords&amp;utm_medium=ppc&amp;hsa_acc=5451446008&amp;hsa_cam=8092184362&amp;hsa_grp=86276435689&amp;hsa_ad=397226000870&amp;hsa_src=g&amp;hsa_tgt=aud-576728509172:dsa-837376625453&amp;hsa_kw=&amp;hsa_mt=b&amp;hsa_net=adwords&amp;hsa_ver=3&amp;gclid=CjwKCAjwq9mLBhB2EiwAuYdMtdq7TTA77_MdSQX22hTYfouB1jUzq_IWQQo6Q4A-WMXG_zvClXcARhoC0NYQAvD_BwE">event loop</a> and <a href="https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd">callback queue</a>.The Call StackIt is a well-known fact that JavaScript is a single-threaded programming language which means it has a single call stack. It will do one thing at a time.Let's look at an example.function multi(x, y) {return x * y;}function displaySquare(x) {var s = multi(x, x);console.log(s);}displaySquare(5);When the engine starts executing the code, the call stack will be empty and after that, the steps will be something like this.<figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/WkPYurUdKoKTewU8wNevRWvEUmayf12qBIk7MLYdSsTt01YljjOgYpwXyKUjEAH5p-U2gZIV86S-R4rVsfydcvSAFY_vzxFk3uxVyBc5sDr1TuCANk2DceOUH8H0jVKx_Kqk3LWC=s1600" class="kg-image" alt loading="lazy"></figure>Shown below is how stack traces are created whenever an exception is thrown.function firstFunction(){throw new Error('Stack Trace Error');}function secondFunction(){firstFunction();}function thirdFunction(){secondFunction();}thirdFunction(); <figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/--yHScm4M_nIgQvc81Word5MhPelgGqMbz2otk_fW3tIRDd8EopufHZ7FvOKYQkT_V02tRLZsAyv2ejCpGaCy4CBGV7dzCLtEUUPFW_jI5f6Nzo6HyCxj_Hkfjh44xi_n7MNtPJp=s1600" class="kg-image" alt loading="lazy"></figure>LIFO: Here the full form of LIFO is ?Last In, First Out?. This means that the function that is pushed last in the stack will be the first to pop out when the function returns. Now we would like to say that the call stack operates by the data structure principle of LIFO.Look at this code sample in which the LIFO demonstration is happening. Here the stack trace error is being printed to the console.<figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/tifO6bGR_ugF0uXSfJNx7gh5UUO9honzgu-zoHW55V5ROsi515xjx-wTd5ZESI_kpP9VUgjgDI3YAlO8XJLu70M_FCnzqSkgNi-It8OzHfjvfe8h1vODJ9FPT4zPuf6b1ZVtLkm-=s1600" class="kg-image" alt loading="lazy"></figure>Here it is clearly visible that the stack is starting from firstFunction() which was last inserted inside the stack. firstFunction() is the first to pop out and throws an error. After that secondFunction() followed by thirdFunction (). When the code is executed the first function to be pushed inside the stack is the thirdFunction().Temporarily store: As soon as the function is called(invoked), the things that are pushed into the call stack to form the stack frame are the function, its parameters, and all variables. A memory location is created in the stack and this is what we call the stack frame.Manage function invocations (calls): The call stack contains all records of the position of each stack frame. That is, which next function will be executed and it will also have to be removed after execution. Thus the code execution in JavaScript becomes synchronous.To understand what is synchronous, suppose you are standing at the cash point of a grocery store and you will be attended only after the person standing in front of you is attended by the cashier.This is what we define as "manage function invocations".How does the call stack handle function calls? For this, we have created a sample code of a function which calls another function. Please see below:<figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/aOA63bs2RPX78VWFU4gFVNtpd7dUVr6_ztZKfI8PllU1ymb7sOZ-a84t06xvTjM4058pMB2TabkGGzVJHnoidE86D1YNeHtWP3_LksaorxVzumdw6o56Sa46_SKUxnpf3JS9V4Bf=s1600" class="kg-image" alt loading="lazy"></figure>Let us now see what happens when the code is run.<ul><li>As soon as the secondFunction() is executed, an empty stack frame is formed which is the main entry point of the program.</li><li>Now the second function() will call the first function(), which is pushed into the stack.</li><li>As a result, firstFunction() will return "Hello I am Jonathan" to the console.</li><li>firstFunction() has done its job and it will be ready to pop off.</li><li>Now the execution order will target secondFunction().</li><li>secondFunction() will print "End secondFunction".</li><li>The secondFunction() will pop off and clear the memory.</li></ul>Stack overflowIf the recursive function does not find an exit point, a stack overflow will occur. The browser can accommodate the maximum stack calls, after which it will throw a stack error.function callMeAgain(){callMeAgain();}callMeAgain();<figure class="kg-card kg-image-card"><img src="https://lh6.googleusercontent.com/IGVRrRogFHIScyW3mckTVXRrZ4uXg4j1avxNFxClinwty10gjeaq6HN4h0HQW-M1ZemxGHSCE9-yYPbEyBy9EG46bSjCZAojPohyMDSBVzGqdY7XOm4glTDh_cj-606hPk8Hd1cX=s1600" class="kg-image" alt loading="lazy"></figure>callMeAgain() will run until the browser i.e., hosting environment gives an error "Maximum call size exceeded". And it's called Stack Overflow.Key takeaways <ol><li>JavaScript is single-threaded. It will do one thing at a time.</li><li>In JavaScript, code execution is synchronous.</li><li>The function invocation forms a stack frame that occupies a temporary memory.</li><li>It follows the LIFO - Last In, First Out data structure.</li></ol>

Javascript Internals

What's the closure? While preparing for the interview, you must have checked this question or should say that you should already know this question. The closure is really important in the functional programming world. You can access the outer scope of the function from an inner function. In other words, a closure is a bundle of a function and references to the surrounding state. The surrounding state means the lexical environment. Simply put it is in such a way that whenever the function is created, the closure is also created.<figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/Wft3lnXP4oZy6fp8wXRVM9-PLwmuG0gInJtLyyAZcIQiotxAv34_gBE-gEhcU0NgUT6TEdfVvdeNCXjtlszsmxTcU5c5ik3pl7QUI9nULwpeEWOaXQLscsPMmcSGmnFMdO9UEbrR=s1600" class="kg-image" alt loading="lazy"></figure> The interesting point here is that the anonymous function that is returning is not alone, but is taking a and b variables along with it. A single function is not executed, a record is executed. The lexical scope of the function also lives with it, i.e. overall closure is the return.Let us take some examples:function IncreaseNumber() {// Local ?free? variable that ends up within the closurevar num = 1;function fNumber() {console.log(num);}num++;return fNumber;}var number = IncreaseNumber();number(); // 2The function fNumber does not have a local variable of its own. But it has access to the external function, due to which the value will be logged to the console after the num is incremented.function fIntro() {var fStore = function() { console.log(strWord); }// Local variable that ends up within the closurevar strWord = 'Hi, I am Hamid!';return fStore;}var sayHi = fIntro();sayHi(); // ?Hi, I am Hamid!? Although strWord is defined after the anonymous function, it was in scope at the time of the function creation. Hence it is available while executing the anonymous function.We move to a higher level now.Going to a higher level means we want to know what is actually happening in the background. Because the variables remain accessible in the enclosing function(s), even when the same enclosing function has also returned. To understand its depth, we have to turn to an abstract concept called Execution context. <figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/79dTyXkOnRJEpnySVsjbkw1Vaew6BQYxsDM0uukQ5S_HSYLULNc2UthpeCaBa6Z3J_Kf67kcWdqrlnlu0OspVecqW3gthPAQATjB9NabQ7Ikb_V0iXkQYULhdXuwNgtoGhc8PpYY=s1600" class="kg-image" alt loading="lazy"></figure>In JavaScript, one command is run at a time i.e. JavaScript is single-threaded. Javascript will only handle one execution context at a time. Browsers maintain execution context through the stack. Whatever you push into the stack, the last one will be executed first. Stack is a LIFO data structure: Last In First Out. An insertion or deletion can occur only at the top of the stack.The top item in the stack is the current or running execution context. Sometimes it may happen that one running execution context is suspended and another execution context starts running. That means the running execution context does not need to terminate for a different execution context to run.The running execution context may also get suspended. The suspended execution context subsequently resumes where it left off. Thus we will have a bunch of execution contexts running one after the other. Some of these pause in the middle and resume after a while. There must be some way to track the states so that we can manage the orders and execution of these contexts. The ECMAScript spec provides you with the state components which allow you to track the progress of the code in each context:Code evaluation state: It evaluates the code that is associated with the execution context. It is needed to perform code evaluation, suspend and resume.Function: Execution context evaluates the function object.Realm: A set of intrinsic objects. Realm is created after the Execution Context Stack is created. Realm provides access to the global environment. The Realm is created before the code is executed and is linked to all code related to the surrounding agent.Lexical Environment: A reference to the outer environment.Variable Environment: This lexical environment is just another fancy representation of local memory. In this, EnvironmentRecord holds bindings created by VariableStatements within this execution context.The most important point of all this is the "Lexical Environment Variable" as it explicitly states that it resolves "Identifier references" that are created by the code in its executable context. You can consider ?identifiers? as variables. The lexical environment manages the data within the code. It can be said that it gives meaning to identifiers.Console.log(x/70);Whenever x will get the value, the code will get the meaning and that would be possible through its Environment Record. The Lexical Environment consists of an environment record that contains all identifiers and bindings. Each Lexical Environment has its own Environment record.The inner environment refers to the outer environment that surrounds it. And the outer can have another outer environment. That is, one outer environment can have many other inner environments. The global environment is that lexical environment that has no outer environment. You will be definitely thinking about the layers of an onion.An environment can access the parent environment and the parent environment can also access its parent environment and so on. Thus, each environment has scope to access the set of identifiers and the environments forming a complete hierarchical chain is called a scope chain.We are not off-topic, it was necessary to cover everything to get close to understanding closure.A function has an execution context whose environment gives meaning to the function's variables and references to the parent environment. A reference to the parent environment makes all variables in the parent scope accessible to all internal functions. However, it does not matter whether the inner function(s) are called outside or inside the scope in which they were created. <figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/R-VlR2HzbhJm2DwSUzk9xjOEwejZ-7JizwjCtHdcBVM_ku8q1ZQ0IHHDMoID1pO_FHLcoq7j0AB22PsvI5b3rDqBCeR3sgcy4xqvFVtCbBIxoF8huL1MY9bButzcZGjNs0Vwoeu0=s1600" class="kg-image" alt loading="lazy"></figure> You get 125 as the function test is invoked. 125 is actually the return value that is obtained by invoking the bar function. The bar function can access the free variable y even after foo returns bar because it has a reference to y through its outer environment. This outer environment is basically foo's environment. bar function can also access x as the foo has access to the global environment. This is called "scope-chain lookup".Final WordsExecution context is an abstract concept that the ECMAScript specification uses to track the runtime evaluation of code. There is only one execution context for the code to be executed at any given point in time.Each execution context has a Lexical environment containing identifier bindings(i.e. variables and their associated values) and a reference to the outer environment.The set of identifiers that each environment has access to is called the scope. If these scopes are nested, a hierarchical chain is formed called the scope chain.Each function has its own execution context which includes a lexical environment and this lexical environment gives meaning to the variables within that function as well as the reference to its parent environment. And when the function has full knowledge of this environment because the function has a reference to this environment, it is called closure.As soon as the enclosing outer function is called, it creates a closure. It is not necessary to return the inner function to create closure.A closure is defined statically by its location within the source code, so its scope is lexical.

Closure-Lexical Environment-Variable Environment

Dart was first used in Google for web servers and mobile applications. Its journey began around 2011, but it was not well known outside Google at that time. Dart is compiled in the same way as other programming languages, and the standalone Dart SDK is shipped with the Dart VM. Dart has a package manager called the pub. When Google officially announced Flutter in 2017, the language Dart garnered more attention in the industry. Dart bumped up even more after the 2018 Google I/O conference. Mobile developers are increasingly turning to Flutter and if you've mastered OOPS, that would be your plus point for learning Dart.In addition to types, Dart is also a stricter language. When you work in JavaScript, you deal with a "truthy" value in conditional. <figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/R5mvFR6EI70ALbb4bucypLi02UkcE8uMITDxVmvdJNucH7ppBST5eyMr30uIlp-t7-gV4kC58suFVp0CqHK8C9t0gAQ57pt8wKaBh1ciYwjvBaf3WVfmLYK_lKbe-FxBZtFhJ3BW=s0" class="kg-image" alt loading="lazy"></figure>Now if we take the same code in Dart, you will know that the condition must have static type bool. Your code will turn like this:if (strName.length &gt; 0)And another preferred way is:if (strName.isNotEmpty)One more point related to this is that no triple equals (===) will be found in Dart.<h2 id="print">Print</h2>In JavaScript, you use the console.log method to write a JavaScript object, a JavaScript string, or primitive values such as integers and floats.But in Dart you would use print:print('My name is $Jonathan');And whenever you want to access properties on variables and call functions, all you have to do is wrap them in curly braces.print('length is ${strName.length}');<h2 id="map-function map() { [native code] }1">Map</h2>We can get a new list from the map, in which all the elements are transformed.var mappedCountries = country.map((country) =&gt; ?$country?).toList();print(mappedCountries); // =&gt; ['Albania', ?Algeria?, ?Andorra?]Ormap.forEach((k, v) =&gt; list.add(Employee(k, v)));print(list);Map in Dart is a dictionary-like data type that contains key-value pairs. There is no restriction in the data type of Map, but you have to keep in mind that keys must be unique inside the Map data type. The list is similar to an array and is a collection of items in an ordered way. You can specify the length of a list if you want. And you can even make it growable if you want.contains()Many times you want to check if an item is in the list or not then there is a contain() method.var numberArray = [1, 3, 2, 5, 4];print(numberArray.contains(5)); // =&gt; true<h3 id="function-parameters">Function Parameters</h3>When it comes to function parameters, you will find a big difference between JavaScript and Dart. Dart can certainly take your time but you are gonna find its implementation powerful. Either you can pass parameters in setPosition or you can pass by name also.getFullName('Jonathan', 'Hitchens');by name:getFullName(firstName: ''Jonathan'', lastName: ''Hitchens'');In the case of the constructor, this.fieldName dictates that the value passed is to be assigned to the property.Contact(this.LastName);<h3 id="handling-arrays">Handling Arrays</h3>The array is almost the same, but we have mentioned the slight difference here.Firstly, instead of push; add is used when items are needed to be added inside the array. Dart has helper methods, which are "first" and "firstWhere", which as the name suggests will give you the first item of the array. If the match is not found, an error will occur and you will return the value in "orElse" you need to deal with the issue.<h2 id="final-and-const">Final and Const</h2>The most important thing to understand here is that final describes the variable, and the const describes the value. Once the final variable is set, you can change the value to whatever it is pointing to, but the value of the const is frozen and you cannot change it. Another great tip you'll find when working with the Flutter analysis_options file is that you need to use const constructors wherever possible. And as soon as you enable the framework to cache widgets, your app's performance will increase significantly.<h2 id="fat-arrow">Fat Arrow</h2>FAT arrow is used for the single-line function. <figure class="kg-card kg-image-card kg-width-full"><img src="https://lh3.googleusercontent.com/WTjpEB9XBwNu6ShSbD4nGUIFARwnsTf5LZFFRca3Tzyh89ajR44YrncXjCWgtY-YcOjvMQBCg_wl9kZQ502_gohdPY7uazT3RK9n0vPhTYAJgebqecxgipoupyd30YZh1elW2iq9=s0" class="kg-image" alt loading="lazy"></figure>It will twist like this:myFunction: () =&gt; true, Doing so makes your readability much prettier.<h3 id="explore-generics">Explore Generics</h3>Dart generic guarantees object types, and thus benefits Flutter. Coding a class or a function in such a way that it works with a range of data types, and not just one is called the generic approach. With generics, you can do more basic type checking at compile-time and thus type safety will be built into your code. Collections hold the same type of information and type-safety is authorized. Generics allow you to create reusable classes, methods, and functions with various information types. When you build Flutter applications with Dart, you'll use generics for collections, futures, and streams, which are actually "centre library highlights".Collection generics means that each component inside the collection will be of the normal kind.List myList;Map myMap;This code is identical to the code in the snippet given below: <figure class="kg-card kg-image-card"><img src="https://lh3.googleusercontent.com/TQD7ypC6V__-SntGCgqrik_jHJVD_dtRvv0aKQVwHM-9AE_DYWzja2rLMcU0U5zLwaWNMcOiSGmvHs2eSPTH73zfytvv_ywt7oPEkHDMdUc6NPw5pAtWvbi31fZKVGuaJlS-1IKl=s0" class="kg-image" alt loading="lazy"></figure>You will need this code when you are working with a wide range of types. Dart Analyzer will work with the type specified inside angle brackets and won't let you make a mistake.List&lt;String&gt; myList;<h3 id="dart-vs-javascript-type-safety">Dart vs JavaScript: Type safety</h3>JavaScript supports both: dynamic and duck typing. An application developer can type any code and JavaScript will not notify about errors while coding. You will only get errors at runtime, so JavaScript is not a type-safe language. Dart on the other hand is a compiled language and catches errors during compilation. <h3 id="last-words">Last Words</h3>If this is your first exposure to Dart, I hope it is insightful and will give you a quick start. If you already know Javascript, your pickup will be much faster. Dart also supports object-oriented concepts such as interfaces, abstract classes, static typing, and more. One thing is certain that the Dart has taken off and can handle a really difficult task incredibly quickly. Also, it does not require specific hardware configuration or architecture.

Dart vs Javascript

TechFastly is presenting this article to lead the way for you to understand why React became so popular in the market. If you are thinking of pursuing a career as a Front End Developer, you will want to know this beforehand. Let me tell you in advance, this is a beginner-friendly article that will get you all set to start React if you want to.<h3 id="react-is-a-library">React Is A Library</h3>React is a JavaScript library with which you can create user interfaces. The library here means that it is not a complete solution. The complete solution would have been if it was exactly a framework. React ignores other parts of the solution, for which you would need other libraries.The real purpose is derived from the framework. Frameworks contain ready-made design decisions, and they are smart enough to form a complete picture of the application-level logic in your mind. Conversely, a framework can hurt experienced developers if they work on large codebases. The framework will force developers to code a certain way. This leads to a tussle between the framework and the developers.Apart from this, the framework is large and full of features. You can't choose your needs freely and you have to pull the whole feature instead. Even though a lot of work is being done on this, it is not ideal. Some frameworks are converting to modular frameworks.React is a small library and focuses on building user interfaces. React follows the Unix philosophy and creates the interface for users to come and interact with the machine. Whether it's the buttons on your TV or the dashboard of the Space Shuttle, everything is UI.If the device you interact with understands JavaScript, we can use React on that. Now we've got browsers that understand JavaScript, so we build web UIs in React.All you have to do is tell React what you want and it will create the UI on your behalf. Creating a UI with native web API and JavaScript is not that easy.Whatever declarative descriptions we write in the React language, React will translate it into the actual UI in the browser. React is declarative and it shares its declarative power with HTML itself.At its release, there was doubt about the performance and the reason for this was the virtual DOM. Virtual DOM can reconcile with actual DOM. But, the most important reason why it is popular today is the performance. Most powerful thing is that it creates a link between developers and browsers, allowing developers to describe the UIs declaratively. You no longer need to act on DOM elements, you only need to act on the state of the UI. React automatically updates the UI whenever there is an action on the state.<h3 id="tree-reconciliation-algorithm">Tree Reconciliation Algorithm</h3>All the operations you perform in the DOM happen in a single thread, and this thread is responsible for everything that happens in the browser. It involves a lot of things like typing, scrolling, resizing etc. It simply means that as soon as you perform any expensive operation, you will get a janky experience.You need to keep in mind that your application should always perform minimal operations and batch them wherever possible. React targets this concept.When we render a tree of elements in React, React first creates a virtual representation of it and keeps it in memory. Now it performs DOM operations so that the tree can be viewed in the browser.If you want to update this tree, React will create a new virtual representation of the updated tree. This means that there are two versions of the same tree in React. Now the thing to see is that React will not discard what React has rendered before.That is version 1. Instead, it will compare both the virtual versions that are in memory.While computing the difference between the two, it will look at which sub-tree is to be updated. React will update only those sub-trees in the browser. This is called the tree reconciliation algorithm and is very effective for working with the DOM tree of the browser.Let me tell you that a ?virtual" browser is more friendly than a real browser. The DOM API is very difficult to work with. This is how React communicates with the DOM in your place.The biggest advantage of React is for a developer who has very good JavaScript skills as it does not take much time to understand the React API. That is, if you call React "Just JavaScript" then it will not be wrong. Instead, if you approach a library that has a bigger API, it will take you a lot of time to master it. The best part is that the React API has functions and optionally classes. That is, the UI view that will be created will become a function of your data.You can build native mobile applications with React Native. React will pay you off for iOS and Android mobile apps in the long run. Web, iOS and Android applications can share your logic.<h3 id="community">Community</h3>The React team at Facebook keeps adding new features and improvements so that the library is always better than ever. This maintains trust in the community. Production testing at Facebook is so strict that you won't find any serious bugs in any of the React releases. I think you are aware of the names of web applications that use React and they are Airbnb, Netflix, Twitter, and many more.<h3 id="wrapping-up">Wrapping Up!</h3>React is competitive with Vue and Angular, yet it has become the preferred choice for developers. React is declarative, its community is awesome. With React Native, you can easily cover Android and iOS once you have a clear understanding of the basic architecture of React. React is SEO-friendly and fully embraces JavaScript. React will also save you a lot of time as it gives you component-based programming. Once your component is created, you can reuse it.

Get Inner Knowledge Why We Should Learn React

You can start JavaScript easily but you will have to struggle a lot to master it. It is old with obsolete features and flexible with mysterious syntaxes. So during development, you may stumble upon it many times. That's why I keep listing the features that can accelerate your development process.<h3 id="1-objectentries">1. Object.entries</h3>When you have to iterate over an object, you do it using Object.keys. With this method, you will get only an array of object keys.But if you use Object.entries you will get the keys as well as the values.const employee = {name: 'Kylie',age: 30};Object.keys(person); // ['name', 'age']Object.entries(data); // [['name', 'Kylie'], ['age', 30]]While iterating over the object you will also do something which is mentioned below:Object.keys(employee ).forEach((key) =&gt; {console.log(`${key} is ${employee [key]}`);});Object.entries(employee ).forEach(([key, value]) =&gt; {console.log(`${key} is ${value}`);}); // name is 'Kylie'// age is 30 Of the two, Object.entries are the easier and quicker approach.With the new Map() constructor, you can pass the entries of the object, something like this:const obj = { name: 'Kylie ', age: 42 };const map = new Map(Object.entries(obj));console.log(map); // Map(2) {"name" =&gt; "Kylie", "age" =&gt; 42}So you can easily convert objects to maps.<h3 id="2-string-replaceall-method">2. String replaceAll Method</h3>The replaceAll() method will match the pattern in the string, then replace it with the replacement provided by it.const str = 'The quick brown fox jumps over the lazy dog.';console.log(str.replaceAll('dog', 'monkey'));// expected output: "The quick brown fox jumps over the lazy monkey."The String.prototype.replaceAll() method replaces all occurrences of the string you want to replace.We also use RegEx but it would be easier to use replaceAll() method than you write like this: str.replace(/a/g, ?b?');<h3 id="3-instead-of">3. === instead of ==</h3>"==" is for automatic conversion when you need it whereas "===" does not support conversion."===" compares value and type, and is faster than "==".[20] === 20 // is false[20] == 20 // is true'20' == 20 // is true'20' === 20 // is false[] == 0 // is true[] === 0 // is false <h3 id="4-typeof">4. Typeof</h3>typeof returns the data type of the operand. The return data type is in the form of a string and represents the primitive type of a variable.<h3 id="5-constructor">5. Constructor</h3>JavaScript provides the Object() function by default.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/DDB6EziT3kPH8BnZQLpoyK2DVVVNlgrm6oKzm0xp6aLu-T7zkasubkA2GpoutbYFxBOEqMqf3--6Vlknzti4-JYkVm7291kxi4OqP6ADSOInZmcvonlhWyw5Hm34PyLg7UjQgZhN=s0" class="kg-image" alt loading="lazy"></figure>The point to be noted here is that here Object is a function and not an object. Yes, there is an anonymous object inside it. If you access its prototype property you will get a reference to it.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/qlk8kVDYaLLafd2wMG1NLR94pzX6F-5Fvl7njCVweuTX9GJnEyn2Fu0sl2SjzbEt1tMBdsRtuaA3-5ErQfCqke79M4IHi5x4UVXBAV61O6leFpafaipD98DRFGz5Kq3O8ofgJdd7=s0" class="kg-image" alt loading="lazy"></figure>The Object.prototype method has many more methods and properties such as toString() and valueOf().Let's reiterate one more point quickly if a function is the value of a property of an object, it is called a method. Simply put, a method is the property of an object.One of the important properties of Object.prototype for which I have explained to you so far is the constructor. The constructor refers to the "object" function.console.log(Object.prototype.constructor === Object); // true<h3 id="6-lexical-scope">6. Lexical Scope</h3>The scope in which the function scope accesses the variables from the parent scope is called lexical scope. The function is declared after the variable declaration. The child function is lexically bound to the parent function. Child functions can access variables from their parent scope to global scope but vice versa is not possible.// variable in the global scope:const userName = "Jonathan";// Call userName variable from getName function:function getName() {return userName;}Definition space is lexical scope, and not the invocation space. userName is defined in the global environment, so its lexical scope is the global scope.<h3 id="7-find-the-elapsed-time-between-two-function-calls">7. Find the elapsed time between two function calls</h3>The time name is passed as a parameter to the time method.console.time(?timer1?);var a = 15;var b = 30;for(let i = 0; i &lt; 1e6; ++i){[a, b] = [b, a]}The same parameter is also passed to the timeEnd method.console.timeEnd(?timer1?);Now you will know what a valuable tool this is because the timeEnd method will print out the time elapsed. You are getting the time between two function calls. Now you will be able to easily see the bottleneck and refactor the code. Many modern browsers support it. It's easier and better than getting the execution time manually.<h3 id="8-with-map-you-can-cast-the-values-in-an-array">8. With Map, you can cast the values in an array</h3>const numArray = [?5?, ?6?, ?7?, ?1.3412?, ?-4500.1137?, [1.4115]];const castedNumArray = numArray.map(Number);console.log(castedNumArray);//[[5, 6, 7, 1.3412, -4500.1137, 1.4115];You can call it the easiest and most elegant solution for casting an array of numeric values as strings. When you pass Number as a parameter to the map method, it calls the constructor for each array's value.<h3 id="9-remove-duplicates-using-one-liner-code">9. Remove duplicates using one-liner code</h3>If you want to remove duplicate values, this is an efficient way with only one-liner code.const numArray = [1,2,2,2,2,3,4,5,5,5,6,7];const fuitArray = [?apple?, ?banana?, ?apple?, ?banana?];Here a spread operator will be used which will expand the set and construct the array. An ellipsis of three dots(spread operator) expands any iterable whether it is an array or a string.const uniqueNumArray = [...new Set(numArray)];const uniqueFruitArray = [...new Set(fuitArray)];console.log(uniqueNumArray); // [1,2,3,4,5,6,7];console.log(uniqueFruitArray); //[?apple?, ?banana?];Read this <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">document </a>to go deeper.<h3 id="10-argument-properties">10. Argument properties</h3>You will be well versed with the arguments object inside the function. It is basically an array-like object. It means there is a list of arguments available inside the function which was passed while invoking the function. But there are some other interesting properties to mention here as well:arguments.callee refers to the function that is currently invoked.args.callee.caller refers to the function that invokes the current function.const init = function(){console.log(arguments.callee.name);console.log(arguments.callee.caller.name);} void function main(){init();}()//init//main Learning of the callee and the caller would be worthwhile as the concept is found in many compiled libraries.

10 Best JavaScript Super Cool Features

Higher-order components allow you to keep your React application well-structured and maintainable. We're going to focus on how pure function keeps your code maintainable and clean and how we can apply the same principles to React components.<h3 id="pure-functions">Pure Functions</h3>In a pure function, you will get all these properties that I am mentioning below.<blockquote>Whenever a pure function deals with data, it is declared as an argument.</blockquote><blockquote>When data is passed to a pure function, it does not mutate it.</blockquote><blockquote>If you give the same input to the pure function, it will always return the same output.</blockquote>Here is an example: function sum(x, y) {return x + y;}Now I will give you an example of an impure function:let y = 2;function fAdd(x) {return x + y;}See that this function is not pure as it is referencing data that is not passed to it directly. That is, you can take different outputs from the same input.let y = 2;fAdd(3) // 5y = 3;fAdd(3) // 6 One of the biggest benefits you can get from the pure function is that it makes testing or debugging any application easier. Occasionally it might happen that you also make impure functions that have side effects or you modify the behaviour of an existing function, which you were not getting direct access to.We need to look at higher-order functions now to modify the behaviour and get access.<h3 id="higher-order-functions">Higher-order Functions</h3>A function that returns a function when called is called a higher-order function. To a higher-order function, the function is often passed as an argument. But it doesn't matter whether the argument is passed or not, for any function to be higher order.We create a function sumAndLog in which we log the output to the console before returning it.function sumAndLog(x, y) {const output = sum(x, y);console.log(`Result: ${result}`);return output ;}If logging is important to us, we need to do the same for the subtraction function as well.This is where our higher-order function will come in handy and we don't have to duplicate the sumAndLog code. Higher-order functions give us an easier path. A higher-order function takes a function and returns a new function. It calls the given function, logs the output and finally returns it.function loggingAndReturn(func) {return function(...args) {const output = func(...args)console.log(Output, output);return output;}}Here, a higher-order function is accepting a function as an argument. And the same higher-order function is also returning a new function.const sumAndLog = loggingAndReturn(sum);addAndLog(4, 4) // 8 is returned, ?Output 8? is loggedconst subtractAndLog = loggingAndReturn(subtract);subtractAndLog(4, 3) // 1 is returned, ?Output 1? is logged;Now any function we pass, whether it is "add" or "subtract", the log will be added to both the functions.loggingAndReturn has become a higher-order function. The advantage of a higher order function is that if there is an existing function whose behavior is not to be changed, HOC will wrap it up and provide your solution.Now we come to React. We also use the same logic in React Components. That is, we can give additional behaviour to React components.It is also important to note that after hooks were introduced, the use of HOCs was slightly reduced. Because you can do behaviour sharing with hooks and for which no extra components are needed. Despite all this, the HOC proves to be a useful tool during development.Now let us discuss the React Router. I would suggest that you make sure to take a look at the React Router <a href="https://reactrouter.com/">documentation</a>.<h3 id="react-router%E2%80%99s-link-component">React Router?s Link Component</h3>React Router has a &lt;NavLink&gt; component that links pages together. Whenever the user is on a URL via &lt;NavLink&gt;, &lt;NavLink&gt; has a property named activeClassName that gives style to the URL.&lt;NavLink to="/contact" activeClassName="active-link"&gt;Contact&lt;/NavLink&gt;Now I'm going to create a component that will wrap this &lt;NavLink&gt; component.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/nndXauYl6Ltc2aHFkuKQWHl00gy542t8fKsQV0tWQpnyM6KM1722NRUao9GudlVTqI84w58fKSV2fY5MMLG4Pg2UoEIbODfRlTfc2LtkMkOuJAgD6Ab1QefuDkQqKZ9HEd7Q-3OX=s0" class="kg-image" alt loading="lazy"></figure>Now look, I can write the same line which seemed verbose before, like this:<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/OM8pgAIfu5lv_VfCMvz8k95LmNUb3plZyQygRGmFSoIHJEsR_b1zacPHQn1EKSx7MJhUvFTmAH1YWqeme2rGja-SWfk02fEaA-6INGEz_mK5JQSIiWx8ifm2UMv9d604HR8hJmQO=s0" class="kg-image" alt loading="lazy"></figure>This is how a component is made a higher-order component in React, That is, by manipulating an existing component and not changing it, a new wrapper component is created, which is called a higher-order component.Apart from this, &lt;NavLink&gt; has many other properties. And they will also be needed while working, due to which we have to make the component more extensible.The syntax JSX used in React supports the spread operator. With the spread operator, you can pass the object to the component as properties.const props = { c: 6, d: 7};&lt;Foo a={props.c} b={props.d} /&gt; &lt;Foo {...props} /&gt;Here {...props} is the individual property of Foo and this property is the object within which the key is spread.By taking advantage of this trick, we can access any property of &lt;NavLink&gt;.And an even bigger advantage is that our wrapper component will already be supported if a new &lt;NavLink&gt; property comes along in the future.Sometimes we want similar behaviour across multiple components. I already talked about inserting the same behaviour above when I log the output to the console.Think of it this way that an application has an object that holds the current user's information and the user has got authentication on the system. Now you want some other React components to have access to this information as well. Here I would like to reiterate that not all components, just some, we need to be strict about who will access the information.For this, we will create a function to which a React component will be passed.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/pJma-Jf7AmFeiuto-J7X9gnmn4fBOgIJGuJQOLZ0sDQuoOd6t-oqIX_KAsD47qTTdKwZJtXQlcm1Qv0zp1VzVIXdKxcNWLUWr9Auy_qO5Zo9ihYPNknQ3SDCw9s91Xyj2OabbGqy=s0" class="kg-image" alt loading="lazy"></figure>This function is returning you a new React component. This new component will be rendered with a new property that will have access to user information. Look at the above example carefully. In this, the component is getting an additional property named importantUserInfo.The &lt;AppMyHeader&gt; component will need this information in order to show the logged-in user.const AppMyHeader= function(props) {if (props.user) {return &lt;p&gt;You are logged in as {props.user.name}&lt;/p&gt;;} else {return &lt;p&gt;Login&lt;/p&gt;;}}You can access the user object by rendering &lt;connectedMyAppHeader&gt;.&lt;connectedAppHeader&gt; has got additional data that not every component will have.const ConnectedMyAppHeader = wrapWithUser(AppMyHeader);You can access the user object by rendering &lt;connectedMyAppHeader&gt;.&lt;connectedAppHeader&gt; has got additional data that not every component will have.This pattern is very common in React libraries and especially when it comes to Redux, there is much more to it.<h3 id="conclusion">Conclusion</h3>It feels good to conclude this article now because with this technique we can create a great codebase that will be very easy to maintain and creates peace for us on a daily basis.You can define the data of higher-order components in one place. The refactoring is so good that your data remains private and only data is exposed that the components really need.As the application grows, it will be beneficial for you to understand which components are using what kind of data.

HOC is Still Useful And Applicable in React

Promisification word may sound complicated but it belongs to a simple transformation. This procedure basically converts a function that accepts a callback, into a function that returns a promise. This type of transformation is needed more often because you will find many functions and libraries callback-based.Indeed, Promisify benefits the development as the use of promise is convenient.Promise is an object and an alternative for a callback. With promise, you can handle asynchronous operations. Deeply nested structures formed by callbacks produce more maintainable code when converted to promises.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/93X9LrOimBq_wpFssr4tVgK3HaXWCOtUnbNu5U6HC-Ysfyu1nER8XoQJgmyOMO2S5MBMLXh7TRhyH8O_QLyClTqecaGmlD408kOMFLyJannS1En67MVeEDpqCFt1FfTJz2B1IYdE=s0" class="kg-image" alt loading="lazy"></figure><blockquote>The Promise constructor converts callbacks into promises.</blockquote>The Promise constructor is required to convert a callback to a promise. The callback of the Promise constructor takes two arguments: resolve and reject.Resolve callback should be invoked when the async operation has been completed. On the other hand, if there is an error then the reject callback is invoked. You will get the Promise instance from the constructor. 'then' is the method that notifies when the promise is completed. Promises actually do asynchronous callbacks and you can chain multiple async operations with it.Promises have a tendency to handle errors more elegantly.Before knowing how to convert callbacks to promises, you should also note what I have mentioned below.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/EyA1fM_NDLMD6m2doN7EdhTv5MXRNaXWPHxGLzlDDC3e3n6D38uBCBVdUqc8GJXq3o4WK5WjjFh4cIEPIxCOovPr_RBaUDe986HedPKBHvjigpDUqLMirNWoaQ5XY9yLlerfRpw_=s0" class="kg-image" alt loading="lazy"></figure>See the snippet below, which shows that once a promise is resolved, it can no longer be rejected, i.e. out of resolve and reject, one method will be valid and only one method will be called.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/jNCRybKJydsiY2d0dSNi2gg48pE0W4FmYt59y6tBmVv19EhUHAHQLmX9-lzdVE7nvnl6EJgsSrsTmPtPyFC3u78Z8UUQlhCb6GbtVj9Ifg67S_yYt952d48wmuAGtKgio1J-SsVO=s0" class="kg-image" alt loading="lazy"></figure><blockquote>Let us now look at the different stages of promise</blockquote>Pending: When the async operation is running, i.e. still in progress.Fulfilled: Here the operation is successful and after that "then" callback will be invoked.Rejected: The operation has failed. If it fails, it will invoke ".catch(onError)" and ".then(..., onError)".Settled: Resolve and Reject callbacks no longer work here. Only .finally method is invoked here.The Promise API gives you three main methods. They are: then, catch and finally.When the asynchronous operation completes, the "then" method is invoked to notify you of the completion. The "then" method lets you know both success and failure. That is, it has two arguments: one for successful execution and another for error.promise.then(onSuccess, onError);Apart from this catch can also be used, something like:promise.then(onSuccess).catch(onError);Multiple promises can also be chained with "then" because it returns a new promise.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/d7lVCXbDIHW_TIJW0xHdEiwJ4hrxdnkYHYX754Xs8VuBLi2_O97Tftk9TTN7EgADAB1ryuVpECEFC5y_FeRAYfGoyfmwnksM0xwlofaqXLDIBmVgIf6LROCYxoWvfsq4uUGCkY-J=s0" class="kg-image" alt loading="lazy"></figure>Promise.resolve resolves the promise and will stop executing if the error breaks the sequence.Finally methodIf the promise is settled then finally method will be called.You can use "then" as well as "finally" if you need to execute a piece of code after a failure.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/Rpv2wynmxkg-KPspJylbj_dae19gPxPm91SH7Bmiu0RCpw-HWoNtAeJhVeTTFeZaTDgr0u2ekvWCocN9cNMU0rSkINY38uAwl60YYkP28YzRzofmb80tSRyKvZOk9DKRYYH8bFTr=s0" class="kg-image" alt loading="lazy"></figure><blockquote>Promisification</blockquote>loadMyScript is given the src to load the script. If an error occurs then callback(error) is called otherwise if no error occurs then callback(null, script) is called. <figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/20UWlfsCyV54MvDUcYSUGHEubW3DHyBfURbSKNY7yG-wq_W4VjrPLf5nBabJb3MOlIl-26tTeWPZ8auJ_Y3mt19mrmGtOKH126BF2FRCHfSGalkt5qTc7PLqvsnbDUk5-YaGIkuK=s0" class="kg-image" alt loading="lazy"></figure>Now it's time to promisify.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/gQZwWAfWIZkXEJbYk07xlk7EX7OEEZfIK3UEbuXxfPYSDGMlYjSY5-onDe8L2xBLtyLO1yIwQHi8GtzAD3Kv9djw2EXlikCCImVeNrXfCWJydEKO6age54Ho3BNCjp-YqewTGf4o=s0" class="kg-image" alt loading="lazy"></figure>For this, I created a function here. It will load the script as well. But here the promise will be returned, and not the callbacks.This new function is a wrapper of the original loadMyScript function.The loadMyScript function that receives the callback from this wrapper function translates to promise resolve/reject.Our new function loadMyScriptPromise is a perfect fit for promise-based code.It is not a matter of liking the promises more than callbacks, but rather some specific reasons which you will come to know while practising. Let me also discuss the points here:<ol><li>If you implement the callbacks and do something sequentially, then you have to specify an err argument in each callback. This is redundant. In a promise or async-await, you add a catch method or block. Now if there is an error in the chain of promise, it is caught.</li><li>Callbacks can cause memory leaks. Because you don't have control over it. When it would be called and under what context. And how many times. You don't know!</li><li>We don't face such problems with promises, especially if we talk about error handling.</li><li>Your code is also more readable and maintainable.</li></ol>Note: Promise is definitely a good approach when it comes to async/await. Even so, it cannot completely replace callback. Promise has only one result whereas callback can be called multiple times. That's why promisification is used only for those functions which call the callback once.One way is that you have to wrap a function around the original function which will return the promise. And another way is when we want to promisify more than one function. For this, we will use the helper which is a sensible way.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/iQikhBAebuJdbmjrT66OBVz8zSdDxiQBC7BZnCZYI5bIrxIqTXQ3WLdZtz5Ac-x3XHUrzkpjMX7RH9LeFM9_ccqi8ZJacbgbGYukszKvTS-YhiCsdGOeGcdrxVWjws9glTY_eiK-=s0" class="kg-image" alt loading="lazy"></figure>The code is complex to look at, otherwise, it is the same code that is written above when we are promisifying the loadMyScript function. promisify(f) is our helper function that accepts the function we have to promisify.You can see that it is returning a wrapper around f (*). The wrapper is also returning a promise and then the call goes to original f. Here the original f expects a callback with only two arguments. You can further modify the code to accept more arguments.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/uv9pL4xMaZff2oF8prTtQDPHz4d8n_35S18RkdNCfzXs1a4ea8ZxGyl0UvSlmk-ryQZREZkhZApQFLpnYWzpgAAGLEinZ-Ct-IjVRuJcevfFuKA8fRB-iu47V1iJ818vhxS-97wG=s0" class="kg-image" alt loading="lazy"></figure>Finally, I will discuss the Promisify function in Node.js and wrap up this articleBeing a Node.js developer means you already know about Promise. And especially how it works internally. You will find more modules to promisify functions such as es6-promisify. Node.js has built-in util.promisify function. The built-in util package in Node.js provides you with utility functions. In these utility functions, you get the promisify() function which enables you to use promise chaining and async/await.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://lh6.googleusercontent.com/PXlgLTczAMCChXsCtpQQLld0DM1AOsp6A0C-k1LsUC_k35dseEsurZl6NqYtSR0VbnJelzUdb0-monUhTpYK4EfTT3W9uIhRY8VRbIdl5KDDzM9NzkQ-zD6SNLnNjAH9mp3Dzgwf=s0" class="kg-image" alt loading="lazy"><figcaption>fs.readFile function to be promise-based</figcaption></figure>

Promise, Promisification, Promisify Function

<figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/c0954470f388e79eed2aecd79b6e8a84.jpg" class="kg-image" alt loading="lazy"></figure><a href="https://www.javascript.com/">JavaScript</a> is omnipresent. Over the last two decades, it has grown to become one of the most popular coding languages that dominate <a href="https://intersog.com/web-development/">web development</a>.In the beginning, it was bound to frontend development, but in later years it was also used in the backend or server-side development.If you?re reading this article through social media platforms like Facebook or LinkedIn, it?s because of JavaScript, as everything falls under the umbrella of one technology.The coding language owes its popularity to its flexibility, consistent implementation across web browsers, and its ability to deliver interactivity to webpages within the browser.While there?s relentless competition from the likes of Java and Python, <a href="https://intersog.com/blog/code/which-language-has-best-chance-of-survival-python-java-or-javascript/">JavaScript continues to dominate web development</a>. All these frameworks and libraries complement <a href="https://techfastly.com/domain-driven-design-and-agile/">Agile development methodologies</a>.You can build <a href="https://intersog.com/blog/cool-stuff-you-can-build-with-javascript/">a bunch of cools things</a> with JavaScript:<ul><li>Apps for drones and robots</li><li><a href="https://techfastly.com/different-online-gaming-platforms/"><a href="https://techfastly.com/different-online-gaming-platforms/">Browser-based online gam</a>es</a></li><li>Digital art</li><li>Mobile apps</li><li>Presentations as websites</li><li>Web apps</li><li>Web servers</li></ul>As you can see from the above, this programming language wasn?t created just for web development.<h2 id="a-brief-history-of-javascript">A Brief History of JavaScript</h2>JavaScript came into existence because of the infamous browser wars of the mid-1990s. In this scenario, <a href="https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/#alittlebitofhistory">Netscape required a lightweight scripting language</a> for more accessible programming. So they turned to their employee, <a href="https://www.linkedin.com/in/brendaneich/">Brendan Eich</a>, to develop it within ten days.The result was called Mocha and later became famous as JavaScript. Eventually, AOL (America Online) bought Netscape and, over time, turned the browser code over to the <a href="https://www.mozilla.org/en-US/">Mozilla Foundation</a>. As they say, the rest is history, as JavaScript is now a critical component of web technology and supported by the most popular web browsers.Today, if you want to become a web developer, you should at least be familiar with this programming language. With so many JavaScript frameworks and libraries available at your fingertips, it?s hard to ignore its ability to deliver groundbreaking web experiences across browsers, devices, and platforms.Building your web application completely with JavaScript enables seamless collaboration and a better understanding of the source code. In this scenario, even if the frontend and backend team work separately, they can come together like a well-oiled machine.Over the years, the programming language has evolved considerably. Today, we can choose from multiple libraries, platforms, tools, and frameworks. Some of the famous ones are as follow:<h2 id="angularjs">AngularJS</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/abe5c6b275a65b65b5fbd88ff0561045.png" class="kg-image" alt loading="lazy"></figure><a href="https://angularjs.org/">AngularJS</a> is an open-source framework that?s leveraged to build dynamic web apps. The structure is based on client-side technology and combines the functions of CSS (Cascading Style Sheets), HTML (Hypertext Markup Language), and JavaScript.In this scenario, web developers can build their templates based on HTML and even extend HTML syntaxes. AngularJS also allows developers to breakdown the web app into multiple components, making it easier to code and manage.It?s the perfect framework to bind different software components and build User Interfaces (UIs). If you?re developing a native app, for example, AngularJS allows you to use <a href="https://nativescript.org/">NativeScript</a> within the template with local variables and loops.<h2 id="aurelia">Aurelia</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/dfe47f1d9bdcf60e881140435379e807.svg" class="kg-image" alt loading="lazy"></figure><a href="https://aurelia.io/">Aurelia</a> is essentially a collection of open-source JavaScript modules, and JavaScript development projects often use it as a standalone solution. Aurelia follows an <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript standard</a>, so you can quickly build web and mobile apps.Aurelia is both advanced and highly user-friendly. As a ?next-generation UI framework,? you can start building without specifying controllers of view models.As it?s highly modular, you can develop apps without forcing the use of specific predefined rules or paradigms. This means that you can easily swap components in and out during the development cycle.<h2 id="emberjs">EmberJS</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/ea3771a53d20e22251c18c2a6c768fa0.png" class="kg-image" alt loading="lazy"></figure><a href="https://emberjs.com/">EmberJS</a> is a popular open-source framework among developers who build large scale mobile and web apps. An excellent example of EmberJS is the <a href="https://www.apple.com/apple-music/">Apple Music</a> mobile app that?s completely Ember-based.EmberJS is ideal for Single-Page Applications, large web apps, and building a complete development stack. This perfectness is because its handlebars layout and backend architecture are designed to allow developers to write advanced HTML tags.It also makes it easy for them to understand complex functionalities through user-friendly Application Programming Interfaces (APIs) that come with the framework. EmberJS is also better suited for client-side development than both <a href="https://mithril.js.org/">Mithril</a> and <a href="https://www.polymer-project.org/">Polymer</a>.<h2 id="nodejs">NodeJS</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/e070da2f9393da8445f06df1f6077819.png" class="kg-image" alt loading="lazy"></figure><a href="https://nodejs.org/en/">NodeJS</a> is a server-side framework and a JavaScript Engine of the Google Chrome browser. Networking and server-side applications in runtime environments are built using this open-source framework.NodeJS is also leveraged to build backend services and APIs. Operating systems like Linux, macOS, and Microsoft Windows also use these apps.Because it works with a single-threaded event loop, NodeJS can handle multiple asynchronous requests seamlessly. It?s the perfect solution to develop real-time collaborative web applications.<h2 id="reactjs">ReactJS</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/b5837c0f412c54c3848e5fad402a375e.png" class="kg-image" alt loading="lazy"></figure><a href="https://reactjs.org">ReactJS</a> is a JavaScript framework and library that?s popular among developers who build UIs for Single-Page Applications. When you build mobile and web apps with ReactJS, it?s easy to handle all the view layers of the app.It also makes it easy to develop reusable UI components. It?s the go-to solution for robust, high-performing enterprise applications.The UIs of both Facebook and Instagram, for example, are excellent examples of ReactJS at work. ReactJS was developed by Facebook to make web development simple, scalable, and fast.ReactJS is also used with other JavaScript libraries and popular open-source PHP frameworks like <a href="https://laravel.com/">Laravel</a>. With the help of JSX extensions, syntaxes are short and straightforward.<h2 id="svelte">Svelte</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/b8cc5f9dd9ecf619ca2944da5d4b6012.png" class="kg-image" alt loading="lazy"></figure><a href="https://svelte.dev/">Svelte</a> is a frontend component-based development framework that?s similar to both ReactJS and VueJS. The primary difference is that Svelte does all the work in compiled steps during the development cycle.ReactJS and VueJS, on the other hand, conduct the bulk of the work within the browser. While this incarnation of a JavaScript framework is still relatively new, it?s already the go-to framework of GoDaddy and the New York Times.<h2 id="vuejs">VueJS</h2><figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/d71bc9830da8eb87b2ec52d68d72a1f4.png" class="kg-image" alt loading="lazy"></figure><a href="https://vuejs.org/">VueJS</a> is a lightweight progressive JavaScript library and framework that?s perfect for highly responsive and interactive websites and apps. It aims to make UI development highly organized. It operates on a <a href="https://codepen.io/sdras/pen/RwwQapa?__cf_chl_jschl_tk__=ef6766a2bf9c6ebacb56f41964b41d0ec764e92e-1591331585-0-AR-TqhZeAURT664Iw3ctgekpnUnqaw4KzZ0rU9tYjPfjDDlLoXjQV1Eb5u4kCO7GMBwg2SJryXf1B-m1SBYEnERA_uyXZ9oPTZsZ6q3E9MVagPmBxnQpOOdQMS2t-xb0fZWLI4YTuHw91F4On9O484dxpdjvKSLIW-OvlXDOT-zROlvLQEIUgI8Y-LA0xm8x81Cux54VaABoDmJCzqDP0T-J1RHZ2_VKi0Tv3GCi0EwTheY7a4I3KXQWbp4_u4s9tb7E8HSsu0KvZF1kCZuq825yo9HiowH4ORDZmFw9vepCM3SUATHmc39NSvTB0DcY3GBf4wGiE5figX-fyO7M1Nu7Orgd2sGql_cE8IMdiHzG">Virtual DOM</a> and leverages standard technologies to build web apps.VueJS uses plain HTML-based templates and single-file components. It also allows developers to code in CSS within the framework. When you build advanced single-page web apps with VueJS, dependencies of components during rendering are tracked automatically by it.In this scenario, whenever a component needs re-rendering, VueJS informs the system about the pending state changes.So if you?re thinking about building a new website, it?s essential to think of JavaScript. Gone are the days of static websites that aren?t responsive or interactive. Static websites are also not optimized across mobile devices, so it?s far from ideal.When you build with the help of JavaScript frameworks, your online presence can take the form of a website or a web app, and cater to the changing needs of the audience, both effectively and seamlessly.

Andrew Zola

What Makes JavaScript a Perfect Match for Your Web Development Project?

Premium reporting on technology, startups, VC funding, and software from Techfastly tagged with Javascripting. Read all about Javascripting here.

Top Writers

Subscribe to Magazine