Forem: Vick Greenfields

The Use of Intl Keyword in JavaScript

Vick Greenfields — Thu, 16 Mar 2023 10:11:21 +0000

Intl in Javascript is a set of tools used in enabling the design and development of an application or document that enables easy usage for target audiences in different cultures, regions or language.

According to MDN, the Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

In this article, I will show you how to format date, time and numbers as well as other Intl built in functionalities for comparing strings without the use of any libraries or plugins.

Intl syntax

The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions (MDN). Available constructors on the Intl object includes but not limited to NumberFormat, DateTimeFormat, Collator and RelativeTimeFormat.

These constructors and methods all accepts locale and options as arguments. The locale argument stands for the location to be used in carrying out an operation. Its value can be a string, undefined (when it is not provided, in which case the implementation's default value is used) or an array of locations (in which case, the first is chosen and others are fallbacks).

For the full list of supported options, consult mdn web docs. The structure for creating a new instance of the Intl object is shown below:

let myIntlFormat = new Intl.[constructor](locale, {options})

Based on operations to be performed, either NumberFormat, DateTimeFormat, Collator or RelativeTimeFormat can be passed in as the constructor as demonstrated below:

let myIntlNumberFormat = new Intl.NumberFormat(locale, {options})

Usage of the new instance created can then be done by appending the .format() function and passing the value to be formatted.

myIntlNumberFormat.format(23423.23)

Formatting Currencies

The Intl.NumberFormat object can be used to format numbers to currencies based on a user's locale. This is demonstrated below:

let myNumber = 1452342.783
let formatNumberToCurrency = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
})

console.log(formatNumberToCurrency.format(myNumber)) // '$1,452,342.78'

In the example above, we are creating a new instance of the Intl.NumberFormat and passing the options of style and currencies to be formatted with. The formatter then uses that to format myNumber with the appropriate currency, decimal places and comma-separators as needed.

Number Formatting

The Intl.NumberFormat object enables the formating of numbers based on a user's location and language (without adding currencies) as shown below:

let myNumber = 1452342.783
let formatNumber = new Intl.NumberFormat('en-US')

console.log(formatNumber.format(myNumber)) // '1,452,342.78'

Date Format

The Intl.DateTimeFormat object is useful for formating date and time based on the user's location. This requires passing in the locale code as shown below:

let myDate = new Date()
let formatDate = new Intl.DateTimeFormat('en-US')

console.log(formatDate.format(myDate)) // '23/2/2023'

Collating and Sorting

The Intl.Collator object provides support for comparing and sorting of strings. This can be used to compare and sort strings based on the locale values provided. The Intl.Collator is used to sort an array of strings in the example below:

let myArray = ['Vick', 'Greene', 'Adele']
let myColator = new Intl.Collator('en-US')

console.log(myArray.sort(myColator.compare)) // ['Adele', 'Greene', 'Vick']

You will notice that the syntax is different from the other ones above. Using Intl.collator requires using the .sort() function and passing the our colator object and appending it with .compare.

Relative Time Formats

Intl also support for generating relative time formats for dates thereby reducing the use of libraries for this since it is built into javascript already. Intl.RelativeTimeFormat takes locale value and a variety of options.

let relativeTimeFormatter = new Intl.RelativeTimeFormat('en', {
    numeric: 'auto'
})

console.log(relativeTimeFormatter.format(1, 'week')) // 'next week'
console.log(relativeTimeFormatter.format(-3, 'year')) // '3 years ago'
console.log(relativeTimeFormatter.format(2, 'hour')) // 'in 2 hours'

// In German
let germanTimeFormatter = new Intl.RelativeTimeFormat('es', {
    numeric: 'auto'
})
console.log(germanTimeFormatter.format(1, 'week')) // 'nächste Woche'
console.log(germanTimeFormatter.format(-3, 'year')) // 'vor 3 Jahren'
console.log(germanTimeFormatter.format(2, 'hour')) // 'in 2 Stunden'

