DEV Community

Cover image for Javascript types?
Jeferson 'Shin' Leite Borges
Jeferson 'Shin' Leite Borges

Posted on

Javascript types?

Ok, I'll try to write this post in both portuguese and english.

English

Come on, who never said that Javascript is chaos because it has no types? Even Microsoft put its foot in Javascript by adding types and making "TypeScript". And the cherry on top the typeof operator doesn't help as much.

For example, if you look at the example below we have the following:

var object = { type: "object" };
var array = ["type", "array"];
var string = "string";
var number = 99;
var regex = /regex/g;
Enter fullscreen mode Exit fullscreen mode

If for any reason we have to ensure that these values are exactly what they should be, the typeof operator will help us for primitives only, and it may not even be that efficient.

typeof object; // object
typeof array; // object
typeof string; // string
typeof number; // number
typeof regex; // object
Enter fullscreen mode Exit fullscreen mode

For these types of situations you can do a trick that may help, such as:

Object.prototype.toString.call(object); // [object Object]
Object.prototype.toString.call(array); // [object Array]
Object.prototype.toString.call(string); // [object String]
Object.prototype.toString.call(number); // [object Number]
Object.prototype.toString.call(regex); // [object RegExp]
Enter fullscreen mode Exit fullscreen mode

Notice how it returns something much more precise, and with a little bit of string manipulation it is possible to return a type much closer than expected from a typeof operator, now that you have this information prepare a util or support function (as we should love to do) and we have a function to be reused in several projects to get the type more efficiently.

That's it!

Types

(()=>{})()

Português

Vamos lá, quem nunca falou que Javascript é um caos porque não tem tipos? Até a Microsoft colocou seu pé no Javascript adicionando tipos e fazendo o "TipoScript". E para melhorar o operador typeof ajuda tanto quanto próximo a zero.

Por exemplo, se olhar o exemplo abaixo temos o seguinte:

var object = { type: "object" };
var array = ["type", "array"];
var string = "string";
var number = 99;
var regex = /regex/g;
Enter fullscreen mode Exit fullscreen mode

Se por qualquer motivo tivermos que garantir que esses valores são exatamente o que eles devem ser, o operador typeof vai nos ajudar apenas para primitivos, e talvez nem seja tão eficiente assim.

typeof object; // object
typeof array; // object
typeof string; // string
typeof number; // number
typeof regex; // object
Enter fullscreen mode Exit fullscreen mode

Para esses tipos de situações se pode fazer um truque que talvez ajude, como por exemplo:

Object.prototype.toString.call(object); // [object Object]
Object.prototype.toString.call(array); // [object Array]
Object.prototype.toString.call(string); // [object String]
Object.prototype.toString.call(number); // [object Number]
Object.prototype.toString.call(regex); // [object RegExp]
Enter fullscreen mode Exit fullscreen mode

Percebe como ele retorna algo muito mais preciso, e com um pouco de manipulação de string é possível retornar um tipo muito mais próximo do que se esperada de um operador de typeof, agora que você tem essa munição de informação prepare uma função de suporte ou utilitária (como nós dev adoramos fazer) e temos uma função para ser reutilizada em vários projetos para recuperar o tipo de maneira mais eficiênte.

É isso aí, comecem a usar!

Types

(()=>{})()

Top comments (4)

Collapse
 
aminnairi profile image
Amin

Hi there, thanks for your article and very cool to see some multi-lingual and short articles like yours!

Just for fun, here is a little utility function I use for going a little deeper with the example you gave with Object.prototype.toString.call.

"use strict";

const type = target => Object.prototype.toString.call(target).match(/\[object (?<type>.*)\]/).groups.type;

console.log(type(""));                  // String
console.log(type(0));                   // Number
console.log(type(false));               // Boolean
console.log(type([]));                  // Array
console.log(type({}));                  // Object
console.log(type(Symbol("")));          // Symbol
console.log(type(() => {}));            // Function
console.log(type(async () => {}));      // AsyncFunction
console.log(type(Promise.resolve()));   // Promise

And you can make this function work on your own class by using Symbol.toStringTag.

class Just {
    constructor(value) {
        this.value = value;
    }
}

console.log(type(new Just(0))); // Object

class Nothing {
    get [Symbol.toStringTag]() {
        return "Nothing";
    }
}

console.log(type(new Nothing())); // "Nothing"
Collapse
 
mohsenalyafei profile image
Mohsen Alyafei

Thanks

Collapse
 
rrdlpl profile image
R

and what about using typescript?

Collapse
 
shinspiegel profile image
Jeferson 'Shin' Leite Borges

Yup!
Got your point. But in the end the browser (or the JS runtime like Node and Deno) will only run JS scripts, in this case this little tricks could be usefull.