Spin-up a quick web server in Javascript

Use these two quick ways to get a webserver up and running from any folder. 1. Use http-server Install http-server. npm install http-server -g Navigate to any folder where you need a quick web server and start server. cd client/dist http-server You can even proxy requests to a back-end server where required. http-server -P localhost:3333 The above command will start a server at port 8080, and any requests to back-end (e.g /api) is proxied to localhost:3333 if the same is not resolved. ...

Date Object in Javascript

Let’s see a few points about when to use a date object, and why use this object vs. a date library? The simplest and quickest way to get date in Javascript - console.log(Date.now()); // 1549025852124 Date.now() does not create an object, and is really fast. But, it is also useless if you want to do anything with the date. Use date objects in numerous ways to format dates, set dates, consider time zones, and for date manipulations. ...

Arguments Object in Javascript

Arguments object enables you to treat function arguments with respect.. and the developers with compassion. How do you pass arguments to a function? In its most primitive form: function getSum(a, b) { return a + b; } This is perfectly ok in an ideal world where Buddha walks the earth. In the real world populated by Agent Smith and his compadres, one has to be more defensive with function arguments. One of the ways of doing that is by using arguments. ...

Non-enumerable Properties in Javascript

When you define a prototype for an object you run the risk of counting that as an object property. Use non-enumerable to avoid doing that. Consider this - Object.prototype.colors = () => { return; }; let fruits = ["apple", "orange"]; console.log("fruits length: ", fruits.length); for (fruit in fruits) console.log(fruit); // 0 1 colors Even though the array has two elements, it ends up showing the index 0, 1 and ‘colors’ which is the defined prototype. This can be avoided in two ways - ...

Create your Own Javascript Playground

I write quite a bit of Javascript on a day to day basis. But, I have a poor memory and keep forgetting things. Things like how I should be using a certain function the right way. This is where web applications like https://jscomplete.com/playground help. But it is not a pleasant experience to have blocks of incomplete code lying around in jscomplete, and keep executing few other parts of the program. I use the following tools to quickly know how to write a piece of functionality, or quickly test parts of code/components. ...

Context of This in Javascript

I have often seen how people talk and write about this being all complex and such. But frankly, I don’t understand the pain. All it takes for me to understand is 4-5 iterations of using this in a different functions, classes, modules and so forth, messing up a bit - each time, and trying to do that over & over until I get the right context with the right this. ...

5 Ways to Catch Common Javascript Bugs

Javascript is a God-send if you are trying to get things done - quickly. It can run back-end servers, is invaluable for the front-end, and you will never thank enough when you on the way to complete a project that could have taken 10x the time/effort back in the day. All that comes at a cost. Types seem to be the most blamed for errors, but they could range from anything from bracket mismatches to just ’typing’ issues. ...

Change Function Scope in Javascript

Javascript has lexical scope - the variable values are available and valid based on their position. The same is applicable to functions. At the same time declarations are brought to the top of their block at compile time. In other words, they are hoisted at the time of compilation, and hence variables and functions are available to statements accessing them before the actual declaration. Consider the following function - getSum(2, 3); function getSum(x, y) { var sum = x + y; console.log("sum function: ", sum); // 5 return sum; } Even though the function is declared after the actual call, the above piece of code works without issues. ...

Const and Immutability in Javascript

const is excellent. It allows us to keep our variables in controlled scope, and reduces errors caused by the case of mistaken reassignments. But it can also lead to a false sense of security. Not everything is truly immutable when defined by const. Consider this simple example - const x = 1; x = 2; // TypeError: Assignment to constant variable. This is applicable for other types of variables, or to simpler objects created on top of these primitives. ...

Check if two arrays are equal in Javascript

You can’t just equate arrays - you are smarter than that. Consider the simple example where we want to compare arrays and test their equality. const fruits = ["apple", "orange"]; const oldFruits = ["apple", "orange"]; console.log(fruits == oldFruits); // false It may be obvious in hindsight - but array comparison in the above code will not compare values and give you the expected answer. Instead you would have to go old school and compare everything within an array. const fruits = ["apple", "orange"]; const oldFruits = ["apple", "orange"]; const newFruits = ["pear", "raspberry"]; const moreFruits = ["pear", "raspberry", "grapes"]; console.log(arrEq(fruits, oldFruits)); // true console.log(arrEq(fruits, newFruits)); // false console.log(arrEq(fruits, moreFruits)); // false function arrEq(arr1, arr2) { let arrLength; if ((arrLength = arr1.length) != arr2.length) return false; for (let i = 0; i < arrLength; i++) if (arr1[i] !== arr2[i]) return false; return true; } And, for Pete’s sake (if you have a friend called ‘Pete’) - don’t use the above code. Who names variables arr1 and arr2 - that is so lame.