To check what type is a variable you would most likely use the typeof function. You can even skip the parenthesis (typeof someVariable is same as typeof(someVariable)).

typeof works great for:

• strings
• numbers (not if checking integer vs. float)
• big integers
• symbols
• functions
• booleans
• checking if a variable is undefined

typeof "hello"; //string

typeof 1; //number
typeof 0.1; //number

typeof 10000000000000000000000000n; //bigint

typeof Symbol("SomeSymbol"); //symbol

typeof true; //boolean
typeof false; //boolean

typeof function(){}; //function

typeof iamundefined //undefined

It kinda sucks if you need to check:

• arrays
• integer
• floating number
• null
• NaN
• regex
• a date object
• a custom object

👑 Keep calm and check the solutions below 👍

Check if a variable is an array

The use built-in .isArray method will return true/false if the value is an array. This is way better than the old school method of duck typing when you had to check if the variable is an object and has the .length property.

Array.isArray([]); // true

Check if a variable is an integer

The Number.isInteger method returns true if the variable is an integer.

Number.isInteger(1); //true
Number.isInteger(0.1); //false
Number.isInteger(1000000000000000000000n); //false
Number.isInteger(""); //false

Check if a variable is a floating number

It's a two step process:

1. Check if the value is a numbe
2. Check if the value is not an integer

// Solution
const isFloat = function isFloat(val){
  return (typeof val === 'number' && !Number.isInteger(val));
}

// Test
const floatNumber = 0.1;
console.log(isFloat(floatNumber)); //true

Check if a variable is null

Best way is to do a comparison.

const iamnull = null; 
const zero = 0;

iamnull === null; //true
zero === null; //false

Check if a variable is NaN

The Number.isNaN method returns true if the variable is an integer.

It's an improvement of the older isNaN function, since in that case you should also combine it with typeof check for number, otherwise something like isNaN(undefined) would also return true.

Number.isNaN(NaN); //true
Number.isNaN(undefined); //false

Check if a variable is a regular expression

To verify a variable is a regex simply check if it's an instance of the RegExp object.

/I am a regex/ instanceof RegExp //true
true instanceof RegExp //false

Check if a variable is a Date object

Similar to regex, for dates we can also check if the value is an instance of the Date object.

new Date() instanceof Date //true
true instanceof Date //false

Check if a variable is a custom object

typeof will return "object" not just for objects but also for things like arrays and null. Your best option is to combine typeof with elimination.

const isObject = function isObject(val) {
  return (
    typeof val === 'object' &&
    !Array.isArray(val) &&
    val !== null &&
    val instanceof RegExp === false &&
    val instanceof Date === false
  );
};

You can adjust this based on what you want to qualify as an object, however the objects I would like to validate are non-builtin JavaScript objects aka. objects defined by the developer.

Get the first moment of a day

/**
 * Get first millisecond of a date
 * @param {Date} dateObj - JS Date object, default is current time
 * @returns date object with time set to first millisecond of the day
 */
const beginningOfDay = function beginningOfDay (dateObj) {
  //Get current date
  const now = dateObj || new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();

  return new Date(year, month, day);
};

1. Set a default value to the date argument

In case of no argument we set the date to current date and time. The below basically means if dateObj is defined set now to that, otherwise set it to a new Date object.

const now = dateObj || new Date();

2. Extract the date data

new Date() returns the current date and time. Similarly, any Date object you input as an argument will probably also have a time. To get the start of a day we will need a fresh start. For that we first extract the year, month and day.

const now = dateObj || new Date();
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();

3. We generate and return a "fresh" date

By generating a new Date using year, month and day as arguments you set the date of the JavaScript Date object. Because you didn't set the time, JS will set it to the first value which is 0 (0 hours, 0 minutes, 0 seconds, 0 milliseconds) .

return new Date(year, month, day);

Get the last moment of a day

/**
 * Get last millisecond of a date
 * @param {Date} dateObj - JS Date object, default is current time
 * @returns date object with time set to last millisecond of the day
 */
const lastMomentOfDay = function lastMomentOfDay(dateObj) {
  //Tomorrow = Current day + 1
  let tomorrow = beginningOfDay(dateObj);
  tomorrow.setDate(tomorrow.getDate() + 1);

  //Tommorow - 1 milisecond = result
  let result = new Date();
  result.setTime(tomorrow.getTime() - 1);
  return result;
};

