JavaScript is single threaded, it means there would be only one task running at any point of time. But this would slow down the overall program execution if there is long running task, hence asynchronous task execution is desired in complex cases. To achieve asynchronous task execution, there are a few options introduced in JavaScript.setTimeout/setIntervalEventPromiseAsync/AwaitsetTimeout/setInterval is one of the first mechanisms introduced in JavaScript to simulate asynchronous operations. Since these operations are not executing in sequence, there would be a potential issue on how data/sta...

When debugging JavaScript application, one may frequently use console.log to print data so that it is easy to debug when issue occurs and also helps on understand the data flow. The common way of printing a variable would be something like. let user = { name: "test"};console.log(user);In this case it will print:{ name: 'test' }This is OK when there is no much logging or the program is not complicated. But it becomes difficult to debug if there are lots of variables to be printed as there is no clear indication on which variable or object it is.So in this case one may add some extra log...

As a front end developer, there is frequent need to debug JS code and sometimes need to find out what event handler has been bound to a HTML element. In this post, we will show how to find out the click event handler bound to a HTML element, this same applies to other events as well.Nowadays, a web application is usually very complicated and there are lots of JS codes which makes it difficult to find out what click event handler has been bound to a HTML element, especially when the JS source code has been obfuscated or compressed.By using Chrome, it becomes relative easy to find out this kind ...

Sometimes there is a need for website owners to monitor user behavior on the site so that they can know what pages are mostly visited and which parts are more popular so that they can provide better service to their users. These behavior usually contain user clicks, user mouse over events etc. These data can be sent back to server when triggered with some meta data.In this post, we will cover a few ways to monitor user behavior on a web portal and send data back to backend sever.1. Synchronous AJAXA common way to send data back to backend server is using AJAX to send the data in the page unloa...

With the evolvement of JavaScript, lots of new features have been added this old but robust language.  Among them are lots of functional programming language related functions like map, filter, each etc. In this post, we will cover one function map and its interesting behavior.Before dive into the details, let first take an example, do you know the output of below function call?['1', '7', '11'].map(parseInt)You may think that it's easy and the output would be[1, 7, 11]Can you try to run this by yourself and you may be surprised of the output. The actual result is[1, NaN, 3]What's happenin...

This post will cover the JavaScript questions I have encountered and have seen during my programming career. They will mainly focus on vanilla JavaScript though there are lots of excellent frameworks out there and many people are using them in their daily work.this keywordthis keyword is an very important but easy to confuse concept in JavaScript since it is always referring to the calling object of the function.1. What will be the output of below code snippet?function User(name) { this.name = name; this.display = function(){ console.log(this.name); }}var user = new User("javas...

In JavaScript, there are two types of values: primitive and object. Primitives consist undefined, null, boolean, number and string. Other values such as array and function are objects. When applying + operation on different type of values, there would be three kinds of type conversion.Primitive conversionNumber conversionString conversionThere three type conversions have corresponding abstract operations in JavaScript: ToPrimitive(), ToNumber(), ToString().For number addition, it's normal math addition(ToNumber). For strings, they are just string concatenations(ToString). For ob...

To ensure security and reduce spamming, modern browsers have implemented very strict rules on when a new window can be opened in a web page. Currently browsers restrict that any new web page to be opened in a new window must be initiated with an user action. The action is usually an user click event. Otherwise, a popup blocker would show on the browser address bar which indicates that something is blocked.To workaround this issue, normally you should implement the window open logic in a click event handler. An example code block would look like:jQuery("#some_element").click(function(){ var win...