Posts

Use array filters to remove duplicates in an array. We have seen how we could use sets or an intermediate object in a loop to eliminate duplicates within array.There always is a better way of doing things. Why not use filter to make the code more readable and not use set at the same time :) ? Consider this array - const nums = [1, 5, 0, 1, 2, 3]; The below code will create a unique array. const uniqueNums = nums.filter((num, index) => { return nums.indexOf(num) == index; }); console.log(uniqueNums); // [ 1, 5, 0, 2, 3 ] Why will this work? Well, because nums.indexOf(num) always returns the first index of a particular element. ...

Are you doing array search using the old school for-loops? Time to change, kid. Consider this array - const fruits = [ { name: "apple", color: "red" }, { name: "orange", color: "orange" }, { name: "pear", color: "green" } ]; To search for a specific value - console.log(fruits.find(val => val.name == "pear")); // { name: 'pear', color: 'green' } console.log(fruits.find(val => val.name == "grapes")); // undefined We use the Array.find method to retrieve search results. The argument for find takes a function which has the condition for find. In our case we pass a val which represents each item in the array, and compare the name prop to the given value. find returns the matched item or undefined. ...

There is a really cool way to do group by in an array using reduce. The problem statement - you have an array of objects and need to create different arrays based on similar attributes. This is very similar to the SQL group by statement. Consider the example array - const fruits = [ (apple = { color: "red", shape: "round" }), (watermelon = { color: "green", shape: "square" }), (orange = { color: "orange", shape: "round" }), (pear = { color: "green", shape: "pear" }) ]; We have to group by color - all reds in one array, greens in next array and so forth. This can of course be done with a multiple, nested for loops. Or, you can push the array through a reduce statement that is fed an interesting function. ...

How do you maintain secrets on the client-side? In one sentence - there are no secrets client-side. If you don’t want anyone to know about the secret, you should not send it to the client. The need for secrets Client may need user ids/passwords, API keys, API secrets etc. None of them can be trusted to the client. Your cookies can be read by a user or a client-program, your local storage is readable by users or third party sites, and your code is accessible by users. ...

As a web developer I am amazed on web assembly and what Blazor could do with it. And, I am saying that even though I absolutely love what Javascript can do. The Back Story I had been hearing about this Microsoft experiment with web assembly (WASM) for quite sometime, but got an opportunity to take a further look starting late 2018. This was the time when news of Blazor being released as part of .NET Core started going rounds. At a later time this was expected to be server side Blazor. I can’t find the patience to go over the messaging confusion with Razor pages, Razor components, server-side and client-side Razor / Blazor. We will get back to that topic at some time. ...

There are multiple ways to convert a given string to a number - so, which one to use and where? You would have also seen the more generic post on how to cast value from one type to another. But it may not be so apparent on which option to pick when you need to get numbers from a given string. The first approach is my preferred one. console.log(Number("hello")); // NaN console.log(Number("abc123")); // NaN console.log(Number("123abc")); // NaN console.log(Number("123")); // 123 console.log(Number("123.12")); // 123.12 The values returned by Number evaluate to true or false as expected. You could easily check for valid numbers and abandon operation if the string is not a number. ...

Deleting elements in an array maintains reactivity in Vue when done right. These arrays can be local variables in a component, or state variables in Vuex - the behaviour is the same. Let us consider this example - <template> {{ fruits }} <v-btn @click="deleteFirst"> Delete First </v-btn> <v-btn @click="deleteLast"> Delete Last </v-btn> </template> <script> export default { name: "Farm", data() { return { fruits: ["apple", "orange", "grapes", "pear"] }; }, methods: { deleteFirst() { this.fruits.shift(); // delete last }, deleteLast() { this.fruits.pop(); // delete last } } }; </script> We just use the standard pop and shift to delete elements in the array. This works just fine and UI is reactive to the changes. ...

Why and how would you pass parameters to a Vue application? You might have seen URLs that pass parameters to whatever front-end / back-end logic that is processing them. This will be something akin to - https://myapp.com/accounts/1 https://myapp.com/accounts/1/todo/2 https://myapp.com/accounts?id=1 https://myapp.com/accounts?query=abc&role=my id, query, role are parameters passed in the URL. The receiving function can have access to the parameters and values, and have processing logic based on values. URL params are heavily used in some of the modern headless CMS applications (e.g. Strapi). You can pass a whole lot of stuff against URL and the server has out of the box support to respond to the values. Even in some of the older APIs will have support to referring to a specific resource with id. ...

You can easily introduce default values for the arguments passed to a function. Consider this function - function sayHello(name) { return `hello ${name}`; } Calling this function without arguments will provide a not-so-pretty string. console.log(sayHello()); // hello undefined Even if someone had an existential crisis, I doubt they will like to be called ‘undefined’. So - let us change that. function sayHello(name) { name = name || "world"; return `hello ${name}`; } The ‘or’ statement will - retain name value if provided assign ‘world’ to name if name is falsy The results are more pleasing. ...

We have a string.toLowerCase() and string.toUpperCase() in Javascript, but no out of the box function to convert to title case. Fear not if you are in that pickle - it is quite easy. function ConvertTitleCase(str) { const strArr = str.toLowerCase().split(" "); for (let i = 0; i < strArr.length; i++) { strArr[i] = strArr[i][0].toUpperCase() + strArr[i].slice(1); } return strArr.join(" "); } console.log(ConvertTitleCase("hello world")); // Hello World ConvertTitleCase takes one argument, which is a string. The string is split into distinct word array (split at ‘space’), and each word is then converted to initial cap. ...