Variables and Data Types in JavaScript

Objective

In this tutorial, you will learn how to create variables in JavaScript, understand different data types, and how to display the values stored in these variables on the web page and in the console.


Step 1: What are Variables?

Variables are like containers that store data. You can put different types of data into variables, such as numbers, text, or even more complex objects.

Step 2: Declaring Variables

In JavaScript, you can declare variables using var, let, or const. Here’s a simple explanation of each:

  • var: Used in older JavaScript code; it has function scope.
  • let: Modern way to declare variables; it has block scope (preferred over var).
  • const: Used to declare variables that cannot be reassigned (constant values).

Syntax:

let variableName = value;

Step 3: Understanding Data Types

JavaScript variables can hold different types of data. The most common data types are:

  • Numbers: Represent numerical values (e.g., 5, 3.14).
  • Strings: Represent text, enclosed in quotes (e.g., "Hello", 'World').
  • Booleans: Represent true/false values (e.g., true, false).

Step 4: Writing and Executing Code

Example 1: Declaring Variables and Displaying Them

Create a New HTML File:

  • Open your text editor and create a new file. Name it variables.html.
  • Copy and paste the following code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Variables</title>
    </head>
    <body>
        <h1>JavaScript Variables and Data Types</h1>
        <p id="number"></p>
        <p id="text"></p>
        <p id="pi"></p>
        <p id="isJavaScriptFun"></p>
    
        <script>
            let number = 42;                // Number data type
            let text = "Hello, World!";     // String data type
            const pi = 3.14;                // Constant value
            let isJavaScriptFun = true;     // Boolean data type
    
            console.log(number);
            console.log(text);
            console.log(pi);
            console.log(isJavaScriptFun);
    
            // Displaying the variables on the web page
            document.getElementById("number").textContent = "Number: " + number;
            document.getElementById("text").textContent = "Text: " + text;
            document.getElementById("pi").textContent = "Value of Pi: " + pi;
            document.getElementById("isJavaScriptFun").textContent = "Is JavaScript fun? " + isJavaScriptFun;
        </script>
    </body>
    </html>

    Save and Open in Browser:

    • Save the file and open it in your browser.
    • You should see the values of the variables displayed directly on the webpage.
    • Open the browser console (Right-click on the page, choose “Inspect”, then go to the “Console” tab) to see the output of console.log().

      Explanation of the Code:

      • let number = 42;: A variable number is declared and assigned the value 42.
      • let text = "Hello, World!";: A variable text is declared and assigned the string "Hello, World!".
      • const pi = 3.14;: A constant pi is declared and assigned the value 3.14. Since it’s a constant, you cannot change this value later in the code.
      • let isJavaScriptFun = true;: A boolean variable isJavaScriptFun is declared and assigned the value true.
      • document.getElementById("number").textContent = "Number: " + number;: This line sets the text content of the paragraph with the ID number to display the value of the variable number.

      Step 5: Experimenting

      • Change Values: Try changing the values of the variables and see how it affects the output both on the webpage and in the console.
      • Add New Variables: Add more variables with different data types and display them using console.log() and by adding new paragraphs to the HTML.

      Common Data Types:

      Here are a few more examples of data types in JavaScript:

      let myName = "John Doe";       // String
      let age = 18;                  // Number
      let isStudent = true;          // Boolean
      let height = null;             // Null (no value)
      let weight;                    // Undefined (no value assigned)

      Step 6: Summary

      • You learned how to declare variables using let, var, and const.
      • You learned about basic data types in JavaScript: numbers, strings, and booleans.
      • You practiced displaying the values stored in variables using console.log() and displaying them on the webpage using JavaScript.

      Leave a Reply