Posts | Techformist

Practical guides, tutorials, and insights from years of building web and desktop applications. Check out code examples you can actually use!

Null and Undefined - Heroes who are equal to none in Javascript

You have used null. You have used undefined. But, have you ever thought about what they mean to the world and to Javascript? The fact is quite simple - we can’t do a null equality check. console.log(1 == null); // false console.log(0 == null); // false console.log(false == null); // false console.log("" == null); // false The same holds for undefined. console.log(1 == undefined); // false console.log(false == undefined); // false But, they measure up to themselves and to each other. console.log(null == null); // true console.log(null == undefined); // true console.log(null === null); // true console.log(null === undefined); // false Practical usage of null and undefined, therefore, follow this pattern - ...

Curry Using Bind in Javascript

You can use bind to bind variables of a function, and execute the said function later to get the desired result. You have seen how how closures can be used in Javascript and a bit about currying functions. Here’s one more way of doing that. We can bind available variables for a function and execute function at a later time. Consider the below closure - function getProduct(x) { return function(y) { return y * x; }; } const twice = getProduct(2); console.log(twice(3)); // 6 We may not want to create another variable doing the same thing for us - do we? Instead we bind one of the values, and do the final execution when the next variable is available. ...

Scope Chaining using Closures in Javascript

You can easily chain methods along with variables to find a highly readable, and totally sensible scope chain. We have seen how closures can be used in Javascript before. Let us see some more practical usage scenarios. Consider the below closure - function getProduct(x) { return function(y) { return y * x; }; } const twice = getProduct(2); console.log(twice(3)); // 6 What do you think will happen if we put more inner functions? function getProduct(x) { return function(y) { return function(z) { return function(a) { return function(b) { return x * y * z * a * b; }; }; }; }; } const prod = getProduct(2)(3)(4)(5)(6); console.log(prod); // 720 With each iteration, we remember the variable and proceed to the next. We therefore end up multiplying all products from left to the right. We could have done it separately as we did before, or neatly chain it like depicted in the above code.

Function of Functions in Javascript

Functions are objects in Javascript. So, we could use functions as objects within other functions. So, the below is valid - function getProductPlus(x, y) { function factoredResult() { const factor = 2; //console.log("factored : ", x * y * factor); return x * y * factor; } return factoredResult; } let prod = getProductPlus(3, 5); console.log("prod ", prod()); // 30 We call point a variable prod to getProductPlus, and pass arguments. Then we execute prod(). In other languages this likely implies that the outer function has been executed and has already lost its variables. ...

Boolean Primitives vs. Objects in Javascript

We have come to love and respect the fact that (almost) everything is an object in Javascript and we can use all kinds of variables without giving a damn about their types. But, we also can understand that Javascript is trying to work its magic when we throw all caution to the wind. This may have adverse effects. Consider using Booleans as an example. const truthy = true; const falsy = false; console.log(!!truthy); // true console.log(!!falsy); // false The !! just gives the right boolean value - it is equivalent to the variable being used in an if condition. ...

Careful with key names of an object in Javascript

An object’s key can be anything - even a reserved keyword. And, this may cause unexpected problems in some script engines. Consider - const operations = { add: "add something", delete: "remove something", prototype: "do something" }; operations is valid. And, you can go ahead and use the props in any way you wish. We are using node to execute the script. console.log(operations.add); // add something console.log(operations.delete); console.log(operations.prototype); // do something Turns out, nothing really happens even if you try to confuse the engine. ...

Sort Arrays on Multiple Attributes

You can quite easily sort arrays on multiple attributes using a simple Array.sort(). Consider this array - const students = [ { name: "Rama", grade: 10, class: 5 }, { name: "Kris", grade: 7, class: 1 }, { name: "Jan", grade: 8, class: 5 }, { name: "Kris", grade: 5, class: 7 } ]; Sorting based on grade is easy. const sorted = students.sort((a, b) => a.class - b.class); console.log("sorted: ", sorted); /* output [ { name: 'Kris', grade: 7, class: 1 }, { name: 'Rama', grade: 10, class: 5 }, { name: 'Jan', grade: 8, class: 5 }, { name: 'Kris', grade: 5, class: 7 } ] */ If we add a further or condition in the sort criteria, Javascript can sort on both attributes. ...

Merge Arrays / Objects using Spread Operator

You can use the ... operator to perform black magic in Javascript. Consider the below example - const arrNums = [1, 2, 3]; const arrMoreNums = [4, 5, 6]; const allNums = [...arrNums, ...arrMoreNums]; console.log("allNums: ", allNums); // [ 1, 2, 3, 4, 5, 6 ] This is much much more efficient than writing code to go through two loops and merging them. The same is true for objects. const objNums = { a: 1, b: 2, c: 3 }; const objMoreNums = { x: 98, y: 99, z: 100 }; const objAllNums = { ...objNums, ...objMoreNums }; console.log("objAllNums: ", objAllNums); //{ a: 1, b: 2, c: 3, x: 98, y: 99, z: 100 } And no - you cannot convert types through spread. That is dark black magic and is not possible at this time. ...

Similar Methods Across Objects in Javascript

How can you use methods of one object type against another object type? How can you use the feature to your advantage? In another post, we had discussed how Javascript can use call to invoke methods of a function in a different context. We can use this feature to our advantage. Consider a string and array - let alpha = ["a", "b", "c"]; const alphaCap = String.prototype.toUpperCase.call(alpha); console.log("alphaCap: ", alphaCap.split(",")); // [ 'A', 'B', 'C' ] Without explicitly converting alpha array, we can apply string manipulation methods directly on array. Did you note that the result was a string, and we had to convert back into an array. Yes, that happened. ...

Check if objects are empty in Javascript

Check if a given object is empty without considering any custom props defined by prototype. Consider this sample object - const earth = {}; Use Object.entries() or equivalent Object.entries gives us a short way to access entries in an array form. We could just check whether entries are empty to decide whether the parent object is empty. const earth = {}; const isEmpty = !Object.entries(earth).length; console.log(isEmpty); // true The above logic is unaffected even if the object has defined properties. ...