Author avatar

Maciej Duraj

Understanding JavaScript Primitives and Their Functionality

Maciej Duraj

  • Feb 11, 2020
  • 6 Min read
  • 695 Views
  • Feb 11, 2020
  • 6 Min read
  • 695 Views
Languages Frameworks and Tools
JavaScript

Introduction

In a previous guide, I covered JavaScript objects in depth and how they function within the language. I also mentioned that objects are only one of two main JavaScript data types, the other being primitives. I will go more into depth here about what primitives consist of, their roles, and multiple variants.

How JavaScript Handles Data

Like HTML, JavaScript is a client-side language that does not need to be compiled prior to runtime, thus it is interpreted. However, unlike HTML, which is a markup language, JavaScript is a scripting language.

This means that its syntax or code is a subset of programming languages and it acts as a mediator between programs in order to generate data. It can essentially guide other programs through the use of its scripts.

JavaScript follows the ECMAScript standard, which scripting languages rely on, and which include eight data types overall. One of the data types is objects, while the other is primitives, which have seven variations.

The seven types of primitives include:

  • Number
  • String
  • Boolean
  • BigInt
  • Null
  • Undefined
  • Symbol
  • The main thing to keep in mind about primitives is that they represent data that has no methods and cannot be altered. They also have a fixed size in memory.

    Variables hold the actual values of primitive types, but they hold only references to the values of reference types.

    If a primitives has a value contained within it, it can be attributed to a variable. The variable holds the reference to the values of referred types. Here is an example below of how variables reference values:

    1
    var a_num = 1.45  // a_num holds the reference to the actual value

    Primitives vs. Objects

    Primitives differ from objects because they have no properties, thus their values cannot be changed. They are immutable. They also have no methods and can be looked at as just code or data. When primitives are called upon, the JavaScript language will call upon their object counterpart and switch between the two depending on need.

    Thus, in reality and in its bare code, JavaScript will form an object, use it, and return its results. This means that even though primitives are vital to the JavaScript language, they are also tied to objects through being copied and destroyed.

    Variables can hold primitives or compound data (arrays or clusters of data and objects) without being tied to objects. Properties is the term for variables that are actually tied to objects.

    Let us take a look at what some of these primitives do as an example of their functionality.

    Examples of Primitives and Their Purpose

    Null is a primitive that signifies that the value is unknown. Keep in mind that the typeof operator returns object for null due to ECMAScript’s evaluation.

    Undefined is not a declared value and is not defined in any meaningful way for someone to interpret. Any variable not assigned a value belongs to this category.

    Boolean refers to a logical statement with only two values: true or false.

    String is a primitive that represents characters put together in words or phrases that make up text. Thus, it can be referred to as textual data.

    BigInt represents integers that were possibly calculated and formed into digits of precision only limited by available system memory (arbitrary precision format). In essence, this primitive represents whole numbers larger than 253 - 1: the largest number JavaScript can reliably represent.

    An example is when appending n to the end of an integer literal or calling the function BigInt():

    1
    const theBiggestInt = 2003199254740456n
    1
    2
    const hugeString = BigInt("2003199254740456")
    // ↪ 9007199254740991n

    Number is a primitives type continuing 8 bytes of data.

    1
    2
    Number.NEGATIVE_INFINITY   // -Infinity
    Number.POSITIVE_INFINITY   // Infinity

    Symbol can be used as a key of an object’s property. Here is an example using apple as an object:

    1
    2
    3
    4
    var key = Symbol()
    var an_obj = {
      [key]: ’apple’
    }

    When objects are added, subtracted or printed (shown up on the console) using the alert(obj) command, primitives come into play. In each of these cases, objects are converted to primitives before any of these three operations are carried out within JavaScript.

    AutoBoxing and Unboxing Primitives Using JS++

    When using JS++, an extension of JavaScript, you can take advantage of autoboxing. This occurs when a JS++ (extension of JavaScript) compiler converts primitive data types to their corresponding object wrapper classes, in a sense using a wrapper to convert a primitive value to an object.

    For example, string will be converted to System.String, which is a class that happens to be the wrapper class for the string primitive type. JS++ introduces a compare method that vanilla JavaScript lacks.

    Thus, the JS++ compiler autoboxes the string value with the System.String object wrapper class in order to provide the compare method. Here is an example comparing strings blue and red:

    1
    2
    3
    4
    import System;
     
    Comparison compare1 = "blue".compare("red"); // Valid due to auto-boxing
    Comparison compare2 = (new System.String("blue")).compare("red"); // Equivalent boxed expression

    Another example of autoboxing is when JavaScript accesses variables within a primitive and when .call and .apply functions are used for a .this argument using a primitive. Here is an example of variable access:

    1
    var part = 'apple’.substr(0,2)

    Unboxing also occurs within JS++ when an object wrapper class is converted to its corresponding primitive data type.

    Conclusion

    Although most aspects of JavasScript may appear to focus on objects and how everything within the code relates to objects, this is not always the case. Primitives are also part of the JavaScript language. These seven primitives hold information that is vital to the language and keeps it afloat.

    6