category: Javascript

Do not change those non-primitive function arguments without understanding the significant implications of your action. Programming languages have pass by reference and pass by value to pass arguments to a function. Javascript passes values for primitives, but references when you are trying to pass objects. Changing arguments within a function will change the arguments for ever. function hello(addressee) { addressee.name = "Mr. Anderson"; return "Hello " + addressee.name; } const person = { name: "world" }; console.log(hello(person)); // Hello Mr. Anderson console.log("person: ", person); // person: { name: 'Mr. Anderson' } It is a disaster if the world is treated as Mr. Anderson. ...

Things are always not how they appear. Especially when it comes to multiplication of decimal numbers in Javascript. Consider - const a = 1.1; Multiply the above number by 3. Compare with expected answer just to make sure you are not seeing a wrong answer. const a = 1.1; const a3 = 3.3; const thrice = 1.1 * 3; console.log("thrice: ", thrice); // 3.3000000000000003 console.log(thrice == a3); // false This happens because Javascript treats all of its numbers as floating point numbers, and their binary math cannot exactly represent numbers which has denominator not divisible by 2. ...

What if you want to allow changing props of an object, but do not want anyone to add new props? Well, that is what Object.seal is for. Objects in Javascript cannot be made immutable by using a const keyword. const works on primitives. It can also make sure you don’t reassign value to an object. const fruit = "apple"; fruit = "orange"; // TypeError: Assignment to constant variable. const fruit = { name: "apple" }; fruit = { name: "orange" }; //TypeError: Assignment to constant variable. But, const cannot prevent value in object from being changed. ...

What if you want to play around with data, but also maintain metadata at the same time? In Javascript you don’t have to create other objects or work hard for that Nirvana that someone in the office was talking about. You just have to go ahead and store the darn metadata along with the object, and everyone is happy. Consider this array - const nums = [1, 3, 5, 7]; Let’s say you have to store a message along with the array. You might have seen distinct variables being assigned to serve such a need. ...

It is easy to take NaN for granted. But remember - the ’not a number’ notation is the only powerful object that does not equal itself. First the essentials - you use NaN whenever you do not have variable values in control but want to do a numerical operation on it. Rather than the numerical operation throwing you under the bus, you play safe by checking whether the numbers can be used in a valid way. ...

You can make mere variables and even an object immutable. But, how about a humble object prop? Making object props constant and immutable has practical usage. For e.g. consider this totally practical program to print out fruits and whether they are poisonous. const eatable = { poisonous: false, printFruit: function(fruit) { return "name: " + fruit + " | poison: " + this.poisonous; } }; console.log(eatable.printFruit("mango")); // name: mango | poison: false If someone decides to play spoil-sport and update poisonous to true, it may result in whole populations being wiped out. ...

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 - ...

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. ...

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.

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. ...