Posts

Here’s a quick reference of various values and their types. For further reference: see what types mean in Javascript and type casting in Javascript. Value Type Description true boolean Boolean 1 number Number “1” string String “abcd” string String Boolean(false) object Boolean object Number(0) object Number object String(“abcd”) object String object [1, 2, 3] object Array object Object() object Plain object {} object Plain object function() {} function Function object Code to cross-check - ...

Array constructor syntax is confusing to both the system and humans. Avoid it when possible. Consider this.. const planets = ["mercury", "venus", "earth"]; console.log(planets[0]); // mercury Now, let’s say we do the same using a constructor. const num = new Array(3, 1, 4, 5); console.log("num: ", num); // [ 3, 1, 4, 5 ] console.log(num[0]); // 3 This is ok, but there is a way to use new Array to specify the number of elements in the array. const num = new Array(3).fill(0); console.log("num: ", num); // [ 0, 0, 0 ] So, if we provide only one input - does it mean the number of elements, or the first element? ...

We have come to appreciate the performance and readability of the ol’ for loop. But, just how much should we be appreciating the performance? We already did a huge scientific study on different avatars of for. This is the time that we do another highly ineffective test for different types of loops so that we can prove nothing to no one. Consider this simple array. const arr = new Array(1000).fill("v"); We will measure the time taken to go through the array and print every element. ...

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

Vue provides a way to create global variables and functions using Vue.prototype. What do you normally do if you want to create a global variable in Vue? You don’t. Global variables have no place in today’s society You create variables in storage. That’s the purpose of storage You can say the exact same thing about functions. But, what if you have variables that sound silly if they get into something as elegant as Vuex store? Or worse, what if you don’t have a store and you cannot add one since you inherited a stupid-ass Vue project? ...

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