As you can see above, it supports both negative and positive values for dates whether in the past or in the future. And it also cancels the need for hardcoding string values, which can be quite difficult to do if you support lots of languages.

Supported units that can be passed in includes second, minute, hour, day, week, month, quater and year. You can read more about it's usage and how to extend it here and on MDN

Conclusion

Intl is a powerful tool that makes it easy to format and display data in a way that users can understand based on each user’s location. using it, empowers you to provide localized and consistent experience for your users across different countries and languages.

Recursion Illustrated with PseudoCode and Code

Vick Greenfields — Sun, 14 Jun 2020 15:01:28 +0000

WHAT IS RECURSION?

The simplest definition of recursion is simply when a function solves a problem by calling itself. Confusing right? Yes and no. I am going to illustrate how recursion works in both real life and in javascript in order to make things clearer.

HUNGER ILLUSTRATION

Imagine that you are hungry now and you will like to eat 'Jollof Rice'. Let us write the solution in pseudo code



 First you need to dish the Jollof Rice
      then you need to eat the Jollof rice

In Javascript, the code will look like this.



function eat(food) {
    dish(food)
    eatFood();
}
if(hungry) {
    eat('Jollof Rice')
}

If hungry is true, to eat, you dish the food and start eating. Simple right?

Except eating is not that simple. It involves carrying the rice with fork and chewing it before swallowing it.



function eat(food) {
    dish(food)
    eatFood()
}

function eatFood() {
    carryForkOfRice()
    chewAndSwallow()
}

if(hungry) {
    eat('Jollof Rice')
}

And then again and again, you carry fork and chew, the process only stops when you are satisfied. One spoonfull can not possible satisfy you right? You need to do it again and again. And that is why recursion comes in, the eat food function has to keep calling itself for the hunger to quench. Which means your eat food function has now gone recursive as it now calls itself over and over.



function eatFood() {
    carryForkOfRice()
    chewAndSwallow()
    eatFood()
}

But just as a computer has a limited memory, in the same way, your stomach can only take a sizeable amount of food. Which means your brain has to check after each for of rice whether you are satiated or not, in order to prevent overfeeding. This we implement by checking if you are satiated after swallowing food.



function eatFood() {
    carryForkOfRice()
    chewAndSwallow()
    if(satiated) {
        return
    } else {
        eatFood()
    }
}

In programming, a recursive function will continue to run perpetually until the computer runs out of memory. To prevent this, a breaking comdition is set. A good example is the if satiated clause condition in our eat food condition above.

Bug on Timbu.com

Vick Greenfields — Tue, 02 Apr 2019 14:10:39 +0000

Timbu is a travel site that helps travellers plan their trips. It has database for all top travel destinations, homes and hotels.

However, the site has a bug in the section of the site. As you can see in the picture the section doesn't display properly on mobile. You can check out Timbu yourself.

Timbu goes bug hunting

Vick Greenfields — Tue, 02 Apr 2019 08:16:05 +0000

Timbu.com, a travel site that helps travellers plan their trips has opened their doors to bug hunters. The site connects travellers to homes and hotels all over the world.
This move by Timbu.com was made to fix several bugs on the site. Check out the site https://timbu.com/

My 2019 Goals! Not too late to Start

Vick Greenfields — Fri, 01 Feb 2019 13:34:27 +0000

Your greatest limitation is your last achievement said one of my mentors. 2018 was great, I had a few success stories some of which I hope to discuss in another article. But this made me take it slow towards the end of last year, forgetting that the quest for greatness has just started.

Now, am back and invite you to join me on this 2019 journey to achieve my 10 goals for 2019:

Get a new laptop
Become a Badass Frontend Web Developer
Become an Intern, then get a Remote Job
Build my portfolio website
Finish @freeCodeCamp curriculum
Contribute to open source project
Finish #100DaysOfCode & #301DaysOfCode
Publish an article on Dev.to monthly
Give a Dev talk
Start working out
Get/build a Solar Powered Apartment