INIBLOG / blogpost / article/JavaScript Data Types
HTML5 Tutorial
CodeIgniter 4
Bootstrap Tutorial
Installation Guide
CSS Tutorial
JavaScript Tutorial

JavaScript Tutorial - JavaScript Data Types

Posted by Ridwan Fadilah on Sep 15, 2020 - 03:01 am

JavaScript Data Types

JavaScript data types. Learn about what is data types, the concept of data types, complex data, and many more.

Each programming language has its own built-in data types structure, but these will differ from one programming language to another.

JavaScript variable can hold many data such as numbers, strings, objects, and more.

This tutorial will attempt to list and explain the data types available in JavaScript.

Table of Contents

Dynamic Types

JavaScript has dynamic types. JavaScript variables are not directly associated with any particular value type. Its means the same variable can hold different data type and any variable can assign or re-assign all value types.


let x; // x is undifined
x = 10; // x is now a number
x = "Doe"; // x is now a string
x = true; // x is now a boolean

JavaScript String Data Type

JavaScript strings data type is a series of characters used to represent textual data types like "John Doe"; It is a set of elements of 16-bit unsigned integer values.

Each element of the String occupies a position in the String. The first string element is at index [0], the next at index [1], and so on. The string length is the number of "elements" in a string.

Important to note: Strings are written with quotes. You can use single or double quotes.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript String Data Type Example</h2>

  <p id="demo"></p>

  <script>
    let carType1 = "Mitsubishi L300"; // double quotes
    let carType2 = 'Mitsubishi Xpander'; // singel quotes

    document.getElementById("demo").innerHTML = carType1 + "<br>" + carType2; 
  </script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript String Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.


You can use quotes inside a string, as long as they don't match the quotes surrounding the string:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript String Data Type Example</h2>

  <p id="demo"></p>

  <script>
    var ex1 = "It's alright"; // Single quote inside double quotes
    var ex2 = "My name is 'John'"; // Single quotes inside double quotes
    var ex3 = 'I am "John"'; // Double quotes inside single quotes

    document.getElementById("demo").innerHTML = ex1 + "<br>" + ex2 + "<br>" + ex3;
  </script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Strings Data Type Example 2 by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Escape Character

Like the example before, you can use quotes inside a string, as long as they don't match with the string quotes. However, what will happen if you have the same quotation mark? If quotes are the same, JavaScript will return an error or incorrectly string.


let ex1 = 'My name is 'John' from Jakarta';
let ex2 = "I am "John" and I like coffee";

The solution of these is by using the so-called "escape characters."

Escape characters use a backslash (\) to turns special characters that have a different interpretation in a programing language.

In simple words, the quotes will turn into a strings character or element.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Escape Characters</h2>

  <p id="demo"></p>

  <script>
    let ex1 = 'My name is \'John\' from Jakarta';
    let ex2 = "I am \"John\" and I like coffee";
    let ex3 = "The character \\ is called backslash.";

    document.getElementById("demo").innerHTML = ex1 + "<br>" + ex2 + "<br>" + ex3;
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Escape Characters by Ridwan (@ridwan-the-bold) on CodePen.


Here's the escape sequences are valid in JavaScript:

# Code Result
1 \' Single quote
2 \" Double quote
3 \\ Backslash
4 \b Backspace
5 \f Form Feed
6 \n New Line
7 \r Carriage Return
8 \t Horizontal Tabulator
9 \v Vertical Tabulator
JavaScript String Length

To find the length of a string, use the built-in length property:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript String Length Example</h2>

  <p id="demo"></p>

  <script>
    let ex1 = 'John Doe';

    document.getElementById("demo").innerHTML = ex1.length;
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript String Length Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Number Data Type

JavaScript has built-in numeric data types. The number type represents both integer and floating-point numbers.

There are have some operation for numbers such as multiplication (*), division (/), addition (+), subtraction (-), and more.

Learn about JavaScript Operators for numbers operation in JavaScript Syntax Tutorial.


Numbers can be written with, or without decimals:


let n = 52; // Written without decimals
n = 52.00; // Written with decimals

Extra large or extra small numbers can be written with scientific (exponential) notation:


let x = 123e5; // 12300000
let y = 123e-5; // 0.00123

In addition to representing floating-point numbers, besides regular numbers, there are so-called “special numeric values” which also belong to this data type: Infinity, -Infinity, and NaN (Not a Number).

Infinity is a special value that greater than any number.

We can get it as a result of division by zero:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Number Data Type (Infinity)</h2>

  <p id="demo"></p>

  <script>
      let x;
      x = (1 / 0); // Infinity
  
      document.getElementById("demo").innerHTML = x;
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Numbers Data Types (Infinity) by Ridwan (@ridwan-the-bold) on CodePen.