1. Get the first moment of the next day

We leverage the function we wrote above (have a 🍪 for keeping your code DRY).

  let tomorrow = beginningOfDay(dateObj);
  tomorrow.setDate(tomorrow.getDate() + 1);

2. Subtract a millisecond from tomorrow

Remember, we got the first moment of tomorrow. If we subtract a millisecond from that, we will get the last millisecond the the day before, which is exactly what we are looking for.

That being said, given the many legislation requirements such as GDPR and cookie policy within the EU, it would be useful to know if we should display certain messaging.

Solution

Let's break it down.

1. Wrap everything in an IIFE to avoid global namespace pollution:

   (async function () {
   //Our code goes here.. keep reading
   })();
   

2. Write a function to get the data from an IP lookup API. The function takes an optional ip parameter. If no value is given, no worries, the API will use the current IP that is making the call. In this case this will be the IP of whoever is visiting the page. The function will fetch the data, await for the reply and parse it. Parsing is minimal, fetch has methods to treat responses as JSON or text. we simply transform a text response into a boolean value - true if from EU and false if not. Simple right?

   /**
   * Check if from EU based on IP
   * @param {string} [ip] - IP, default is current
   * @returns {string} - true/false if IP is from EU (https://ipapi.co/api/#complete-location)
   */
   const fromEU = async function fromEU(ip) {
    let url = 'https://ipapi.co/';
    if (ip) {
      url += ip + '/';
    }
    url += 'in_eu/';
    return fetch(url)
      .then(function (response) {
        return response.text();
      })
      .then(function (txt) {
        if (txt === 'True') {
          return true;
        } else {
          return false;
        }
      });
   };
   

3. Remember, the function you just wrote is async, so await for the parsed reply (true/false). This would also be a great time to handle any errors, for this simple demo, let's just log to console.

   //Get data from IP lookup API
   const isFromEU = await fromEU().catch(function (err) {
    console.log(err);
   });
   

4. Do something with the data we just got. I admit, this is not particularly creative, but it'a a very direct way to show what this tutorial is about. Basically, if this IP is within the EU we want to checkmark and if not, then no checkmark.

   //Un/check if from the EU
   let checked = '';
   if (isFromEU) {
    checked = 'checked';
   }
   document.getElementsByTagName('body')[0].innerHTML =
    '<label><input type="checkbox" name="fromEU" ' +
    checked +
    '>I am from the EU</label>';
   

For the full code, check the demo above.

Questions? Comments? Let me know here or @danielcobocom.

API disclaimer

Whenever you are using an API, like in this case it's an IP lookup service, be sure to check the terms, pricing, etc. APIs are great for adding function and often save time and money, but at the same time they can be points of failure, so always take some time to make sure the API is a good fit for your project.

If you have different language settings in your website or application wouldn't it be great if you could automatically set the language the user prefers? Doing so may be easer than you think. All you have to do is use navigator.language or better, navigator.languages.

What's the difference between navigator.language and navigator.languages?

They're basically the same, except navigator.languages is newer and should return the whole list of user languages by order of preference. This is great in case you don't have a translation in their top language, but perhaps you do for a fallback.

Speaking of fallbacks since navigator.languages implementation is experimental at the time of writing, it is wise to use navigator.language as a fallback value. Just remember to wrap it in an Array for consistency.

Solution

1. Using navigator.languages ([navigator.language] as fallback) we get the preferred language list
2. The list is based on ISO 639-1 and may indicate country by the alpha 2 code of ISO 3166. You probably won't have separate localisations based on country. That is why we filter out unique language codes.
3. Lastly we convert the language codes to more human-friendly english names of the languages.

Problem

Knowing your customer location can help you tailor their experience. Other times you may want to check for this information to compile statistics or comply with regulations.

What's the best way to get location data?

One way to do it would be using the built-in HTML geolocation API. Another would be to use an IP lookup API. The best solution depends on your goals and needs.

...most accurate location? Use the HTML geolocation API.

