Data Types In Javascript

2020-09-28 - by Sarp IŞIK

This article focuses on classifying general data types under primitive and non-primitive types, rather than examining each data type in detail. You can access detailed information about each data type by clicking the title of the relevant data.

Like the other programming languages, Javascript has built-in data types divided into two categories: primitives and non-primitives.

Primitives

The primitive data type is the simplest and plainest data type. A variable can only store one primitive data type and it can not be mutated(immutable). There are 7 primitive data types:

String

The String type is a collection of textual data. It must be enclosed in single or double quotation marks or backticks:

var single = 'Hello world';
var double = "Hello world";
var backticks = `Hello world`;

Backticks are usually preferred to use for storing a variable inside the string:

var car = `${brand} ${model}`;

The string type is structured as a zero-index based character array. The first element is at index 0, the next at index 1, and so on,

var message = "Hello world";
message[0]; // H
message[1]; // e
.
.
.
message.length // 11

Strings can also be concatenated with the addition operator:

var message = "Hello" + " " + "world";

Number

Numbers are as they sound, represents integer and floating numbers. The number type has three other values:

var num1 = 1 / 0; // Infinity
var num2 = -2 / 0; // -Infinity
var num3 = 'text' / 0; // NaN

BigInt

The difference from Number type is, BigInt data represents larger number than (253 - 1). A BigInt is created by appending n to the end of an integer or by calling the constructor:

var x = 3n * 5n; // 243n
var y = 820934n * 4n; // 3283736n
var z = y / 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions

Boolean

Boolean is a logical entity and includes one of two values: true or false.

var truthy = true;
var falsy = false;

Null

Null represents the absence of a value. It can be assigned to a variable.

Null is treated as falsy for boolean operations.

typeof null; // 'object'
Boolean(null); // false

Undefined

When a variable declared but not assigned to a value, it has the value undefined.

Same as null, undefined is treated as falsy for boolean operations.

var x; // undefined

Symbol

Symbol is a unique immutable primitive value.

Symbol('a') === Symbol('a'); // false
'a' === 'a'; // true

See Symbol object wrapper for more details about Symbol.

Non-Primitives

The non-primitive data type is a value stored in memory and referenced by an identifier. Unlike the primitive data types, non-primitive data types are assigned to variables as a reference to their existence in the memory:

var str1 = 'a';
var str2 = 'a';
str1 === str2; // true
var obj1 = { key: 'value' };
var obj2 = { key: 'value' };
obj1 === obj2; // false
// Values of 'key' properties are primitive
obj1.key === obj2.key; // true

Object

Objects are complex data types. Objects are collections of key/value pairs where keys are strings or Symbols (behind the screens javascript engine will convert any numbers to string) and the values can be any primitive or non-primitive data type.

var obj = {
    key: 'value',
    1: '1',
    '2': 2,
    subObj: {
        func() { ... }
    }
};

Values can be accessed with the dot "." notation followed by the name of the key or with square brackets enclosing the key as a string.

obj.1; // "1"
obj["2"]; // 2

Array

Arrays are complex data types similar to objects. The main difference is arrays are indexed collections where objects are key/value paired collections.

var arr = ['apple', 1, () => {}, {}];

Comparision

Primitives have no properties, but objects(non-primitives) have:

String.prototype.returnTypeOf = function () {
    return typeof this;
};
typeof  'a'; // 'string'
// Javascript automatically coerces between primitives and objects.
// So, string value 'a' coerced to a String object and that is why
// we can access the method in prototype and returns typeof 'object'
'a'.returnTypeOf() // 'object'
var num = 123;
num.firstDigit = 1;
num.firstDigit; // undefined
var num = {};
num.firstDigit = 1;
num.firstDigit; // 1

Primitives are not mutable and can be copied easily by assigning to a different variable. Objects are mutable and only their references are copied when assigned to a new variable:

var personA = 'John Doe';
var personB = personA;
personA === personB; // true
personA = 'Emily Doe';
personA === personB; // false
var personA = { name: 'John Doe' };
var personB = personA;
personA === personB; // true
personA.name = 'Emily Doe';
personA === personB; // true

References: