tag: Javascript

Flatten arrays easily with a single command. Or, go further than that by using a map function while flattening arrays. Consider below example - const nums = [[0, 2], [1, 3], [7, 9, 11]]; You can choose to iterate through all elements if you want to iterate through or access all numbers, or you could just use flat. const nums = [[0, 2], [1, 3], [7, 9, 11]]; console.log(nums.flat()); // [ 0, 2, 1, 3, 7, 9, 11] A real-world example - you receive a file that may have a one or more comma-separated ‘student ids’ in a single column. One of the quickest way to process and sort those ids is by having them in a single array - so flatten them up. ...

You should dynamically build strings without using strings. How do you build strings when you need them conditionally built? For example, you need comma separated planets from an array of astronomical bodies. const astroBodies = [ { name: "earth", type: "planet" }, { name: "moon", type: "satellite" }, { name: "mars", type: "planet" } ]; let planets = ""; astroBodies.forEach(ele => { if (ele.type == "planet") planets += "," + ele.name; }); console.log(planets); // ,earth,mars You could do this, and this works. However it is not ‘clean’. For e.g. you have an extra “,”, strings are not friendly to manipulation of elements, and so forth. ...

Require and import do the same thing differently. I never said to none about missin’ the good ol’ days. The days when Javascript was not golden, code could be simply included within HTML or a single file, and when smarty-pants use to go cyber without Javascript. Those were more of WTF-days. Now, Javascript comes in a million files per app and in beautiful billion packages. That give us new challenges to solve - like how to include and reference them scripts across files. ...

Object entries and values add to the rich toolset for managing objects within Javascript. As I never tire to say - (almost) everything is an object in Javascript. So, how do you access the props / values? It is not as if you are going to count them down - pfft.. are we going to bring down an object to the level of an array? Also see most of things you should know about object and props ...

It is quite common to use dot notation to access object’s props. How can you ever go wrong? We have seen a bit of dot and bracket notations in all about Javascript objects and props post. We have learnt to use dot notations to make our code more readable - const apple = { name: "apple", color: "reddish red", shape: "round" }; console.log("name: ", apple.name); // apple console.log("shape: ", apple.shape); // round At the same time, you want to be careful with stuffing dots down the throat of every program. Note the following gotchas while using dot notation. ...

Be aware of hidden Javascript features that can break your code before you say “ugh..”. Consider the below code that prints today’s date - const dt = new Date(); console.log("dt: ", dt); // 2019-03-31T13:56:42.552Z All looks good? Let us now create a target date for my payment - it is 1.5 months from now. const dt1 = new Date(2019, 05, 15); console.log("dt1: ", dt1); // 2019-06-14T18:30:00.000Z // well - diff. time-zone causes one day prior // .. but that's ok Don’t mind the day gap, we are just living in the wrong time zone. We are happy with 15-Jun allright. ...

Someone once said “there shall be standards, and there were standards”. But no one said anything about consistency, uniformity, and stuff like that? The question is of course not about standards. Let me ask you this one thing - do you have any idea what’s going on with push and contact? Here’s concat.. const nums = [1, 1, 2, 3]; console.log("nums.contact(): ", nums.concat(5)); // [ 1, 1, 2, 3, 5 ] console.log("length: ", nums.length); // 4 And then, there’s push.. ...

Be careful about using singleton patterns in Javascript classes. It may have unexpected side-effects and can be the most dreaded evil overlord you encounter on that day. Let us take this example of an Account class that is used by all logged-in users. Users set a role and are shown accounts based on the role. "use strict"; const role = "mortal"; class Account { getAccounts() { console.log("this.role: ", this.role); if (this.role == "mortal") return "mortal accounts"; else if (this.role == "manager") return "hail manager..! here's all accounts"; } setRole(roleVal) { this.role = roleVal; } } module.exports = new Account(); Let’s consider the below test class that calls the Account class. ...

Where does a comma fit in the class methods? No where. Where do I remember it from, then - Vue objects. When I started using Vue full time some time in 2017, I had this problem with putting commas everywhere. These were becoming like issues with semicolons - except that VS Code Prettier takes care of my semi-colons. Back to classes and commas - we will get back to Vue in a bit. ...

Promises and promise chaining - really powerful tools to use and make your life as easy as it can be. Until you are stuck in an error that no one seems to have a clue about. Let us see some common errors and how to fix them. 1. Not use error handling in promises It does not demand a lot, people. Just do it. (Oh, wait I have been guilty of it as hell.) ...