Need the most accurate location? Use the HTML geolocation API. This will prompt the user for permission to use GPS (or whatever the device thinks is most accurate).

The prompt is great for privacy, but it can also be annoying to the user. This is especially true if they don't expect it. You should also keep in mind that modifying the design of the prompt is generally not an option. This makes sense, since security related UI for functions such as exact location should be uniform in regard to the device, not the app or website.

HTML geolocation is best when you need a very detailed location, but it can be too obtrusive when a general location would be enough. Unless you need GPS tracking, I would stay away from this option.

...general location like city is enough? Use an IP lookup service.

Don't want to bother the user and general location like city is enough? Use an IP lookup service. Another benefit of this approach is the extra information, depending on the provider, most commonly you will get things like currency, language, country, etc.

Beware, the accuracy of this approach will depend on the IP, so if the user is using a VPN, the location can be wildly off (you will get the location of the VPN).

If you are getting the location based on IP, it's a good idea to check with the user for confirmation or even better, use it only for default values only and let the user change any locale settings easily.

Solution

First we write a function to grab the data from ipapi.co.

/**
 * Get data based on IP
 * @param {string} [ip] - IP, default is current
 * @returns {Object} - parsed API response
 */
const getLocale = async function getLocale(ip) {
  let url = 'https://ipapi.co/';
  if (ip) {
    url += ip + '/';
  }
  url += 'json/';
  return fetch(url).then(function (response) {
     return response.json();
  });
};

The function takes an optional argument ip. This is useful in case we have an IP we would like to retrieve data for. The default ip value is the so-called public IP. This means that if the user has a VPN or something similar, it will be the VPN IP.

Secondly, we call getLocale and await for the response.

//Get locale data
const locale = await getLocale().catch(function (err) {
  console.log(err);
});

The locale object we just created holds all the location data and more. You can read the details in the API documentation.

For us the most interesting properties are:

• locale.country_name - name of the country
• locale.country_code_iso3 - standardised ISO3 country code
• locale.region - in the testing I've done so far only useful for US, where it will give the state name
• locale.city - name of the city
• locale.postal - zip code

Notes on using the API

Here I used the API of ipapi.co, but there are many other IP lookup providers out there. I chose this particular one because:

• their API is super simple
• they offer a good free solution
• seems no signup is needed

The above gives me confidence when I want to make a quick prototype or a small project. If I was to release an app to production it's probably better (and more fair) to get a paid plan.

At the very least be sure to double check the TOS of whatever API provider you are using. This way your app is less likely to suddenly lose a critical part of it's functionality due to failing APIs.

Problem

HTML supports image input and on mobile it will even do all the heavy lifting for the Camera API for you, providing a nice native experience. Here's what it looks like:

But let's be honest, the design sucks. Why?

• It's too basic and kinda ugly (yes, tastes differ, but really? you like this?)
• It's wildly inconsistent across web browsers and operating systems.
• You can't style it with CSS.

I'd be OK if you could just add your own CSS, but it will only let you style the "box". The button, the message, etc. are all untouchable by CSS. It would have been so much better if they just let you manipulate those via pseudo-elements .

Solution

The solution to the problem is done in 3 steps:

1. Wrap the <input> in a <label> element
2. Hide the <input> element
3. Style the label as a button (Note: label text becomes the button text)

Next steps

The solution isn't perfect, but you can solve both drawbacks mentioned below with some JavaScript. If you have an interesting implementation or even better, if you came up with fixes that don't require JS, don't be shy and drop me a line.

Make it keyboard accessible

Adding tabindex="0" to the label element will make it tab-bable, but pressing ENTER/SPACE doesn't activate it. What you could do is add a JS listener for the keypress. This defeats the purpose which is a CSS only solution.

However, if we were to use JS anyway we might as well be more semantic. Keep in mind clicking this control will activate the hidden input, so using a button would be much more semantic than a label element.

Add visual feedback for input value

Often it is useful to see if/which image is in the input. The HTML solution is to provide you with a filename or text saying that the value is empty.

Again, we could solve this with some JS and listen to the value change. In this case I would also consider adding an image preview and a button to reset the input (set value to none). Using the built-in HTML input you can reset the input value too, but it's done in such an unintuitive way, doing a JS powered redesign is the way to go.