tag: Learn

Destructuring assignment feature provides an easy, readable way to handle object and array assignments. ES6 introduced assignment destructuring, which provides a clean and more readable way to assign variables. The old way - const fruits = { apple: { color: "red" }, orange: { color: "orange" } }; const appleTheFruit = fruits["apple"]; console.log("color of apple: ", appleTheFruit.color); // red The new way.. const fruits = { apple: { color: "red" }, orange: { color: "orange" } }; const { apple } = fruits; // or also include orange: const { apple, orange } = fruits; console.log("color of apple: ", apple.color); // red The new syntax gives us a quick and easy way to get named props within an object. ...

Arrow functions have made our life much much easier. You can now refer to this without fearing the bogeyman. How did we write functions in the dark ages? Here’s a typical function. function getSum(i, j) { // or const getSum = function(i,j) { return i + j; } console.log(getSum(3, 2)); // 5 The same functionality as arrow function - const getSum = (i, j) => i + j; console.log(getSum(3, 2)); // 5 Right off the bat you will see that arrow functions are assigned to variables, have an implicit return and structure wise do not different all that much from normal functions. ...

Meteor is quite an easy Javascript framework to pick up and I have been fascinated getting back to where I left off a couple of years ago. There are quite a few things that you could do in the first week itself, and could even target to complete real-world projects. However, be aware - MeteorJS is a ghost town of sorts. The usage has declined rapidly over the past three years, and most of the content that you will find is outdated. Students of the framework will find older tutorials that do not quite work. For all my hubris, I still ended up spending time on debugging silly problems that should not have existed in the first place. ...

Generate random strings in multiple ways in Javascript. Use crypto The quickest and easiest way to generate random strings. const crypto = require("crypto"); var txt = crypto.randomBytes(10).toString("hex"); console.log("txt: ", txt); // a3f4ac84da8da6bf172b Crypto library is available in node. On the client side, use window.crypto. Use random Use Math.random() to generate a string of random set of characters and numbers. let a = Math.random().toString(36).substring(2, 15); console.log(a); // yzcjf8welj The above code converts a random number to to its base-36 form (toString(36)) and outputs the string after removing the prefix. ...

Get a quick-start on using try/catch to handle errors and exceptions. Consider the below example that expects name to be provided to the program. If name is provided you will go ahead and store record. let name = ""; if (name) { // store record } The big problem with the above code is absence of any kind of feedback to the caller (or user). You can do this to manage that error and notify the caller. ...

Use Intl or the number prototype to format number to any specified currency. const money = 420000; const moneyFormatted = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(money); console.log(moneyFormatted); // $420,000.00 Javascript falls back on runtime locale if you specify an unavailable locale. This is used to format number You can see the complete list of currency codes here. Or, use number prototype- const money = 420000; const moneyFormatted = money.toLocaleString("en-IN", { maximumFractionDigits: 2, style: "currency", currency: "INR", }); console.log(moneyFormatted); // ₹ 4,20,000.00 If you are using a framework that does not provide direct currency support just include the above in a globally accessible script and use it everywhere. For example, you would define the format in global filters in Vue and use that filter wherever needed.

Quickly check whether a property exists against an object. There is more than one way to check whether a given object has a prop - the choice if often convenience rather than performance of the said method. Let’s see the various methods by taking this example of a simple object. let apple = { color: "red", size: "small" }; Method 1: Check the value of the prop Check whether a property exists in an object by “getting” that prop. ...

Find and replace substring within a string using replace. If you know the exact substring use it directly in replace and be at peace. let sample = "Lorem ipsum dolor sit amet ..."; sample = sample.replace("ipsum", "gypsum"); console.log("sample: ", sample); // Lorem gypsum dolor sit amet ... Or, use regular expressions and the massive advantages that come with it. sample = sample.replace(/Lorem/gi, "loremi"); console.log("sample: ", sample); // loremi ipsum dolor sit amet ... If you have special characters that cannot be handled by regular expressions. ...

Here are some effective ways of inspecting variables used in your code using browser dev tools to your advantage. This is what we typically do in the code to know what exactly is happening with our variables. var name = "Mr. Anderson"; console.log('before loop" + name); This will have the following beautiful output in browser console. Let’s dig deeper. Always use commas Instead of a plain string pass variables separated by comma in console. This will present a navigable tree instead of an undecipherable object. ...

I am using Vue quite a bit and Vuelidate/ VeeValidate have spoilt me with options. The client-side validations are quite neat and easy to do. All you need is a couple of lines of code, some rules in the script section and you are good to go. However, you should not stop at this. Validation needs to occur in the server in addition to the client for all important data. ...