The 8 Must-Know Data Types in JavaScript : Ultimate Guide

In this tutorial, you will learn about the JavaScript data types and their unique characteristics.
Data types describe the different types or kinds of data we're gonna be working with. These data are stored in variables.
In JavaScript, there are 8 types of data :
  • Number: integer or floating-point
  • String: represent textual data
  • BigInt: large integers
  • Boolean: true or false
  • undefined: not initialized value
  • null: denotes an empty value
  • Object: key-value pairs of collection of data
  • Symbol: represents data whose instances are unique and immutable (can't be changed)
  • All data types except Object are primitive data types, whereas Object is non-primitive because it can store collections of data. Primitive data types can only store a single data.
    Let's start describing each data type by its syntax, the possible operations or methods, and how to use each one.
    1 - Number
    Syntax
  • The number type is used for integer and floating points numbers.

  • JavaScript numbers are always 64-bit floating-point, where the number is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign-in bit 63.

  • let n = 234;
    let a = 3.14;
    
    let bigNumber = 1000000000;
    
    // We can also use underscore _ as the separator for more readability
    
    let bigNumber = 1_000_000_000;
    Possible Operations
    Number support many operations like :
  • addition +

  • division /

  • subtraction -

  • multiplication *

  • modulo %

  • Specific numeric values
    These specific numeric values are just "Infinity", "-Infinity" and "NaN".
  • Infinity represents the mathematic Infinity.

  • NaN (Not a Number) is the result of incorrect or undefined mathematical operations.

  • console.log(16 / 0); // => Infinity
    console.log("Hey here", / 5); => NaN
    Check for number type
    Use "typeof" operator. If the variable is a number, it'll return "number".
    let n = 314;
    let d = 3.14; 
    
    typeof n; => "number"
    typeof d; => "number"
    Common mistakes
    When working with numbers and strings, remember these rules:
  • JavaScript uses the + operator for both addition and concatenation.

  • Numbers are added and strings are concatenated.

  • Adding a number and a string will result in a string concatenation.

  • 2 - BigInt
    Syntax
    BigInt is a recent data type (propositon for ES2020).
    Notice that the "number" type cannot represent integer values respectively larger or less than 2*53 - 1 or - (2*53 - 1).
    A BigInt value is created by appending "n" to the end of the integer.
    let a = 4n;
    
    let n = 12345678912345678901234567890n;
    Possible operations
    BigInt can be used as a regular number.
    You can use operators such as:
  • addition (+)

  • division (/)

  • subtraction (-)

  • multiplication (*)

  • modulo (%)

  • console.log(2n + 2n); // => 4n
    
    console.log(5n / 2n); // => 2n
    
    console.log(2n * 2n); // => 4n
    
    console.log(5n - 2n); // => 3n
    
    console.log(5n ** 2n); // => 25n
    
    console.log(5n % 2n); // => 1n
    Comparisons and Boolean operations
  • Comparisons such as < and >, work with BigInts and numbers just well.

  • But note that numbers and bigints can be equalt "==",but not strictly equal "===".

  • Operators such as "||" or "&&" works on bigints similar to numbers

  • console.log(3n > 1n); // => true
    console.log(3n > 1); // => true
    console.log(3n == 3); // => true
    console.log(4 === 4n); // => false
    ### Check for bigints type
    Use "typeof" operator. If the variable is a bigint, it'll return "bigint".
    let a = 3n;
    console.log(typeof a); // => "bigint"
    Usage Recommendation
    Only use bigint when values are greater than 2**53.
  • The operations supported on BigInts are not constant time. BigInt is therefore unsuitable for use in cryptography.

  • Use TypeScript with bigint to reduce the production of TypeErrors.

  • 3 - String
    Syntax
  • A string in JavaScript represents textual data.

  • A string in JavaScript is always surrounded by quotes:

  • Double quotes ("")

  • Single quotes ('')

  • Backticks

  • let doubleQuotes = "Hello";
    let singleQuotes = 'Single Quotes';
    
    let str = "Using backticks";
    let backticks = `Here, ${str}`;
    
    console.log(backticks); // => "Here, Using backticks."
    Properties and methods
  • str.length => returns string length.

  • str.indexOf(subStr, pos) looks for a substring within a string.

  • str.includes(subString, position) => true/false if the string contains subStr within.

  • str.startsWith and str.endsWith do exactly what they say.

  • let str = "Hello";
    
    console.log(str.length); // => 5
    
    str.indexOf("He"); => 0
    
    str.includes("He"); => true
    
    str.includes("z"); => false
    
    str.startsWith("H"); => true
    
    str.endsWith("o"); => true
    More methods
  • str.substring(start, end) => returns the part of str between start and end

  • str.substr(start, end) => returns the part of str from start, with the given length

  • str.slice(start, end) => returns the part of str from start to end(not included).

  • Note that here, start and end represent the indexes.
    let str = "Hello";
    
    str.subString(0, 2); // => "He"
    
    str.substr(0, 2); // => "He"
    
    str.slice(2,4); // => "ll"
    Accessing characters
  • To get a character at position 'index', use square brackets[]

  • You can also use the method str.charAt(index)

  • Notice that the first character starts from the zero position

  • let str = "Hello";
    
    console.log(str[0]); // => "H"
    
    console.log(str.charAt(0)); => "H"
    Useful and important information
  • strings are immutable in JavaScript. It's impossible to change a character.

  • You can use str.replace(old_char, new_char) to return a new string with the old_char replaced by new_char.

  • let str = "Hello";
    
    str = str.replace("Hello", "Hi");
    
    console.log(str); => "Hi"
    4 - Boolean
    Syntax
  • the boolean type in JavaScript has only two types: true and false
  • let checked = true;
    
    let notChecked = false;
    Comparisons
    In JavaScript, boolean values come as a result of comparisons.
  • === => strictly equal to

  • !== > strictly not equal to

  • > => greater than

  • < => lighter than

  • >= => greater than or equal to

  • <= => lighter than or equal to

  • console.log(1 === 1); // => true
    console.log(1 > 2); // => false
    console.log(1 < 2); // => true
    Some Logical Operators
  • OR => || (Returns true if one operand is true and false if none are true.)

  • AND => && ( Returns true if both operands are truthy and false.)

  • NOT => ! (converts the operand to boolean type and return the inverse value) operand.

  • let a = true;
    
    let b = true;
    
    let c = false;
    
    console.log(a || b); // => true
    console.log(a || c); // => true
    console.log(a && b); // => true
    console.log(a && c); // => false
    Useful information
    Actually you can also use == (equal to) and != (not equal too) to make comparisons.
    But strict operators (=== and !==) compare value and types.
    let a = 1; // => type number
    
    let b = "1"; // => type string
    
    console.log(a == b); // => true
    
    console.log(a === b); // false
    5 - Null
    Syntax
    In JavaScript, null is just a value representing "nothing", "empty" or "unknown value".
    You can assign null to a variable to denote that currently, that variable does not have any value.
    let fruit = null;
    
    console.log(fruit); // => null
    Check for null
    Actually, you can use :
  • The strict operator ===

  • as a boolean, because null is a falsy value

  • let fruit = null;
    
    console.log(fruit === null); // => true
    
    if (fruit) {
        console.log("fruit is truth.");
    } else {
        console.log("fruit is falsy.");
    }
    
    
    // => "fruit is falsy"
    6 - Undefined
    Syntax
    undefined is returned when accessing a variable on a property that hasn't been initialized yet.
    or when a variable hasn't been assigned a value.
    or when a function returns nothing.
    let a;
    
    console.log(a); // => undefined
    
    let fruit = { name: 'Orange' };
    
    console.log(fruit.taste); // => undefined
    
    let fruitList = ["Orange", "Banana", "Lemon"];
    
    console.log(fruitList[3]); // => undefined
    
    function sum(a, b) {
        let sumNumbers = a + b;
    };
    
    sum(5 + 5); // => undefined
    Check for undefined
    Actually, you can use :
  • The strict operator "==="

  • boolean, because undefined is a falsy value

  • let a;
    
    console.log(a === undefined); // => true
    
    if (a) {
        console.log("Has value");   
    } else {
        console.log("undefined");
    }
    // => 'undefined'
    7 - Object
    Syntax
    The object is a data type that can holds values in terms of properties or methods.
    There are two ways to create an object in JavaScript :
  • Object literal using {}

  • Object constructor using new Object()

  • // Using Object literal
    
    let city = {
        name: "Paris",
        population: 1000,
        getCityInfo: function() {
        return this.name + ', ' + this.population;
       }
    };
    
    // Using Object constructor
    
    let city = new Object();
    
    city.name = "Paris";
    city.population = 1000;
    city.getCityInfo = function() {
        return this.name + ', ' + this.population;
    };
    Accessing properties
    You can access object properties :
  • Using the dot notation

  • Using the bracket notation

  • However, you can only access methods using dot notation.
    let city = {
        name: "Paris",
        population: 1000,
        getCityInfo: function() {
            return this.name + ', '  + this.population;
        }
    };
    
    city.name; // => "Paris"
    city["name"]; // => "Paris"
    city.getCityInfo(); // => "Paris, 1000"
    Note that Array is type object too.
    8 - Symbol
    Syntax
    The Symbol is a primitive data type of JavaScript
  • They are immutable (can't be changed)

  • A symbol represents a unique identifier

  • You can pass an optional string as its description

  • const fruitSymbol = Symbol();
    Check for Symbol Type
    To check for Symbol type, use the typeof operator. It should return symbol.
    console.log(Symbol() === Symbol()); // false
    Must-know about Symbol
  • Symbols are guaranteed to be unique

  • When making global symbols using, the values are equals

  • Symbols are no enumerated, then they don't appear in for ..in or for..of

  • Access symbols from an object using "obj.getOwnPropertySymbols()"

  • Symbol("x") === Symbol("x"); // => false
    
    let id = Symbol.for("id");
    
    let newId = Symbol.for("id");
    Conclusion
    In this article, I showed you the common data types in JavaScript.
    Every article can be made better so your suggestion or questions are welcome in the comment section.
    ​​If you also think that I missed somethinng important, let me know. ​🤠​

    58

    This website collects cookies to deliver better user experience

    The 8 Must-Know Data Types in JavaScript : Ultimate Guide