JavaScript provides different data types to hold different types of values. Understanding these data types is crucial for writing effective and bug-free code. Here’s a guide to the various data types in JavaScript, along with code examples.

  1. Number

    Numbers in JavaScript include both integer and floating-point values.

      let integerNumber = 42;
let floatingPointNumber = 3.14;

console.log(integerNumber); // 42
console.log(floatingPointNumber); // 3.14

  2. String

    Strings are used to represent textual data. They are enclosed in single quotes (’’), double quotes (""), or backticks (`).

      let singleQuoteString = 'Hello';
let doubleQuoteString = "World";
let templateString1 = `Hello, ${doubleQuoteString}!`;
let templateString2 = `hi


hi`;

console.log(singleQuoteString); // Hello
console.log(doubleQuoteString); // World
console.log(templateString1); // Hello, World!
console.log(templateString2); // hi
// 
//
//hi

  3. Boolean

    Booleans can have only two values: true or false.

      let isJavaScriptFun = true;
let isFishFlying = false;

console.log(isJavaScriptFun); // true
console.log(isFishFlying); // false

  4. Undefined

    A variable that has been declared but not assigned a value is undefined.

      let uninitializedVariable;

console.log(uninitializedVariable); // undefined

  5. Null

    null is a special value that represents “no value”.

      let emptyValue = null;

console.log(emptyValue); // null

  6. Object

    Objects are collections of key-value pairs. They are used to store various keyed collections and more complex entities.

      let person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

console.log(person); // { name: 'John', age: 30, city: 'New York' }
console.log(person.name); // John

  7. Array

    Arrays are used to store multiple values in a single variable. Each value in an array has a numeric index.

      let colors = ['red', 'green', 'blue'];

console.log(colors); // ['red', 'green', 'blue']
console.log(colors[1]); // green

  8. Symbol

    Symbols are unique and immutable primitive values and can be used as keys for object properties.

      let symbol1 = Symbol('description');
let symbol2 = Symbol('description');

console.log(symbol1); // Symbol(description)
console.log(symbol1 === symbol2); // false

  9. BigInt

    BigInt is a special numeric type that provides support for integers of arbitrary length.

      let bigNumber = BigInt(1234567890123456789012345678901234567890);

console.log(bigNumber); // 1234567890123456789012345678901234567890n

Summary

Understanding these data types and how to use them is fundamental for JavaScript programming. Here is a simple HTML example to showcase the usage of different data types in JavaScript:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Data Types</title>
</head>
<body>
    <h1>JavaScript Data Types Example</h1>
    <script type="text/javascript">
        // Number
        let number = 100;
        console.log('Number:', number);

            //Decimal
            let decimal = 42;
            console.log('Decimal:', decimal); // 42
        
                // Using leading zero
                let numberWithLeadingZero = 0.75;
        
                // Omitting leading zero
                let numberWithoutLeadingZero = .75;
            
            //Binary
            let binary = 0b101010;
            console.log('Binary:', binary); // 42

            //Octal
            let octal = 0o52;
            console.log('Octal:', octal); // 42
            
            //Hexadecimal
            let hexadecimal = 0x2A;
            console.log('Hexadecimal:', hexadecimal); // 42

        // String
        let string = 'Hello, JavaScript!';
        console.log('String:', string);

        // Boolean
        let boolean = true;
        console.log('Boolean:', boolean);

        // Undefined
        let undefinedValue;
        console.log('Undefined:', undefinedValue);

        // Null
        let nullValue = null;
        console.log('Null:', nullValue);

        // Object
        let object = { key: 'value' };
        console.log('Object:', object);

        // Array
        let array = [1, 2, 3];
        console.log('Array:', array);

        // Symbol
        let symbol = Symbol('unique');
        console.log('Symbol:', symbol);

        // BigInt
        let bigInt = BigInt(1234567890123456789012345678901234567890);
        console.log('BigInt:', bigInt);
    </script>
</body>
</html>

By running the above HTML file in a browser, you can see the different JavaScript data types logged to the console.

Bonus

JavaScript Literals

In JavaScript, a “literal” is a fixed value that is written directly in the code. Literals represent values that are directly specified by their notation in the script. They are used to assign values to variables or to represent data within expressions.

Here’s an example of an index.html file that demonstrates the use of various literals in JavaScript:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Literals Examples</title>
</head>
<body>
    <h1>JavaScript Literals Examples</h1>
    <script type="text/javascript">
        // Number literal
        let age = 25;
        console.log('Number literal:', age);

        // String literal
        let greeting = "Hello, world!";
        console.log('String literal:', greeting);

        // Boolean literal
        let isStudent = true;
        console.log('Boolean literal:', isStudent);

        // Object literal
        let car = {
            make: "Toyota",
            model: "Camry",
            year: 2020
        };
        console.log('Object literal:', car);

        // Array literal
        let fruits = ["apple", "banana", "cherry"];
        console.log('Array literal:', fruits);

        // Regular expression literal
        let pattern = /[A-Z]/g;
        console.log('Regular expression literal:', pattern);

        // Null literal
        let noValue = null;
        console.log('Null literal:', noValue);

        // Undefined literal
        let unknown;
        console.log('Undefined literal:', unknown);
    </script>
</body>
</html>

Explanation

  1. Number Literal:

    • let age = 25; assigns the number 25 to the variable age.

  2. String Literal:

    • let greeting = "Hello, world!"; assigns the string "Hello, world!" to the variable greeting.

  3. Boolean Literal:

    • let isStudent = true; assigns the boolean value true to the variable isStudent.

  4. Object Literal:

    • let car = { make: "Toyota", model: "Camry", year: 2020 }; creates an object with properties make, model, and year.

  5. Array Literal:

    • let fruits = ["apple", "banana", "cherry"]; creates an array with the elements "apple", "banana", and "cherry".

  6. Regular Expression Literal:

    • let pattern = /[A-Z]/g; creates a regular expression to match all uppercase letters.

  7. Null Literal:

    • let noValue = null; assigns the special value null to the variable noValue.

  8. Undefined Literal:

    • let unknown; declares a variable without assigning a value, so it is undefined.

This HTML file, when opened in a browser, will display a heading and log the different literals to the console. You can open the browser’s developer tools (usually by pressing F12 or Ctrl+Shift+I) to view the console output.