#core objects

The Intl object stands for International which is used for formatting number, dates and other types for multiple contries (and formats like different currencies). It also has some other functionality that I will not be discussing here. Anyways, this object can do number formatting across different currencies without having to use a library or much code. For example:

console.log(Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number1)); // $19,342.99 console.log(Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(number1)); // £19,342.99 console.log(Intl.NumberFormat('cmn-CN', { style: 'currency', currency: 'CNY' }).format(number1)); // CN¥ 19,342.99 console.log(Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 3, maximumFractionDigits: 3 }).format(number1)); // $19,342.987

The first string is a locale which is the language followed by the country that the language is being used in. The valid language codes and country codes can be found here. The list for the 3 letter currency codes can be found here.

This is supported in all modern browsers, but note that Android Webview which is used in Android Hybrid Apps only supports the NumberFormat that I talked about and not other Intl constructors.

Every custom object has a toString operation that gives an objects string representation. There is also a lesser known valueOf property. This gives an object value in calculations. For example, this is how Date arithmetic is done:

const ONE_DAY_MS = 86400000; const today = new Date(); const yesterday = new Date(new Date() - ONE_DAY_MS); if (today - yesterday > 0) { console.log(`${today} takes place after ${yesterday}`); } else { console.log(`${today} is the same as or before ${yesterday}`); } // Something like: // Fri May 11 2018 20:56:47 GMT-0400 (EDT) takes place after Thu May 10 2018 20:56:47 GMT-0400 (EDT)

This could be replaced with valueOf appended:

const yesterday2 = new Date(new Date().valueOf() - ONE_DAY_MS); if (today.valueOf() - yesterday2.valueOf() > 0) { console.log(`${today} takes place after ${yesterday2}`); } else { console.log(`${today} is the same as or before ${yesterday2}`); } // Something like: // Fri May 11 2018 20:56:47 GMT-0400 (EDT) takes place after Thu May 10 2018 20:56:47 GMT-0400 (EDT)

So with valueOf, an object can be created that can easily be used in calculations. For example, here is a Rounded object:

class Rounded { constructor(value) { this.value = Math.round(value); } valueOf() { return this.value; } } const revenue = new Rounded(201.2445); const costs = new Rounded(325.2211); const profit = revenue - costs; const dreams = revenue * costs; console.log(profit); // -124 console.log(dreams); // 65325

Using indexOf is a very common operation in Javascript. Though a little known feature is that indexOf can start searching from any point in a string. At first, this seems like a feature purely for performance optimization. But it useful when doing more complex cases of string parsing.

The following replaces all content between 2 tags (containing anything) within a string with another string:

function replaceTaggedContent(contentString, repeaterTag, replaceWith) { let newString = contentString; let index = 0; while (index < contentString.length) { const startIndex = newString.indexOf(repeaterTag, index); // No point in continuing, there is nothing more to replace. if (startIndex < 0) { break; } // No point in continuing, there is no second string to match. const endIndex = newString.indexOf(repeaterTag, startIndex + repeaterTag.length); if (endIndex < 0) { break; } const endPoint = endIndex + repeaterTag.length; newString = newString.substring(0, startIndex) + replaceWith + newString.substring(endPoint); index = startIndex + replaceWith.length; } return newString; } const result = replaceTaggedContent( 'BEFORE-@should replace@-MIDDLE-@should-replace@-AFTER' , '@', 'REPLACED'); console.log('After :', result); // BEFORE-REPLACED-MIDDLE-REPLACED-AFTER

Arguably, this can be done with regex though at that point the tags would need to be escaped and the expression would look quite complicated. This is also relatively easy to upgrade to other scenarios like supporting replacing a list of words corresponding to the index of the current replacement.

Math.max simply takes a set of numbers and returns the maximum. Although it is a simple operation, it has many applications. Firstly, here is how it works:

console.log(Math.max(1, 3, 1)); // 3 const arr = [1, 3, 1]; // The spread syntax converts the array into a set of arguments // It is supported in all modern browsers except IE (but has MS Edge support) console.log(Math.max(...arr)); // 3

It works especially well when you have a list of items that convert to numbers automatically in calculations. For example, with dates which return the timestamp since 1970 in calculations:

const dates = [ new Date('2011/06/25'), new Date('2011/06/28'), new Date('2011/06/27'), new Date('2011/06/26') ]; const maxDate = new Date(Math.max(...dates)); console.log(maxDate); // 2011-06-28T04:00:00.000Z (Format varies per environment)

Combining it with maps makes working with array of objects easy:

const cars = [ { hp: 155, weight: 2400 }, { hp: 237, weight: 2465 }, { hp: 217, weight: 2000 } ]; console.log(Math.max(...cars.map((car) => car.hp))); // 237

There is one weakness with Math.max since JS and environments that implement it have argument amount limits: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions. So when large amounts of data (e.g. more than 1000 items), an Array.reduce based map can be used instead:

// The 0 is the value to set the accumulator to intially const maxHp = cars.reduce((maxHp, car) => Math.max(maxHp, car.hp), 0); console.info(maxHp); // 237