JavaScript 101: Data Types

by David Yates

Every programming language needs to know the kinds of data it will be working with. By knowing and learning about how a computer language uses data we can write better programs.

When we define a variable in Javascript assigning a variable gives that variable a “type” as an attribute.

As we write bigger, more complex applications it becomes essential that we know how to use these different “types” of data a variable can be. What’s a “type”?

A “type” or “data type” is defined as “an attribute of data which tells the compiler or interpreter how the programmer intends to use the data”, put simply its a way of telling a compiler what type of data we want to use.

Data types in programming languages are grouped into either “primitive” or “non-primitive” data types. Primitive Types

A “primitive data type” just means the data types a language can recognise “out of the box” or without any extra “steps”. Most languages will come with their own primitives, and Javascript uses the following 7 primitive data types:

string; // words and sentences eg. "foo"
number; // a floating point representation of a numeric value eg. 123
bigint; // numbers too large to be represented by a number e.g 9007199254740991
boolean; // true or false (don't confuse this with the "Boolean object" type)
undefined; // a value automatically assigned to variables that have just been declared e.g 'const x;' will resolve to 'undefined'
symbol; // a Symbol is created by invoking the Symbol function and produces an anonymous, unique value, can be used as an object property. e.g let Sym1 = Symbol("Sym")
null; // a null value is supposed to represent nonexistent or invalid values, in javascript all Objects are derived from null meaning js will return 'object' for any 'typeof(null)' comparisons.

To check what a javascript variable is, we can use the typeof operator. Try logging the ‘change me’ string below with some of the different values above in a react component and see what gets logged out:

const string = "change me";
render(typeof string);

Primitive types are also immutable which means they cannot be changed. When a string is manipulated, for example, what is returned is a new type.

Non-primitive types

A “Non-primitive” data type is a data type derived from primitive data types. I like to think of non primitive data types as a data type that can contain primitive data types though of course this is an over simplification.

The three main primitive types to remember in Javascript are arrays, objects and functions. In Javascript it’s said that everything is an object, though it’s probably more accurate to say everything that isn’t a primitive, is an object.

If everything is an object then, what about Arrays and Functions? (and undefined?) Well, what exactly is an object?

An object is defined by Mozilla as a standalone entity, with properties and type. An object can contain literally anything, including other objects, arrays and functions. Objects are given a type and is made up of properties.

Lets define an object in Javascript using a very cliche example:

const car = {};

car.colour = "red"; // a "string" property set to "red"

car.wheels = [
  {
    colour: "black",
    size: 21,
  },
  {
    colour: "black",
    size: 21,
  },
  {
    colour: "black",
    size: 21,
  },
  {
    colour: "black",
    size: 21,
  },
]; // an Array property, containing object properties, which contain string and number properties

car.start = () => {
  console.log("I'm a function");
}; // A function property

console.log(typeof car);
console.log(car);

//Should render something similar to: // [object Object] { colour: "red" start: () => { console.log("I'm a function"); } wheels: (4) [{…}, {…}, {…}, {…}] }

In the terminal, functions will be rendered either as empty objects or as a literal string unless the function is invoked (called) i.e car.start() in stead of car.start.

Arrays and Functions then, are just special objects in Javascript. Beware though you do get some unexpected behaviours when using the typeof operator:

typeof car; // object
typeof car.colours; // string
typeof car.wheels; // object
typeof car.start; // function

Javascript seems to catch some flack for its seemingly unpredictable nature of how it defines its types. I think as long as the developer is aware of certain gotchas it doesn’t really pose a problem, and if you throw Typescript into the mix then most confusion around types can all but disappear.

Using the example above lets throw some other primitive and Non-primitive types into the mix, namely null and undefined, oh, and NaN (Not A Number):

typeof null; // object
typeof undefined; // undefined
typeof NaN; // number

..wait, wat?

Null and undefined types

So, null can easily be explained, it is just a special primitive type Javascript uses to represent a missing object. Yes, it’s misleading, but just bear it in mind.

FYI, it’s fairly bad practice to use variable === null comparisons everywhere, nevertheless it happens. null is best thought of when you know something should be empty.

undefined though is its own gnarliness. undefined is what Javascript throws when it’s not been told about a property. I see this most often when either a property has been misspelt or there is an order of execution issue.

const obj = {}

obj.property = "a property"

console.log(obj.propery) // undefined (doh) console.log(obj.property) // a property

When is a number, Not A Number?

typeof(NaN) // number

The NaN type returns “number”, why is this?

In Javascript, NaN is still a numeric type, when NaN is thrown it simply means the value cannot be represented within the limitations of the language. It means it’s still probably a number, just not one Javascript can deal with right now.

Make note that you cannot compare two NaN values accurately, as they both are still likely numeric values. To check if a value is a number it’s best to use isNaN(NaN).

All Posts