Generator Functions in JavaScript : asynchronous behaviour of Javascript Part -3

For part 1 and part 2 of this series, see the following links https://truetocode.com/understanding-callbacks-and-callback-hell-in-javascript-asynchronous-behavior-of-javascript-part-1/697/ https://truetocode.com/understanding-promises-in-javascript-asynchronous-behavior-of-javascript-part-2/730/   JavaScript version ES6/ES2017, a new kind of function called generator functions was introduced. These special functions help you to manage asynchronous operations with more ease. Generator functions can be paused and then continued. Generator functions are declared with an asterisk (*) and have a yield keyword which yields data. See the following example to see the proper syntax for using Generator functions.

  There is a next method in the generator function prototype. To get the value of the first yield we use the next() method.

    Here you can see that the response object has a key-value which gives the value of the yield and a done key which represents the status. Here in our example,  value will be 1 and done will be false. We have two yields in the generator function .next() gives false two times and a third time gives done as true. If you add a return to the generator function next() will have key done as true.

        Now, if a return is done before a yield

Here you can see that the second yield…

Understanding Callbacks and Callback hell in JavaScript : asynchronous behaviour of Javascript Part -1

In most programming languages, functions can accept other function(s) as arguments or return a function. Such functions are called Higher-order functions. In JavaScript, most APIs and Modules can accept a function as an argument to a function. The functions are called callbacks. Structure of callbacks

Note that JavaScript functions behave as objects. We can set a function as an object property or store a function into a variable. JavaScript is a non-blocking programming language. It doesn’t wait or block operation to finish but keeps on executing. For example, consider the case when data is fetched asynchronously, then javascript doesn’t wait for the asynchronous call to get data but keeps executing the next line of code. So in order to do something with the data, we can use callbacks. See the below example in which we use a timeout to wait for the data just like an XHR request which may take some time to complete

Asynchronous callback with  Jquery and a callback function

  CALLBACK HELL Consider the above example in which we use a callback function which is passed as an argument to the $.get function in Jquery. Now what happens when we want to send subsequent requests is that…

Understanding variable scope(let,var,const),hoisting in Javascript and Temporal Dead Zone(TDZ)
interview questions , Javascript / June 11, 2018

Hoisting in Javascript  To hoist means to pull or move up. Javascript hoisting means variable and function declarations are pulled to the top of the scope while compilation. What actually happens is that declarations are stored in memory. In the following example, we will see how hoisting works.

Here the function test can be used called before it is declared in the code because during the compilation the declaration is hoisted or moved to the top of the scope(current script or current function). Javascript only hoists declarations, not initializations. All declarations (var, let, const, function, class) are hoisted Variable scope in JavaScript Var  The scope of var is the current execution context. That is, the scope of var is global if used outside a function and the scope is the function block while being used inside the function. assigning value to a variable without declaration creates and adds variable to the global scope. This is discouraged and throws an error in strict mode

As you can see the scope of a is the function. Let – block scope The scope of let is the block in which they are defined .let defines block-scoped variables. Let has a scope from the block…

“use strict” – Understanding Strict Mode in JavaScript
interview questions , Javascript / June 10, 2018

While using certain JavaScript libraries,you might have seen some thing like

  inside the code.Many of us doesn’t exactly know what this exactly mean.In this article we take a look at the JavaScript  strict mode(ECMAScript 5) which might become handy while  appearing in JavaScript Developer Interviews. Strict mode literal expression, ignored by earlier versions of JavaScript,  lets us create secure JavaScript code.It  enforces better programming practices and removes some of the language’s insecure and ill-advised features.Strict mode throws exception to some of the basic coding bloopers and throws error to some insecure actions that are usually ignored in normal mode. Use strict can be used on top of the file or can be used inside a function in the following way 1  In a file

2 Specifically inside a function

Things that are prevented in strict  1  It prevents use of variables with out declaration.

2 Deleting function or variable is not allowed in strict mode  

3 Prevent global  access

4 Duplicating object properties not allowed

5 Cannot duplicate parameters of a function

 

6 eval is not allowed to create variable

7  Writing…

Starting off Node.js web developement in ubuntu/Linux Mint 18 – (ExpressJS,Mysql)

Node.js is an open source server environment which lets us write server side code in javascript. Node.js is asynchronous,single threaded and non-blocking .Node.js has very high memory efficiency which makes it very popular in server side  developement for web/mobile app.In this article we take a look at how to start of web developement in Node.js with Mysql as database. To install Node.js in your linux run the following command in the terminal

After installation run the following command to verify the installation and check the version of Node.js you are having.

  npm(node package manager) is a Node.js package manager that is bundled along with Node.js. npm help us manage Node.js packages efficiently. To initialize our project run the following command in the folder  you want to create the project.

You need to provide a few details like name of your project,version etc which can be skipped.The command will create a package.json file in which you can add the packages you want to  your project. The package.json file will look like this.

Express is a web developement framework for node js.To install Express run the following command in terminal

–save option add the dependency to…

Understanding concepts of immutables and mutables in javascript

  Javascript strings are immutable.But javascript objects and arrays are mutable.A mutable object is an object whose content can be modified after it is created. An immutable object is an object whose content cannot be modified after it is created. Consider an the following example

Now,from the above we realize that arrays and objects in javascript are mutable,ie they can be mutated. Functions like slice returns a new reference and does not modify the original array. Example

filter(),map(),reduce()  are the other functions that does not modify original array. Javascript es2016 brings a new operator called spread operator.Spread operator helps copy a array to a new array with new reference.

Usig spread operator(…a) along operations like slice,filter ….. helps operate with javascript arrays in an immutable way. Spread operator on object

Why Immutability? We look at  immutability from an angular point of view to get a better understanding of the needs if immutability and the reason why it increases performance.Consider we have a parent component and child component.From the parent component an object is shared to the child component.Lets say the following is the object is the one that is shared

Consider a click event function…

Spread syntax(…) in JavaScript(ES6) – Explained

Spread syntax helps to expand iterables (Arrays, Objects, Strings) in places where zero or more entities are expected. Consider an example with array.

Here 3 arguments are expected and we store them into an array

Now we use spread syntax to provide arguments in the array

The expected result is 6     Now while working with spread syntax on objects Merge two objects with spread syntax.

For cloning the object

    Now working with spread syntax on strings Strings are also iterable and using spread operators will make them spread into individual characters.

JavaScript objects and arrays are mutable. If you assign a JavaScript array into another variable and push a value into it, both the first one and second one will change. Actually, this is happening because both the variables have the same reference. See the example below

In the above example, a new number,5 is pushed into the array. Here you can see both the variables have changed because both have the same reference. The spread operator creates a new copy of the array with different reference. Using the spread(…) operator we can achieve what we need without this…

Javascript snippet for extracting image (url) from string – regex
Javascript / June 2, 2018

Consider the following string

The above code extracts all the images in the string  as an array and we take  one from it;  

Share this page in social media platforms