Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object does not work in the way you would want it to for JSON. Using the for..of syntax introduced in ECMAScript 2015, we can access the form data entries and iterate over them to get key and value pairs. This will be the verbose solution, scroll to the bottom to get the cleaner solution using .reduce below.
Most of the time when you’re looping over an array of elements, you’ll do it sequentially. However, I recently needed to iterate through an array of objects in reverse just using a plain old for loop. This will not be a highly informative or groundbreaking post but, I thought I’d share this in case someone wants to solve the same problem and might be confused with the many different ways you can loop over an array in reverse.
Recently whilst working on my web app Built With Aurelia I encountered a situation where I needed to sort by the highest upvoted items, but also sort secondly by the recently added items. The collection of items would look like this: Item 1 (5 votes) Item 2 (3 votes) Item 3 (2 votes) Item 4 (2 votes) Item 5 (1 vote) Item 6 (1 vote) Item 7 (0 votes) Item 8 (0 votes) Item 9 (0 votes) Item 10 (0 votes) The code that I wrote to achieve this was the following using the sort method in Javscript:
Two of my favourite additions to ECMAScript 2015 were the const and let keywords. Sadly, I see them being misused quite often on many public repositories and even in some projects I have worked on. Const (constants) If Javascript is not the first language you have worked with, then you will be familiar with constants in other languages like Java or PHP. A constant is an immutable variable. An immutable variable means its value will always be the same, it never changes (hence why they’re called constants). Also worthy of note is like let block scoped variables, constants are block scoped as well.
One of the biggest upcoming additions to Javascript (in my opinion) is support for async/await. If you have worked with a language like C# before, then you will immediately know why async/await is fantastic. Currently async/await is in stage 3 which means it is almost a completed specification. At the time of writing this post, surprisingly Microsoft’s Edge browser is the only browser which has added in support for async/await. Support alert: While async/await will soon be standardised into the TC39 specification by the end of 2016 (hopefully) you still need to use a transpiler like Babel to add in support. At the time of writing this, TypeScript lacks support for async/await, so you need to use Babel with it.
It is that time of the week for Obvious Javascript Tip of the week. You probably already know how to delete an item from an array, maybe not. Sometimes it can be confusing, do I use the delete keyword, do I use slice or do I use splice? Splice of life Using splice we can remove items from an array by providing the index (with the first item being zero).
Show of hands if you can off of the top of your head remove/trim a character from the start or end of a string. If your hand remained down, don’t feel too bad. There are so many string manipulation methods in Javascript, it can be confusing. We have; substr, substring and splice (just off the top of my head). Not many people can tell you the differences between the three without Googling.
If you have an array of objects and you want to filter the array to remove duplicate objects but do so based on a provided key/property, this might prove to be a problem you would expect Javascript to address natively. If you are using Lodash then you have many methods at your disposal that can help. Fortunately, if you are working with ES6 and up, writing some basic Javascript using the filter and map functions makes this possible.
Support for Object.values(), Object.entries() and Object.getOwnPropertyDescriptors() has landed in the Google Chrome dev channel. These newly added methods are currently candidate proposals and at stage 3 for the ES2017 specification. Many of us were using Lodash for some of the aforementioned missing features from browsers like Object.values. So these are welcome additions. Keep in mind that these have not landed in the consumer release version of Google Chrome, maybe in a month or two we will see these released, perhaps even sooner. For the moment they are hidden behind a flag and only in the Canary version, enabled in options under “Experimental Javascript”. I did not realise these additions were so far along in the specification and hopefully provided there are no delays, we see them land in the finalised spec later next year.
Plain old CSS is boring. If you are building your applications off of the Aurelia Skeleton Navigation then it ships with support for working with regular CSS. Adding in support for working with Sass in your Aurelia applications is as easy as whistling dixie. We are also going to be adding in support for Autoprefixer as well so we can automatically add in browser prefixes for all of our CSS without worrying about browsers like IE10 and what they can support.