NaN represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Number Data Type (NaN)</h2>

  <p id="demo"></p>

  <script>
      let x;
      x = ("NaN" / 2); // Not a Number, such division is erroneous
  
      document.getElementById("demo").innerHTML = x;
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Numbers Data Type (NaN) by Ridwan (@ridwan-the-bold) on CodePen.


BigInt Type

The “number” type in JavaScript cannot represent integer values larger than (253-1) (that’s 9007199254740991), or less than -(253-1) for negatives.

A BigInt value is created by appending n to the end of an integer:


// the "n" at the end means it's a BigInt
const bigInt = 1234567890123456789012345678901234567890n;

JavaScript Boolean Data Type

Boolean represents a logical data type and only have two values: true and false.

The boolean is commonly used to store yes/correct value for true, and no/incorrect for false (often used in conditional testing).

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Boolean Data Type Example</h2>

  <p>If the comparison is "true", JavaScript will return yes/true.</p>

  <p id="demo"></p>

  <script>
    let x = 15 > 3;

    if (x == true) {
    document.getElementById("demo").innerHTML = "yes/true"; // true (the comparison result is "yes")
    }
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Booleans Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Array Data Type

In simple words, the JavaScript array data type is a combination of multiple values.

In its use, the array items are separated by commas and placed inside the square brackets.


const cars = ["Esemka", "VW", "Toyota"];

Array items can be string, integer or number, boolean, and object data types or can also a combination of several data types.

Like the string elements, array indexes are zero-based, which means the first item is index [0], the second is index [1], and so on.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Array Data Type Example</h2>

  <p id="demo"></p>

  <script>
    const myArray = ["car", 12, true];

    document.getElementById("demo").innerHTML = myArray + "<br>" + "The index[0] is" + " " + myArray[0];
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Array Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Object Data Type

Almost the same with the array, in its use, JavaScript object data type items are separated by commas and can also have multiple items.

The differences between array and object syntaxis are the object items placed inside the curly braces {} and should have object properties.

Object properties are written as name: value pairs.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Object Data Type Example</h2>

  <p id="demo"></p>

  <script>
    const person = {firstName:"John", lastName:"Doe", age:50};

    document.getElementById("demo").innerHTML = "Name: " + person.firstName + " " + person.lastName + "<br>Age: " + person.age;
  </script>

</body>
</html>

The example above will display by the browser like this:

See the Pen JavaScript Object Data Type Example by Ridwan (@ridwan-the-bold) on CodePen.


The object (person) in the example above has 3 properties: firstName, lastName, and age.

JavaScript Undefined

If a variable is declared, but the value is not assigned, JavaScript will return an "undefined" result, and the type also undefined.


let car;    // Value is undefined, type is undefined

When the value is set to "undefined" the type will also be undefined:


let car = undefined;    // Value is undefined, type is undefined

JavaScript Null

The special null value does not belong to any of the types described above.

It forms a separate type of its own which contains only the value:


let age = null;

In JavaScript null is "nothing"; It is supposed to be something that doesn't exist.

In simple words, null is represents "nothing", "empty" or "value unknown".

JavaScript typeof Operator

If you want to find the type of a JavaScript variable, you can use the JavaScript "typeof" operator.

The "typeof" operator returns the type of a variable or an expression:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Object Data Type Example</h2>

  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = 
       
      // "undefined"
      typeof car + "<br>" +

      // "number"
      typeof 0 + "<br>" +

      // "bigint"
      typeof 10n + "<br>" +

      // "boolean"
      typeof true + "<br>" +

      // string
      typeof "foo"; 
  </script>

</body>
</html>

The result of the example above will be like this:

See the Pen JavaScript typeof Operator Usage Example by Ridwan (@ridwan-the-bold) on CodePen.


Learn more about JavaScript Operators in JavaScript Syntax Tutorial.


Complex Data

The typeof operator can return one of two complex types:

  • function
  • object

The typeof operator will returns "object" for objects, arrays, and null.

The typeof operator does not return "object" for functions.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Object Data Type Example</h2>

  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = 

      // Returns "object"
      typeof {name:'john', age:34} + "<br>" +

      // Returns "object"
      typeof [1,2,3,4] + "<br>" +

      // Returns "object"
      typeof null + "<br>" +

      // Returns "function"
      typeof function myFunc(){};
  </script>

</body>
</html>
Important to note: The typeof operators will return arrays as an "object" because, in JavaScript, arrays are objects.

See the Pen JavaScript Complex Data by Ridwan (@ridwan-the-bold) on CodePen.


Okay, that's the tutorial about JavaScript Data Types. You should know, that's just the basics! You'll learn more about JavaScript in the next chapter.

You can read another JavaScript basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.

Thanks for reading.

Related Articles
JavaScript Functions JavaScript Syntax JavaScript Introduction