Hi everyone! And welcome to our first 2021 edition of Boring JavaScript!

Today, we’re taking on the ‘typeof’ and ‘instanceof’ operators.

What are you, exactly?

‘typeof’ is used to determine the JavaScript datatype of a variable – thus the strange name of ‘typeof’. If you refer to our article and video on JavaScript Datatypes, the ‘typeof’ operator is used to determine which datatype you are dealing with.

And as an operator, it’s very easy to use.

const myString = "This is a string";
console.log(typeof myString); 
// the above prints 'string'

And that’s all there is to it. The data returned by ‘typeof’ is itself a string. For example, if you are doing simple validations on functions, you could do something like this:

function processInput(value) {
    if (typeof value !== 'number') {
        return { err: 'Value must be a number', data: null };
    }
    return { err: null, data: value * 2 };
}

Of course, the above is simple, but ‘typeof’ is a great way to do immediate checks on the validity of your variables.

Who are you, exactly?

While ‘typeof’ tells you the datatype, ‘instanceof’ is a test to determine if a variable is a created instance of another function or class – thus the name ‘instanceof’.

It’s easiest to explain with an example:

class Animal {
    constructor() {
        this.teeth = 'sharp';
    }
}

const myAnimal = new Animal();
console.log(myAnimal instanceof Animal);
// the above prints 'true'

console.log(myAnimal instanceof Array);
// the above prints 'false'

Lines 8 and 11 use the ‘instanceof’ to check to see if our variable is an ‘instance’ of a function (or, in this case, class). Unlike ‘typeof’ which returns a string, ‘instanceof’ runs a test against a previously known function or class, and will return boolean true or boolean false if our variable matches an instance of the function or class.

If you are using classes (or the equavalent function techniques), ‘instanceof’ can also be used to determine if a class is extended from another class. Like this:

class Animal {
    constructor() {
        this.teeth = 'sharp';
    }
}

class Cat extends Animal {
    constructor() {
        super();
        this.furry = true;
    }
}

const myAnimal = new Cat();
console.log(myAnimal instanceof Cat);
console.log(myAnimal instanceof Animal);
console.log(myAnimal instanceof Object);
// all three of the above will print 'true'

Lines 15, 16, 17 will all print ‘true’ because Cat extends Animal, and Animal extends Object (as all classes do). You are not limited with ‘instanceof’ to just the top-level class. It can be used to test against all the extended classes.

BONUS: Can you get the ‘name’ of the class represented by your variable? Certainly – if you are using ES6.

class Animal {
    constructor() {
        this.teeth = 'sharp';
    }
}

const myAnimal = new Animal();
console.log(myAnimal.constructor.name);
// the above prints 'Animal'

The Video

If you hate reading, you can listen to my voice drone on by viewing our video.

Shameless Pitch

Make sure you check us out on the Internet!

1. Boring JavaScript Website
2. Boring JavaScript GitHub

Categories: Boring JavaScript Javascript

Tagged as: #instanceof #javascript #typeof

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com